Show current submenu in mobile view (itemActivate)

Home Forums Latest release 1.1.x + Bootstrap 4 addon Show current submenu in mobile view (itemActivate)

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3754
    bambi
    Participant

    Hi there!

    I try to open the active submenu (only) in mobile view on load.

    I’ve tried it with data-sm-options and itemActivate, but with no success so far…

    <ul class="nav navbar-nav mr-auto" data-sm-options="{ itemActivate: $('a#nav-link2') }">
      <li class="nav-item"><a href="link1.php">Link 1</a></li>
      <li class="nav-item dropdown"><a href="link2.php">Link 2</a>
        <ul class="dropdown-menu">
          <li><a href="link2a.php">Link2a</a></li>
          <li><a href="link2b.php">Link2b</a></li>
          <li><a href="link2c.php">Link2c</a></li>
        </ul>
      </li>
      <li class="nav-item dropdown"><a href="link3.php">Link 3</a>
        <ul class="dropdown-menu">
          <li><a href="link3a.php">Link3a</a></li>
          <li><a href="link3b.php">Link3b</a></li>
        </ul>
      </li>
    </ul>

    In this example, the submenu of Link 2 should be visible on load, because Link2b is active.

    Many thanks in advance for any help!
    Michelle

    #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.)

    #3778
    bambi
    Participant

    Hi Vasil
    Thank you so much for your answer. It works perfectly!!! 😀
    Many thanks for your help!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?