Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

admin

Forum Replies Created

Viewing 25 posts - 26 through 50 (of 529 total)
  • Author
    Posts
  • in reply to: Which CSS/JS files are used with Bootstrap3 ? #8291
    admin
    Keymaster

    Hello, that’s a lot of very basic questions and, unfortunately, I have the feeling it would be quite difficult for you to figure it out on your own. It would take less time for me to prepare a demo page, rather than trying to address all your questions. So please just let me know what exactly you need and I will pack a demo for you – which one of these:

    1) Complete navbar .sm-mint
    2) Full Width Mega Menu

    ?

    A note about the Bootstrap addon – if you would like to use the “sm-mint” SmartMenus theme, you don’t need the addon. The addon is needed in case you would like to use Bootstrap’s theme.

    in reply to: How to make this work with no links at the top level? #8288
    admin
    Keymaster

    Here are the recommended solutions to the issues you are having. You won’t need to customize anything in the script core – you just need a bit additional CSS and JS. And the result is a fully accessible sub menu (screen readers/keyboard):

    https://jsfiddle.net/zLnqcb6y/28/

    But again, in order the sub menu to be fully accessible to screen readers and keyboard users I strongly recommend using the following HTML for your parent “Search” menu item:

    <a href="#">Search</a>
    in reply to: mobile navigation also on desktop #8286
    admin
    Keymaster

    Yep, of course, it’s as simple as deleting all the desktop styles from your theme CSS file (e.g. “sm-blue.css”) – i.e. this whole part:

    @media (min-width: 768px) {
      ...
    }
    in reply to: How to make this work with no links at the top level? #8285
    admin
    Keymaster

    Sorry for getting back late! Could you please post the HTML content of one of your main menu <li>‘s? I am not sure why you would need to wrap all those kinds of elements inside the link (if you use a link instead of a <span> that is). You could put those elements as siblings of the link instead.

    admin
    Keymaster

    Yes, the script requires <a> elements for triggering the sub menus so some modifications would be needed if you would like to use <span>‘s instead.

    However, I am not sure there is any serious reason for not using <a>‘s, is there? You could even omit the href attribute if you like (not advisable) and it would still work properly with mouse/touch:

    ...
    <li><a>About</a>
      <ul>
        ...

    On the other hand, there is a serious reason for using <a>s inside parent menu items (and not omitting the href as in the above example) – without a link element your parent menu item loses its ability to gain focus and thus the sub menu becomes completely inaccessible via the keyboard (unless you specifically add a tabindex attribute to your <span>‘s but that is still not a perfect replacement for a real link).

    in reply to: Show current submenu in mobile view (itemActivate) #3777
    admin
    Keymaster

    Hi, sorry for the delay! You’d need to use this option data-sm-options="{ markCurrentItem: true }" – this will make sure the script adds the “current” class automatically to the <a> element linking to the current URL.

    And then include some additional JS at the end of you pages – something like this:

    // SmartMenus jQuery + Bootstrap 4 - expand active sub menu on mobile toggle button click
    $('.navbar-toggler').click(function() {
      var $nav = $('.navbar-nav');
      if (!$(this).is('[aria-expanded="true"]')) {
        // use the timeout to make sure it works after the navbar is expanded by the BS JS
        setTimeout(function() {
          $nav.smartmenus('itemActivate', $nav.find('a.current').eq(-1));
        }, 1);
      } else {
        $nav.smartmenus('menuHideAll');
      }
    });

    (You may need to change the selectors if you have multiple .navbar-toggler/.navbar-nav elements on your pages.)

    admin
    Keymaster

    Hi, it can’t be achieved very easily. It’s designed to work like a desktop app menu – as soon as some sub menu is activated (via Enter, Space or Down arrow) just moving around the focus via the arrow keys activates any other sub menus automatically until Esc is pressed. So it’s toggleable behavior but for the whole menu tree.

    in reply to: Two menus, focus on top disables the second. #3746
    admin
    Keymaster

    You could use something like this to hide/show your second menu when a sub menu of your first menu is activated:

    var $mainMenu2 = $('#main-menu2');
    $('#main-menu').on({
      'show.smapi': function(e, menu) {
        $mainMenu2.css('visibility', 'hidden');
      },
      'hideAll.smapi': function(e, menu) {
        $mainMenu2.css('visibility', '');
      }
    });

    But I’d suggest a more elegant solution – i.e. to just alter the first menu’s z-index so that its sub menus simply appear on top of the second menu:

    $('#main-menu').on({
      'show.smapi': function(e, menu) {
        $(this).css('z-index', 10000);
      },
      'hideAll.smapi': function(e, menu) {
        $(this).css('z-index', '');
      }
    });
    in reply to: Keyboard plugin fails when popper.js enabled #3743
    admin
    Keymaster

    Hi, it’s not because of “popper.js”, it’s because you are using an old version of the SmartMenus Bootstrap addon which is for Bootstrap 3 but at the same time you are using Bootstrap 4. So you would need to do a few things to cope properly with the issue:

    1) Download the latest SmartMenus release and upgrade all your files:

    /typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.js
    /typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.bootstrap.js
    /typo3conf/ext/demotemplate/Resources/Public/JavaScript/smartmenus/jquery.smartmenus.keyboard.js
    
    /typo3conf/ext/demotemplate/Resources/Public/CSS/smartmenus/jquery.smartmenus.bootstrap.css

    with the latest versions (and make sure you are using “jquery.smartmenus.bootstrap-4.js” and “jquery.smartmenus.bootstrap-4.css” instead of “jquery.smartmenus.bootstrap.js” and “jquery.smartmenus.bootstrap.css”).

    2) You are also using some custom classes in your HTML menu structure so you would need to change them to avoid some issues (like the menu not being initialized at all, duplicate sub menu indicator arrows, etc.)

    a) Add the “navbar-nav” class to your root UL element:

    <ul class="nav flex-row navbar-nav smartmenus d-print-none" ...

    b) I saw you have modified the Bootstrap addon to add a few custom options. Now you don't need to do that, instead just set the "data-sm-options" attribute on the root UL element like this:

    <ul class="nav flex-row navbar-nav smartmenus d-print-none" data-sm-options="{ subMenusSubOffsetX: 0, subMenusSubOffsetY: -7, mainMenuSubOffsetX: -8, showTimeout: 100, subMenusMinWidth: '15em', subMenusMaxWidth: '', keepInViewport: false, keepHighlighted: false }"> ...

    c) Replace all instances of "dropdown-submenu" with "dropdown" - e.g.:

    <li class="dropdown-submenu">

    should become:

    <li class="dropdown">

    d) Replace all instances of "dropdown-toggle-submenu" with "dropdown-toggle" - e.g.:

    <a href="http://p192195.typo3server.info/de/aktuelles/neuigkeiten/" class="dropdown-item dropdown-toggle-submenu">Neuigkeiten</a>

    should become:

    <a href="http://p192195.typo3server.info/de/aktuelles/neuigkeiten/" class="dropdown-item dropdown-toggle">Neuigkeiten</a>

    The above should fix all major issues. From what I can see, you may just need additionally to tweak your main menu items' padding since adding the "navbar-nav" class seems to affect it.

    in reply to: Smartmenus with "Navbar fixed top" #3741
    admin
    Keymaster

    You mean this?

    http://vadikom.github.io/smartmenus/src/demo/bootstrap-4-navbar-fixed-top.html

    The sample code is displayed on the demo page, you could also look in its source..

    in reply to: Lost mobile animation effect #3740
    admin
    Keymaster

    Sorry for the delay! I’ve been overwhelmed with tasks these days.. 🙁

    I got a chance to test it – the fixed height declaration in the following rule causes the issue:

    .main-navwrapper {
    	height:50px;
    }

    I’d just remove it.

    in reply to: Lost mobile animation effect #3726
    admin
    Keymaster

    Sorry, I cannot test your page – I get this:

    This site has been blocked by the network administrator.
    Block reason: Gateway GEO-IP Filter Alert
    
    IP address: 91.139.x.x
    
    Connection initiated from country: Bulgaria
    admin
    Keymaster

    Hi, could be achieved in different ways but here’s what I came up with at the moment:

    1) First use collapsibleBehavior: 'accordion-link' instead.

    2) Then use the following additional JS:

    // SmartMenus jQuery - for href="#" items, expand sub menu (if available) on first tap
    $('#main-menu').on('select.smapi', function(e, item) {
      var obj = $(this).data('smartmenus'),
          $item = $(item);
      if (obj.isCollapsible() && $item.is('[href="#"]')) {
        var $sub = $item.dataSM('sub');
        if ($sub && !$sub.is(':visible')) {
          obj.itemActivate($item, true);
        }
        return false;
      }
    });
    in reply to: Menu on the left side and an other on the right side #3718
    admin
    Keymaster

    Hi, not sure I get it. If you need two menu, then, yes, you could add unlimited number of menus.

    admin
    Keymaster

    A couple of issues. You are loading jQuery, Bootstrap’s JS and a few other scripts with an “async” attribute added:

    <script async type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    ...
    <script async src="stuff/bootstrap.min.js"></script>
    ...
    <script async src="stuff/swapimgrestore.js"></script>
    <script async src="stuff/smoothlinkscroll.js"></script>

    In short, this does not guarantee the other they are actually loaded/executed by the browser and they depend on proper load order (jQuery needs to be loaded first). You may need to learn a bit more how “async”/”defer” work if you would like to use any of them.

    Quick solution is to remove the “async” attribute or replace it with “defer” (which preserves the script orders as linked in the source) but you will also need to add it to all other scripts you use that rely on jQuery.

    Second issue – in “stuff/smoothlinkscroll.js” the following line produces a JS error:

    $('a[href*=#]:not([href=#])').click(function() {

    you need to change it like this:

    $('a[href*="#"]:not([href="#"])').click(function() {

    Cheers!

    admin
    Keymaster

    Ah, yes, there is also one more media query you need to update the same way in “/stuff/smartmenu/sm-mint-button.css”. That should fix it.

    in reply to: Sub Menu not working Jquery-3.X version #3692
    admin
    Keymaster

    Just get the new version 1.1.0. It is now compatible with jQuery “slim” releases.

    in reply to: Bootstrap 4 addon #3691
    admin
    Keymaster

    @gerdhuber and the addon is now released 🙂

    admin
    Keymaster

    Sorry, unfortunately, I’ve not been able to visit the forums lately due to lack of any free time whatsoever!

    You just need to edit the breakpoint at which the menu switches from collapsible to desktop mode. In “/stuff/smartmenu/sm-mint.css” find the following instances:

    @media (min-width: 768px) {

    and increase the value to something like “910px” for all of them.

    in reply to: how to make a zone scrolling for scrolling #3668
    admin
    Keymaster

    This is not possible since the menu tree is a truly hierarchical structure with nested elements and if we apply “overflow: hidden” to some parent menu (in order to clip it as you like), we won’t be able to display any sub menus it has. That’s why it’s only possible to use the browser viewport as a scrolling container.

    admin
    Keymaster

    I have no idea what might be causing it from this short code excerpt. If possible, please post some kind of demo URL or send me a one page ZIP-ed demo via email:

    https://www.smartmenus.org/contact/

    admin
    Keymaster

    Could you please post some kind of demo URL? Obviously something on your WordPress pages causes the issue.

    in reply to: Make submenu slide open/close #3443
    admin
    Keymaster

    Yep, as you’ve noticed, by default the addon mimics Bootstrap’s default behavior so the sub menus are not animated in collapsible mode. So, you would need the following options:

    collapsibleShowFunction: function($ul, complete) {
    	$ul.slideDown(200, complete);
    },
    collapsibleHideFunction: function($ul, complete) {
    	$ul.slideUp(200, function() {
    		$ul.parent().removeClass('open');
    		complete();
    	});
    }

    And also another small change in “jquery.smartmenus.bootstrap.js” – comment out/remove the following code:

    ,
    'hide.smapi': function(e, menu) {
    	$(menu).parent().removeClass('open');
    }

    Alternatively, if you would like to avoid editing “jquery.smartmenus.bootstrap.js”, you could add the options directly in the HTML source in a data-sm-options attribute:

    https://www.smartmenus.org/docs/#data-sm-options

    and add the following JS code on your page after the link to “jquery.smartmenus.bootstrap.js”:

    $(function() {
    	$('ul.navbar-nav:not([data-sm-skip])').unbind('hide.smapi');
    });

    Cheers!

    in reply to: jQueryUI Theme #3436
    admin
    Keymaster

    It would be possible to reuse some of the styles from a given jQuery UI theme by applying some the defined classes in it to the menu tree elements but there is currently no simple way to just reuse a jQuery UI theme since it wouldn’t cover all the needed styles for the menus.

    in reply to: Bootstrap 4 addon #3428
    admin
    Keymaster

    Yes, there will surely be an addon at some point but since Bootstrap 4 is still in alpha I’d prefer to wait a bit more for it. So for now you would need to use a generic SmartMenus navbar with some theme like this one, for example:

    http://www.smartmenus.org/about/themes/#themes-5

    You could also customize it further if you like.

Viewing 25 posts - 26 through 50 (of 529 total)