[admin]

Make sure you are using code sample II) above and your main menu has relative position set (which is the case with the default demo):

#main-menu {
	position:relative;
	z-index:9999;
	width:auto;
}

[admin]

Hi, I just tested with v0.9.7 and it works. This restores the default behavior of the script – the first click/tap on the parent item shows its sub menu, the second activates the link.

[admin]

It’s not completely clear how exactly you would like it to function from your question so I’ve done what I suspect you need. The following mod will make sure your first level sub menus get the width of their respective parent menu item:

$('#main-menu').bind('beforeshow.smapi', function(e, menu) {
	var $menu = $(menu),
		obj = $(this).data('smartmenus');
	// save default subMenusMinWidth and subMenusMaxWidth options
	if (typeof obj.opts._subMenusMinWidth == 'undefined') {
		obj.opts._subMenusMinWidth = obj.opts.subMenusMinWidth;
		obj.opts._subMenusMaxWidth = obj.opts.subMenusMaxWidth;
	}
	// if this is a first level sub menu
	if ($menu.dataSM('level') == 2) {
		$menu.css('width', obj.getWidth($menu.dataSM('parent-a')));
		// unset subMenusMinWidth and subMenusMaxWidth options so that the script doesn't override our custom width for this sub
		obj.opts.subMenusMinWidth = '';
		obj.opts.subMenusMaxWidth = '';
	} else {
		// restore subMenusMinWidth and subMenusMaxWidth options for deeper sub menu levels
		obj.opts.subMenusMinWidth = obj.opts._subMenusMinWidth;
		obj.opts.subMenusMaxWidth = obj.opts._subMenusMaxWidth;
	}
});

For 2+ level sub menus, the subMenusMinWidth and subMenusMaxWidth options will be respected like normally.

[admin]

I saw you have added the fix inside a media query – that’s probably why it doesn’t work for you in Safari on Windows:

@media all and (max-width: 768px) {
	.teaser5c { width: 98%; min-height: 0 !important; }
	.teaser5c .teaserpicture {width: 50%;}
		
	#navibereich { position: relative !important; }
	
	#main-menu {
	border-radius:0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	}
	
	#main-menu ul,
	#main-menu li {
	-webkit-transform: translate3d(0px, 0px, 1px);
}

Move it out of the media query and it should work.

[admin]

OK, after some thorough testing I figured out it was something related to the CSS transforms and/or animations used on the page – when I disabled them all including setting useCSS: false for the bxSlider script, it all works fine. However, I couldn’t figure out a simple solution until I searched for similar issues and found the following:

https://www.drupal.org/node/1748514

In your case, adding the following on the page:

#main-menu ul,
#main-menu li {
	-webkit-transform: translate3d(0px, 0px, 1px);
}

solves the issue in Safari on Windows (and most probably old iPads though I can’t confirm right now).

Cheers!

[admin]

Hmm, yes, I noticed the issue on Windows. I need to go now but I will check it thoroughly tomorrow. Stay tuned..

[admin]

Hi,

I just checked on Mac and iPad and it seems to work fine. I can open the third level sub menu for “Tabelle” and click on the “test 3. Ebene A” and “test 3. Ebene B” links just fine.

Maybe you’ve fixed the issue already?

[admin]

Your menu structure is not valid. The sub UL elements should be enclosed in the parent LI’s (this isn’t the case for “item1” in your sample). It should look like this:

<ul id="main-menu" class="sm sm-vertical sm-clean sm-clean-vertical">
  <li><a href="#">item 1</a>
    <ul>
      <li><a href="#">sub item 1</a></li>
      <li><a href="#">sub item 2</a></li>    
    </ul>
  </li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
  <li><a href="#">item 4</a></li>
</ul>

Cheers!

[admin]

Np! 🙂

[admin]

OK, I noticed it – it happens just when the page is zoomed in/out (i.e. is not 100%) for me. I guess it’s some sort of rounding issue probably related to font rendering since it seems to be dependent on the line-height value for the links, probably font-size, too, etc.

Anyway, it seems to produce a fake 1px bottom margin for some of the LI’s so I would suggest to fix it by setting the same background used for the LI’s to the sub menu UL’s too – e.g. you could just modify the following rule in “bmd-2014-header.css”:

  .sm-simple ul li,
  .sm-simple-vertical li {
    border-left: 0;
    background: #edede7;
    color: #963547;
  }

like this:

  .sm-simple ul,
  .sm-simple ul li,
  .sm-simple-vertical li {
    border-left: 0;
    background: #edede7;
    color: #963547;
  }

Let me know if you still have any troubles.

[admin]

Hi,

Do you still get the issue because I just tested with IE 8/9/10/11 and didn’t notice any gap between the main menu or sub menu items? Maybe you’ve already fixed the issue?

Thanks!

[admin]

Hi,

Please take a look at the following discussion to learn why it works like that by default and how you could modify this behavior:

http://www.smartmenus.org/forums/topic/submenu-is-open-indicator

Please let me know if you still have any questions after that.

[admin]

Hi,

That’s weird but, unfortunately, I can’t test with the same device. 😕 Does this happen on the default demo too:

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

Or is it just on your pages? If so, please post an URL that I could test (though with a different Android device).

Thanks!

[admin]

Hi,

Check out the mainMenuSubOffsetX, mainMenuSubOffsetY, subMenusSubOffsetX and subMenusSubOffsetY options. You can try to tweak them to your liking.

Cheers!

[admin]

OK, there is no available method for this, but you could achieve it, for example, with some custom functions like these:

function disableItem($parentLI) {
	$parentLI.on('mouseenter.smartmenus mouseleave.smartmenus mousedown.smartmenus focus.smartmenus blur.smartmenus click.smartmenus touchend.smartmenus', 'a', function(e) {
		e.stopPropagation();
		e.preventDefault();
	});
}

function enableItem($parentLI) {
	$parentLI.off('mouseenter.smartmenus mouseleave.smartmenus mousedown.smartmenus focus.smartmenus blur.smartmenus click.smartmenus touchend.smartmenus');
}

When calling any of these you will need to pass the item’s LI element as an argument. For example, if you have the following HTML:

...
<li id="myParentItem"><a>Menu 2 </a>
	<ul>...</ul>
</li>
...

you could use the following JS to disable/enable the item (and its sub menu):

disableItem($('#myParentItem'));
enableItem($('#myParentItem'));

[admin]

Hi,

Sorry but I don’t understand what exactly you mean. Please post some code sample if possible (a live demo would be best) and try to explain what exactly you would try to achieve and I will try to help you out.

Thanks!

[admin]

Hi, the problem is that you have added the menu button as part of your main menu (as the first item). Just move it out and add it, for example, right before the main menu – e.g.:

<a id="menu-button"></a>
<ul id="main-menu" class="sm collapsed sm-blue">
...

and it should work.

Cheers!

[admin]

Hi, you’ve added some custom rules and declarations that break it. In order to fix it, open the following file:

http://www.cafepreview.com/Simpson/css/sm-simple.css

and do the following tweaks:

1) After the following line:

@media screen and (max-width: 1060px) {

add the following rule:

@media screen and (max-width: 1060px) {

	#main-menu > li {
		float:none;
		display:inline-block;
		margin-right:-4px;
		z-index:4500;
		font-size: 16px;
	}

	...

2) Modify the following rule:

	#main-menu ul:hover, 
	#main-menu li:hover  {
		color: white; 
		background: #327c84;
		height:50px;
		line-height:60px; 
	}

like this:

	#main-menu ul:hover, 
	#main-menu li:hover  {
		color: white; 
		background: #327c84;
	}

3) Modify the following rule:

	/* add some text indentation for the 2+ level sub menu items */
	.sm-simple ul a {
		border-left:8px solid transparent;
		display:none;
	}

like this:

	/* add some text indentation for the 2+ level sub menu items */
	.sm-simple ul a {
		border-left:8px solid transparent;
	}

This will restore the collapsible function. You can then do any further tweaks if you like.

Cheers!

[admin]

Not sure what exactly might be causing this. One possible reason for it might be if you have added the “collapsed” class to your menu button link too – e.g.:

<a id="menu-button" class="collapsed"></a>

That link should look like this in your source:

<a id="menu-button"></a>

If this is not it, then I will need to look at some sort of live demo in order to investigate it so please provide such if possible.

[admin]

There is probably some other reason for this – simply adding that class shouldn’t cause the sub menus to stop working. If possible, please post some kind of live demo and I will try to investigate it.

[admin]

You don’t have to link the script and CSS files directly from GitHub since it’s not a CDN. Additionally “jquery-loader.js” is used just on the demo pages to allow easy testing with different jQuery versions, so instead of it, you should just use whatever jQuery version you like.

So to fix the issue you will need to replace the following:

<!-- jQuery -->


<!-- SmartMenus jQuery plugin -->


...

<!-- SmartMenus core CSS (required) -->


<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->

with something like this:

<!-- jQuery -->


<!-- SmartMenus jQuery plugin -->


...

<!-- SmartMenus core CSS (required) -->


<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->

Cheers!

[admin]

Hi,

The width constrain is coming from the following default options:

subMenusMinWidth: '10em',
subMenusMaxWidth: '20em',

So what you can do is:

a) Either override these options for all sub menus when you init your menu:

$('#main-menu').smartmenus({
	subMenusSubOffsetX: 1,
	subMenusSubOffsetY: -8,
	subMenusMinWidth: '',
	subMenusMaxWidth: ''
});

b) or you could do it just for mega sub menus (if you have regular sub menus too), for example, by using some additional CSS like this:

ul.mega-menu {
	width:auto !important;
	max-width:none !important;
	min-width:0 !important;
}

Cheers!

[admin]

I also added ‘collapsed’ on the css class for the ul element with id of main-menu, to prevent the blink effect of the menu showing on next page, and then being collapsed (in other words, when a new page is being loaded, the menu is displayed, and then undisplayed. Adding the ‘collapsed’ class makes the menu undisplayed by default).

Yes, that is indeed a slight issue with the default code sample. I will update the docs now with a fix.

Thanks very much!

[admin]

Hi,

You will need to tweak a bit your CSS code in “/wp-content/themes/blankslate/style.css” to consider the toggling of the “open” class when sub menus are shown/hidden.

1) Replace the following rules:

/* Colour the menu items */
li.company-nav a:hover, li.company-nav:hover a, li.company-nav a:focus, li.company-nav a:active a { background-color:#555 !important; color:#FFF !important; }
li.restoration-nav a:hover, li.restoration-nav:hover a, li.restoration-nav a:focus { background-color:#165E72 !important; color:#FFF !important; }
li.new-build-nav a:hover, li.new-build-nav:hover a, li.new-build-nav a:focus { background-color:#808040 !important; color:#FFF !important; }
li.singlelink.blog-nav a:hover, li.blog-nav a:focus { background-color:#555 !important; color:#FFF !important; }

with these:

/* Colour the menu items */
li.company-nav.open a, li.company-nav a:hover, li.company-nav:hover a, li.company-nav a:focus, li.company-nav a:active a { background-color:#555 !important; color:#FFF !important; }
li.restoration-nav.open a, li.restoration-nav a:hover, li.restoration-nav:hover a, li.restoration-nav a:focus { background-color:#165E72 !important; color:#FFF !important; }
li.new-build-nav.open a, li.new-build-nav a:hover, li.new-build-nav:hover a, li.new-build-nav a:focus { background-color:#808040 !important; color:#FFF !important; }
li.singlelink.blog-nav.open a, li.singlelink.blog-nav a:hover, li.blog-nav a:focus { background-color:#555 !important; color:#FFF !important; }

2) Replace the following:

.navbar-default .navbar-nav .open .company-subs li a { background-color: #555; color: #FFF;}
.navbar-default .navbar-nav .open .company-subs li a:hover { background-color: #777; color: #FFF;}
.navbar-default .navbar-nav .open .restoration-subs li a { background-color: #165E72; color: #FFF;}
.navbar-default .navbar-nav .open .restoration-subs li a:hover { background-color: #5C8F9D; color: #FFF; }
.navbar-default .navbar-nav .open .newbuild-subs li a { background-color: #808040; color: #FFF;}
.navbar-default .navbar-nav .open .newbuild-subs li a:hover { background-color: #A6A67A; color: #FFF; }

with the following:

.navbar-default .navbar-nav .company-subs li a { background-color: #555; color: #FFF;}
.navbar-default .navbar-nav .company-subs li a:hover { background-color: #777; color: #FFF;}
.navbar-default .navbar-nav .restoration-subs li a { background-color: #165E72; color: #FFF;}
.navbar-default .navbar-nav .restoration-subs li a:hover { background-color: #5C8F9D; color: #FFF; }
.navbar-default .navbar-nav .newbuild-subs li a { background-color: #808040; color: #FFF;}
.navbar-default .navbar-nav .newbuild-subs li a:hover { background-color: #A6A67A; color: #FFF; }

That’s all.

Cheers!

[admin]

Hi kizony,

Ah, yes, when including lists in a mega drop-down, you would need to also set the “mega-menu” class to the sub menu’s root UL element. E.g. like this for the Yamm classic list sample:

            <!-- Classic list -->
            <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">List</a>
              <ul class="dropdown-menu mega-menu">
                ...

The SmartMenus script needs this class in general for mega drop-down menus since it tells the script to neglect any unordered lists inside the mega sub menu. Without this class the script treats such lists like regular sub menus and that’s why it tries to position and show/hide them.

Let me know if you still have any troubles.

Cheers!

[Author]

Posts