[admin]

Hi again and sorry for the delay!

Thanks, I noticed the issue with this demo! It was in the custom JS added to the demo that enables the native scrollbar for the sub menus. Please just use the updated custom JS code (i.e. the 2 handlers for the beforeshow.smapi/show.smapi events) from the updated demo:

https://jsfiddle.net/vadikom/3vwhq4pb/

and it should work fine with jQuery 3.x.

Please let me know if you still have any troubles.

Cheers!

[admin]

Hi, could you please share an URL to the demo that is not working? I just tested the default demo with jQuery v3.6.0 and it’s working just fine.

[admin]

Hi, you need both jquery and smartmenus added to your dependencies in “package.json” – e.g.:

"jquery": "^3.3.1",
"smartmenus": "^1.1.1"

and then in your app’s JS the following should work:

import $ from 'jquery';
require('smartmenus');

...

$('#main-menu').smartmenus();

The smartmenus module exports jQuery itself so you could even do something like this (without importing jquery separately):

import $ from 'smartmenus';

...

$('#main-menu').smartmenus();

[admin]

The SmartMenus script requires any sub <ul> elements to be direct children of their parent <li> elements so, unfortunately, that extra <div> will break the script although it’s not invalid HTML. That’s just the way it was designed to support the HTML structure and this cannot be changed easily. The next major release of the script will allow much more flexible structure (relying on classes instead) but that is still quite far from being ready for public testing.

Having said that, I don’t think there is any official Bootstrap document stating what a valid/supported HTML structure is for their navbars apart from the code samples they provide in their docs. In general the SmartMenus script should work fine with a very minimal change to the code samples they provide (which is required at least in order to allow unlimited sub menus levels support). For example, if we take this official code sample from Bootstrap:

https://getbootstrap.com/docs/4.5/components/navbar/

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Only the following snippet:

        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>

would need to changed like this:

        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <div class="dropdown-divider"></div>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>

and the script should work fine.

But, as you can see, they don’t have an additional <div> wrapping their div.dropdown-menu in their code samples so I guess this is some custom code coming from the Zen Cart template developer.

[admin]

Sorry for the late reply! Unfortunately, it’s getting harder and harder for me to find any time for the forums. 🙁

You will need to tweak your nav HTML structure (it currently has some missing required classes, etc.). The following should work fine:

<ul class="navbar-nav">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link</a></li>
    </ul>
  </li>
</ul>

[admin]

Hi, not sure why you consider this a hack. It’s actually the proper way to center a block element – i.e. constraining its (max-)width and setting the left/right margin to auto.

If you are too worried about some of your items wrapping at lower viewport widths, you could consider the following solution:

https://www.smartmenus.org/about/themes/#demos-7

but I personally don’t think that is a critical issue since all items remain usable even if some of them are wrapped.

[admin]

Hi, you could use any of the following which have slightly varying behavior:

1) the hideOnClick: false option – this will prevent any sub menus from being hidden when an item (or link inside a mega menu) is clicked and will also prevent hiding the menus when you tap elsewhere on the page on iPad.

2) the following code ondomready (e.g. put it right after your SmartMenus init code):

$('#main-menu').on('click', function(e) {
  if ($(e.target).closest('.mega-menu').length) {
    e.stopPropagation();
  }
});

This will only prevent hiding any mega menu when any element inside it is clicked.

[admin]

Hi, please check the following and let me know if you still have any troubles:

https://stackoverflow.com/questions/24739126/scroll-to-a-specific-element-using-html

Thanks!

[admin]

Hi, you will most probably need to change the default line-height if the vertical padding is not enough for you. For example, for the “sm-blue” theme you can test it from the following URL:

https://codepen.io/vadikom/pen/rVMmMm?editors=0100

Find and change the following SASS variable and note how it looks on the preview below:

// ----------------------------------------------------------
// :: 1.3. Typography
// ----------------------------------------------------------

...
$sm-blue__line-height:			23px !default;

[admin]

Hi, you are most probably missing a viewport meta tag if you see the desktop menu on mobile devices. Just make sure this tag is added inside the <head> section on your pages:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

If you are still having any issues after that, please post some kind of demo URL and I will check it.

Cheers!

[admin]

Hi,

To be honest, I am not familiar with Elementor and the way they’ve implemented the script in their builder but in older SmartMenus versions the different behaviors that can now be controlled with the collapsibleBehavior option could be generally achieved with a few lines of additional code. There are a few examples posted around in the forums but I haven’t compiled a complete list out of them.

If you like, please post an URL to a live page that I could test and explain what exact behavior you would like in collapsible mode and I will find/post a code sample for you.

Thanks!

[admin]

Yep, just open the CSS file of the theme you currently use and delete the desktop styles.

For example, if you use the “sm-blue” theme, open “sm-blue.css”, find and delete the following media query (including all the rules inside it):

@media (min-width: 768px) {

 ...

}

[admin]

Well, I suppose you understand that adding a single parameter changes the page URL (Google considers these completely different pages too) so unless you are able to change the “href” attribute of the menu item (that you would like to be highlighted) to correspond to the new page URL too, the script will not highlight it.

So you would need to use some other “manual” solution – e.g. output the “current” class to the proper <a> element when needed via PHP.

[admin]

Please post some kind of demo URL. Something else is probably causing this, I suspect multiple jQuery versions included on the page.

[admin]

Sorry to hear that the docs were not clear enough! You don’t really need to edit the source code in “jquery.smartmenus.bootstrap.js” for this. You could use the data-sm-options attribute:

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

instead:

<ul class="nav navbar-nav" data-sm-options="{ noMouseOver: true }">...

[admin]

Have you included a viewport meta tag in the <head> section of your pages? Something like this:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

If yes and it’s still not working, then please post some kind of demo URL since it’s not easy to guess what might be wrong without checking your exact code.

[admin]

Hi, actually you are not missing anything. It’s currently really working like that by default. I will most probably change this in the next release. In the meantime, you could use the following tweak via the API to achieve what you need:

// SmartMenus jQuery - a second click on a main menu item when "showOnClick: true" should hide the sub menu
$('#main-menu').on('click.smapi', function(e, item) {
	if (e.namespace == 'smapi') {
		var obj = $(this).data('smartmenus');
		if (!obj.isCollapsible() && obj.opts.showOnClick) {
			var $sub = $(item).dataSM('sub'),
				firstLevelSub = $sub ? $sub.dataSM('level') == 2 : false;
			if (firstLevelSub && $sub.is(':visible')) {
				obj.menuHide($sub);
				obj.clickActivated = false;
				return false;
			}
		}
	}
});

Cheers!

Edit: Just add this code after your SmartMenus init code.

[admin]

Just change your no link items’ HTML from this:

<span class="btn link">testseite</span>

to this:

<a href="#">testseite</a>

Or if you like, you could also add a class to the link – e.g.:

<a href="#" class="no-link">testseite</a>

and some CSS to use the default cursor (or even disable the hover, etc.):

.no-link {
	cursor: default;
	background-color: white !important;
}

In general, it’s not recommended having no-link items that have sub menus for various reasons. For a bit more insights as to why, you can take a look at the following topic:

https://www.smartmenus.org/forums/topic/how-to-make-this-work-with-no-links-at-the-top-level/

[admin]

Hi, honestly it’s a bit difficult for me to understand what exactly you need to achieve. I guess you could output a special class to the parent <li> element of the item (e.g. <li class="notlinked">...) and then use some CSS to hide/disable the sub menu or something like that.

But to be able to help you, please at least share some kind of demo URL and try to explain a bit better what exactly you’d like to achieve.

[admin]

Hi,

You would need to edit the following file:

https://www.easydigging.com/kern/jquery.smartmenus.bootstrap.css

1) Remove your spacer <li>‘s from your navbar HTML source and in the CSS file above find and replace the following:

@media (min-width: 768px) {
  #main-menu {
    float: right;
    clear: none;
  }
}

with the following:

@media (min-width: 768px) {
  .navbar-collapse {
    text-align: center;
    font-size: 1px;
  }
  #main-menu {
    display: inline-block;
    float: none;
    clear: none;
  }
}

2) The issue is caused by your custom .nav-tweak DIV’s that are inside your main menu links. To avoid it, in the same CSS file, replace the following:

.navbar-nav.sm-collapsible .open > a > .caret:before {
  content: '-';
}

with the following:

.navbar-nav.sm-collapsible .open > a .caret:before {
  content: '-';
}

Cheers!

[admin]

Hi, you could use something like this:

$(function() {
  // SmartMenus jQuery - collapse mobile navbar on menu item select
  $('.navbar-nav').on('select.smapi', function(e) {
  	if ($(this).hasClass('sm-collapsible')) {
  		$('.navbar-toggler')[0].click();
  	}
  });
});

Just include it on your page after jQuery.

If you have multiple navbars on your pages (not very likely), set them specific ids and replace the classes .navbar-nav and .navbar-toggler in the code above with the proper ids.

[admin]

Hi,

You seem to be using some custom Bootstrap package (I guess part of the Typo 3 theme you use) which has a feature that conflicts with the SmartMenus script. The parent <li>‘s in your menu structure have an additional custom class “dropdown-hover” – e.g.:

<li class="dropdown dropdown-hover"><a href="/dev-informatique/" title="Dév. informatique"...

and the following script uses it to toggle the sub menus on hover:
https://www.emmguyot.com/typo3conf/ext/bootstrap_package/Resources/Public/JavaScript/Dist/bootstrap.navbar.min.js?1518304141
But since you are using the SmartMenus script, you don't need this. So to fix the issue, you would need to remove those classes from your menu structure. If it's hard for you to do it server-side, you could also use a JS solution like this (just make sure this is included after jQuery on your pages):

$(function() {
	$('.dropdown-hover').removeClass('dropdown-hover');
});

[admin]

Hi again, you have a good point about stopping the event propagation. Here is a different approach (that shouldn’t have any issues too):

https://jsfiddle.net/vadikom/zLnqcb6y/42/

Your solution works for ui-autocomplete, and it is easy to extend to other elements/widgets if they are known in advance. But what if I want to create a SM-based component that can be used with any widget in it?

The SmartMenus code that hides the menus on click is generic enough and should work with all types of elements/widgets that are rendered inside the mega menu. The problem with the autocomplete is caused by the fact that the autocomplete element is actually not appended inside the menu where the input is by the jQuery UI code but is a child of the BODY element.

But also in general no matter how well you try to design your “widgets” to avoid any possible conflicts with other scripts/CSS, it’s simply impossible to be sure this would never happen in certain scenarios. One could always write a JS/CSS snippet that could accidentally break/conflict with your widget.

[admin]

You will need to replace the Bootstrap button’s default HTML:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

with something like this:

<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" data-toggle="collapse" data-target=".navbar-collapse" />
<label class="main-menu-btn" for="main-menu-state">
  <span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>

And then use some additional CSS to style it:

.main-menu-btn {
  float: right;
  position: relative;
  display: inline-block;
  margin: 10px 15px;
  width: 28px;
  height: 28px;
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* hamburger icon */
.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}
.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}
@media (min-width: 768px) {
  /* hide the button in desktop view */
  .main-menu-btn {
    position: absolute;
    top: -99999px;
  }
}

[admin]

There you go:

http://www.smartmenus.org/files/misc/SmartMenus%20jQuery%20Bootstrap%203%20Mega%20Menus.zip

[Author]

Posts