[admin]

Just find and delete the following rules in the CSS you use for the menu button:

#menu-button:before {
  content: 'Menu -';
}
#menu-button.collapsed:before {
  content: 'Menu +';
}

[admin]

As far as I can see, you are creating a new UL element so you will need to call $.SmartMenus.Bootstrap.init(); after this line:

$(jqMenuId).empty().append('<ul id="bsMenu" class="nav navbar-nav">' + liHtml + '</ul>');

If you are getting the “$.SmartMenus.Bootstrap is undefined” error message, then you are either not using the latest dev versions of “jquery.smartmenus.js” and “jquery.smartmenus.bootstrap.js” from https://github.com/vadikom/smartmenus, or you have not linked properly the “jquery.smartmenus.bootstrap.js” file on your page, so you may want to check these.

If you are still having troubles, please post some kind live demo that I could test because it’s difficult to guess what exactly might be wrong without being able to look at your code.

[admin]

I already replied on Twitter but I guess you haven’t seen it:

First, grab the latest dev version from https://github.com/vadikom/smartmenus (since beta1 has some related bugs). Then:

a) if you create the whole ul.navbar-nav element dynamically, call $.SmartMenus.Bootstrap.init() to init it after it’s inserted in the DOM.

b) if your ul.navbar-nav is available in the DOM ondomready and you just update parts of it after that (e.g. add items, sub menus, etc.), call this method after it’s populated:

http://www.smartmenus.org/docs/#refreshInstance

You will need to set your ul.navbar-nav element some id (e.g. “main-menu”) so that you could refer it and use the above API method.

Please let me know if you still have any troubles.

[admin]

Please note that all CSS hacks and JS tweaks targeting IE6-8 were dropped from the codebase as of v0.9.7. So it’s possible that some layout issues might appear in these browsers (particularly in IE6/7). If you need to support these browsers, you may opt for v0.9.6 which was the last one to fully support them. As for rounded corners, border-radius is not supported in IE < 9 so there is no chance for it in older versions. But, in any case, if you like, please post some kind of demo that I could test since it's impossible to guess what exactly might be causing the issue without being able to test your code.

[admin]

OK, I took a look. The whole horizontal sub menu logic seems to be done with the following JS code:

        // secondary navbar
        if (window.innerWidth > 768) {
            var dropdown = navbar.find('.dropdown').not('.dont-expand');
            dropdown.removeAttr('data-toggle').addClass('active');
            var submenu = dropdown.find('.dropdown-menu');
            if (submenu.length > 0) {
                submenu.removeClass('dropdown-menu')
                    .addClass('menu nav navbar-nav')
                    .appendTo('#sub-menu');
            }
        }

in:
http://www.dungenesstesting.com/sites/default/files/js/js_N09faP46myD-UQKuPnAYFuVawecYv5r_1637im6dDBY.js

This is not done properly since it relies purely on JS for detecting the viewport width and also it’s not dynamic but instead the width is detected just on page load and the configuration is not updated if the width changes afterwards.

I can see what the idea of the coder was – in mobile view just the main multilevel menu should be displayed and the horizontal sub menu should be displayed just in desktop view. However, as I mentioned, it’s not done right so my suggestion is to use the following JS code instead:

        // secondary navbar
        var dropdown = navbar.find('.dropdown').not('.dont-expand');
        dropdown.addClass('active');
        var submenu = dropdown.find('.dropdown-menu');
        // create secondary horizontal navbar by cloning the primary's active sub menu
        if (submenu.length > 0) {
            submenu.clone().removeClass('dropdown-menu')
                .addClass('menu nav navbar-nav')
                .appendTo('#sub-menu');
        }
        // disable primary navbar's active sub menu in desktop view (since it's already available as the secondary navbar)
        navbar.find('.navbar-nav').eq(0).bind('activate.smapi', function(e, item) {
            var obj = $(this).data('smartmenus');
            if (!obj.isCollapsible()) {
                if ($(item).parent().hasClass('active')) {
                    return false;
                }
            }
        });

I’ve added some comments what the code does. In addition you will need to use the following CSS to show/hide the secondary horizontal navbar when appropriate:

#sub-menu-container {
    display: none;
}
@media (min-width:768px) {
    #sub-menu-container {
        display: block;
    }
}

Lastly, about the missing carets – you will need to add them in the source code like normally you would with Bootstrap:

...
<a href="/news" title="" data-target="#" class="dropdown-toggle">News <span class="caret"></span></a>
    <ul class="dropdown-menu">...

Let me know if you still have any troubles. I am not completely sure how your server-side logic works so, it’s possible that there still might be some issues..

[admin]

Hi, please post some sort of live demo that I could test and investigate the issue(s). It’s obviously a CSS “misconfiguration” but it’s, unfortunately, impossible to guess what exactly needs to be tweaked without being able to test your code (furthermore, as far as I understand, you are using an unusual setup with 2 horizontal levels so a live demo is really needed).

[admin]

Items should be stacked together with the separators with no space in-between if ItemsSeparatorSpacing is set to 0. So, as I mentioned, most probably some of your other page styles are conflicting with the SmartMenus styles and overriding them. However, unfortunately, it’s impossible for me to guess what exactly might be causing the issue without looking at and being able to test your code.

[admin]

Ah, yes, there seems to be an issue in “jquery.smartmenus.bootstrap.js” since Bootstrap doesn’t support RTL navbars natively so this has not been a tested case. Anyway, just find the following:

	// fix collapsible menu detection for Bootstrap 3
	$.SmartMenus.prototype.isCollapsible = function() {
		return this.$firstLink.parent().css('float') != 'left';
	};

and replace it with the following:

	// fix collapsible menu detection for Bootstrap 3
	$.SmartMenus.prototype.isCollapsible = function() {
		return !/^(left|right)$/.test(this.$firstLink.parent().css('float'));
	};

and it should work fine. This will be fixed in the next release.

Please let me know if you still have any troubles.

Cheers!

[admin]

In SmartMenus 6 there was the following property in “c_config.js”:

0,		// ItemsSeparatorSpacing

but I suppose tweaking this will not fix the issue and most probably some of your other page styles are conflicting with the SmartMenus styles and overriding them. So if possible, please post an URL to some kind of live demo where I could investigate the issue. Otherwise, it’s impossible to guess what exactly might be causing it.

[admin]

Np at all! It should work on all recent devices, nothing too funky is used. 🙂

Cheers!

[admin]

OK, here is the demo:

http://jsfiddle.net/9xtnk2zc/1/

You will need the jQuery scrollTo plugin for the scrolling and then just use a custom collapsibleShowFunction when you initialise the SmartMenus plugin:

	// custom function to auto scroll to activated parent item in collapsible mode
	collapsibleShowFunction: function($ul, complete) {
		$ul.slideDown(200, function() {
			complete();
			// auto scroll to parent item
			$(window).scrollTo($ul.dataSM('parent-a'), 500);
		});
	}

Cheers!

[admin]

Sorry, for this delay! It’s been a crazy week here.

Yep, I understood what you mean. Here is a quick demo of how it can be done (this is not using the SmartMenus plugin but it’s not a problem to achieve the same thing with it):

http://www.nygaardtoender.com/produkter/damer/

Check the “KATEGORIER” menu. I personally don’t find the auto-scrolling when a sub menu is expanded user friendly either – it can still cause confusion.

Let me know if you like this and I will create a demo for you.

[admin]

Yep, your code looks OK.

Is there a way to keep the accordion functionality, but also auto scroll to the main menu item that was clicked so that no part of the expanded sub menu section gets pushed off screen?

On theory auto scrolling is not a problem (in most cases), but it’s not producing a good user experience either and that’s why it’s not used in similar accordion scripts.

[admin]

Glad I was able to help and thanks for your feedback! I’ll consider your suggestions. 🙂

Cheers!

[admin]

There you go:

http://jsfiddle.net/bz7Lb5qo/4/

Nothing, too funky. You can nest the menu/menu button as you wish inside other containers.

From here, you may like to tweak the “sm-simple” theme – e.g. most possibly change the responsive breakpoint if needed, etc.

Cheers!

[admin]

Hi! Yes, it’s possible. Take a look at this post for details:

http://www.smartmenus.org/forums/topic/accordion-failed/#post-2660

and let me know if you have any questions.

[admin]

Hi and sorry for this delay! I had my summer vacation the past couple of weeks.

From from what I can understand from your explanation, I guess you are probably causing some JavaScript error (e.g. by not properly copying/pasting the demo JS code or something) which prevents the script from initializing your menu tree at all. Here is a basic demo I just setup:

http://jsfiddle.net/2fLggxLn/

Just make sure the demo frame is not wider than 768px so that you can see the menu toggle button.

Hope this helps.

Apart from that, I have planned to include many more demos in the download package in the future so, hopefully, this will happen soon.

Cheers!

[admin]

Sorry for this delay! Just got back from my summer vacation.

v0.9.7 isn’t mobile first and doesn’t need Respond.js to render the desktop styles in IE7/8. Not sure why it didn’t work when you accessed the demo via a web server. If you install the default demo on a web server and load it via http://&#8230;, it should work just fine – it’s practically the same as loading:

http://vadikom.github.io/smartmenus/src/demo/

in IE8.

[admin]

Hi and sorry for the delay! I was on my summer vacation during the past couple of weeks.

I am not able to reproduce this with IE10/Windows 7 (tested in IE7/8/9 in IETester too). As soon as the page loads, the menu work just fine – I don’t need to resize the window first.

What browser version/OS did you use for testing?

[admin]

The biggest issue on your page is that it’s really very heavy. I mean you’ve used so many scripts/features that even a simple CSS hover effect has a noticeable lag on my MacBook Pro (not one of the most recent models but still a very capable machine). So my first suggestion would be to try to reduce the number of client-side scripts you use or at least try to use them more responsibly by paying attention to the performance hit of every “feature” you add. Because it’s not really just the menu that feels slow on your page.

As for the SmartMenus plugin, one thing that I see is that you are using a modified version of the SmartMenus plugin (not the stock v0.9.7) where you have completely removed the showTimeout logic from the code. So I would suggest to replace it with the stock v0.9.7 and use the default showTimeout/hideTimeout options when initializing the script – i.e. replace this code:

jQuery('#main-menu').smartmenus({
	mainMenuSubOffsetX: 0,
	mainMenuSubOffsetY: 0,
	subMenusSubOffsetX: 1,
	subMenusSubOffsetY: -8,
	showTimeout: 0,
	hideTimeout: 0
});

with this:

jQuery('#main-menu').smartmenus({
	mainMenuSubOffsetX: 0,
	mainMenuSubOffsetY: 0,
	subMenusSubOffsetX: 1,
	subMenusSubOffsetY: -8
})

On theory this sounds as if you would add more lag before showing the sub menus but in reality it makes the script more responsive to cursor movement since the code that shows/hides the sub menus is not triggered immediately. Additionally, you may try setting the keepInViewport: false option which should reduce the calculations the script needs to do before displaying the sub menus but, of course, this is in case you can live without this feature.

[admin]

Hi and sorry for the delay! I was on a summer vacation and, unfortunately, I wasn’t able to reply earlier.

Not sure why this happens for you – normally on mobile the +/- button functions just as a toggle for the sub menu so clicking it, shouldn’t activate the link. You can check this on the default demo page:

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

So I guess there is something specific on your pages that breaks this behavior but it’s very difficult to guess what it might be without being able to test your code. So, if possible, please post some kind of the demo that I could test and investigate the issue.

[admin]

Hi and sorry for this delay! I had my summer vacation the past couple of weeks so, unfortunately, I wasn’t able to reply earlier.

All the styles (colors, etc.) when the SmartMenus script is used with the Bootstrap add-on depend entirely on Bootstrap. So I did a quick investigation and figured out you need to tweak the @nav-link-hover-bg variable to change this background color setting:

http://getbootstrap.com/customize/#navs

But note that this will also affect any regular Bootstrap navs that have dropdowns. The reason for this “issue” is mainly due to the fact that Bootstrap doesn’t support multilevel navbar dropdowns by default and they have just not tested/considered a case where they are actually used.

Cheers!

[admin]

Hi and sorry for this long delay! I was on a vacation the past couple of weeks and wasn’t able to reply earlier.

In general, the script should handle large lists just fine – it’s designed so that the performance depends as little as possible on the size of the unordered list. Here is a quick demo:

http://jsfiddle.net/4gscz846/1/

Here is another thread that covers performance with large lists:

http://www.smartmenus.org/forums/topic/very-large-menu/

That being said, I noticed you are now not using the SmartMenus plugin on the demo page you posted so, unfortunately, I can’t really check it and possibly suggest any optimizations in your specific case.

Please let me know if you still need any input.

[admin]

Hi,

Here is a basic example. Of course, you will need to add more styles for the headings, links, etc. but the layout part should be OK:

HTML:

...
<li><a href="#">Mega menu</a>
  <ul class="mega-menu">
    <li>
      <div class="row">
        <div class="col">
          <h2>Heading</h2>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div>
        <div class="col">
          <h2>Heading</h2>
          <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</li>
...

CSS:

.mega-menu .row {
	width: 500px;
	max-width: 100%;
}
.mega-menu .row:after {
	content: '';
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
}
.mega-menu .col {
	float: left;
	padding: 10px;
	width: 50%;
}
.mega-menu, .mega-menu ul {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
}
.mega-menu ul {
	position: static;
	display: block !important;
}
.mega-menu ul li {
	/* ... */
}
.mega-menu ul a {
	/* ... */
}

Cheers!

[admin]

Hi,

This happens because Respond.js does not work when a page is loaded directly from the hard drive and not from a web server. And without Respond.js IE8 can’t load the desktop styles and that’s why it displays the mobile-first collapsible version of the menu.

If you install the demo on a web server and load it via http/https it should work just fine in IE8.

Cheers!

[Author]

Posts