Show current submenu in mobile view (itemActivate)

[bambi]

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

[admin]

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

[bambi]

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

[Author]

Posts