[admin]

The initialization code is basically the following:

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

So in your case you would need to call this as soon as the menu element is populated by the AngularJS code.

In case you need to call this before the HTML is inserted (for any reason), you can then call the refresh API method after it is populated to refresh your menu tree:

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

You can find a short code sample in the docs:

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

Cheers!

[admin]

Hi,

Thanks for your kind words, glad you like the script! 🙂

This looks like some weird Webkit redraw bug (I noticed it doesn’t happen in Firefox). I guess there is a simple way to workaround it via the API (e.g. forcing a redraw of the main menu or the body on menu hide, etc.) so I will do some tests a bit later.. I am still not sure if it would be a good idea to add a fix for this in the script core though, I will think about this too when I figure out a fix..

Cheers!

[admin]

I don’t think there is an existing “wp_nav_menu_menu-main-menu_items” filter and as far as I am aware, you wouldn’t be able to add the root Ul element’s class with the existing “wp_nav_menu_items” filter either. So you need to find the file in your theme (header.php?) where wp_nav_menu() is used to render your menu and pass the 'menu_class' => 'sm' option.

[admin]

Hi,

First a note since you mention Bootstrap – if you are using the Bootstrap add-on the menus will use the Bootstrap theme (whatever it is). The “sm-blue” theme (class) is not supposed to be used in combination with the Bootstrap add-on.

If you are not using the Bootrap add-on, you can center the items of a horizontal main menu with some additional CSS – a sample code is posted in the following discussion:

http://www.smartmenus.org/forums/topic/smartmenu-dropdown-doesnt-work-if-main-menu-is-display-inline

As for taking the full width – a horizontal main menu would take the full width of its container by default since we have the following styles by default on the demo page:

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

So it depends in what container you would put it and if it would have any margin/border/padding applied. Or you could also change its positioning to something like (which would work on the demo page with the “sm-blue” theme but might not work with some specific layout, of course):

#main-menu {
	position:absolute;
	top:0;
	left:0;
	z-index:9999;
	width:100%;
}

Cheers!

[admin]

Hi, could you please post some sample URL I can test because it’s a bit difficult to imagine what exactly you have done and are trying to achieve?

You would like to have a collapsible menu for all widths, correct?

I will take a look at your code.

Thanks!

[admin]

Thanks for the sample URL, it helped a lot!

The problem is that you don’t have the “sm” class set to your menu in the source but you add it dynamically on DOMContentLoaded via this line:

jQuery("#menu-main-menu").addClass('sm');

in the following file:

You will need to add the class in the source if you would like to avoid the flash. Since you are using WordPress, you could add the class like this in your theme:

<?php wp_nav_menu( array( 'menu' => '...', 'menu_id' => 'menu-main-menu', 'menu_class' => 'sm' ... ) ); ?>

Please let me know if you still have any issues.

[admin]

The simplest fix (that should hopefully work for you too) is to have at least one script linked after the menu CSS in the section of the page. So if you have your scripts linked before the CSS or at the end of the , you may want to move at least one of them after the CSS in the .

Please let me know if you still have any troubles.

[admin]

No problem at all, glad to hear that!

Cheers!

[admin]

Hi,

About the first issue – I guess you call this on window resize so you can avoid the JS error (which is harmless, btw) by using a short timeout for the destroy call – i.e. instead of:

$('#drop-menu').smartmenus('destroy');

use this:

setTimeout(function() { $('#drop-menu').smartmenus('destroy'); }, 1);

Because on destroy the script unbinds its own resize handler but still it gets called for the same resize event. It’s a bit tricky to explain but anyway, just use the timeout if the JS error bothers you.

About the second “bug” – it’s not a bug, this is how it works by default. You can read this thread for more info and ways to customize the behavior:

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

Cheers!

[admin]

Glad you like the script!

It’s not too difficult to achieve – e.g.:

var $mainMenu = $('#main-menu');
$mainMenu.bind('activate.smapi', function(e, item) {
		var obj = $mainMenu.data('smartmenus'),
			$item = $(item),
			$sub = $item.parent().dataSM('sub'),
			level = $sub ? $sub.dataSM('level') : -1;
		if (!obj.isTouchMode() && level > 2 && !$item.dataSM('arrow-activated')) {
			return false;
		}
		// unflag
		$item.removeDataSM('arrow-activated');
	})
	.delegate('span.sub-arrow', 'mouseenter', function(e) {
		var obj = $mainMenu.data('smartmenus'),
			$item = $(this).parent(),
			$sub = $item.parent().dataSM('sub'),
			level = $sub ? $sub.dataSM('level') : -1;
		if (!obj.isTouchMode() && level > 2) {
			// flag it so that we don't cancel the event on activate.smapi
			$item.dataSM('arrow-activated', true);
			$mainMenu.smartmenus('itemActivate', $item);
		}
	});

However, I am not sure it would be intuitive to use. I guess most users will simply click on the items if the sub menu doesn’t appear immediately on hover and will not think about hovering the sub indicator arrow instead.

[admin]

Hi,

Actually, you don’t need to edit jquery.smartmenus.min.js at all, you can use the stock version. It doesn’t use $ but jQuery and when you add this:

var $j = jQuery.noConflict();

jQuery will free the $ variable but will keep jQuery so you could still use any plugins (that are properly coded to not rely on $) without any modifications. But yes, for the initialization lines, you would need to replace $ with $j or jQuery like you’ve done.

Cheers!

[admin]

Hi,

It’s caused by the background:#fff; declaration you’ve added to the following generic rule in Eric Meyer’s reset CSS:

html,
body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
	background:#fff;
}

I would recommend removing this declaration as it’s in a too generic rule and will be applied to all matched elements on the page by default.

Cheers!

[admin]

It’s not a problem to set something like:

position:relative;
z-index:20000;
background:red; /* just for the test, of course */

for your main menu items’ links but, as I mentioned, the scrolling feature for the sub menus only works against the viewport so you will have troubles accessing the top items once a sub menu is scrolled up since they would appear beneath your main menu items.

So, unfortunately, this cannot be achieved with the current code. But I’ve now thought about the scrolling feature a bit more and it might actually be possible to achieve what you would like for horizontal main menus – i.e. we could use an additional clipping container (appended in the main menu items’ LI and wrapping its child UL) displayed right below the main menu, taking the full width of the viewport and the remaining height below the main menu and then we could display and scroll if needed all the sub menus inside it. On theory this should work as I am thinking although it will probably be a bit tricky to implement and might break some user CSS since we would dynamically add another wrapper DIV that users wouldn’t be aware of. But anyway, this is something I could try to implement in a future release.

[admin]

OK, this seems to happen because you use some funky styling for the main menu items (e.g. the item links are absolute positioned inside the LI’s, etc. which breaks the positioning calculations). So to fix the issue, you could do the following:

1) In the following file:

a) instead of this option:

mainMenuSubOffsetY: $('header').height() - parseFloat($('#main-menu > li').css('padding-top')),

pass this:

mainMenuSubOffsetY: 1,

b) remove the following (you won’t need it any more):

    $(window).resize(function () {
        console.log("START window resize for main menu");
        var sm = $('#main-menu').data('smartmenus');

        sm.opts.mainMenuSubOffsetY = $('header').height() - parseFloat($('#main-menu > li').css('padding-top'));
        //sm.opts.subMenusSubOffsetY = $('header').height() - parseFloat($('#main-menu > li').css('padding-top'));

        $('#main-menu').data('smartmenus', sm).smartmenus('refresh');
        console.log("END-- window resize for main menu");
    });

2) In the following file:

a) remove the padding-top declarations in these rules:

			header nav ul.menu > li {
				width: 16.5%;
				height: 100%;
				padding-top: 4%;
				position: relative;
				float: left;
				line-height: 1.3;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}	
			@media (min-width: 1550px) {
			header nav ul.menu > li {
				padding-top: 47.265625px;
				width: 195.015625px;
			}
			}

b) replace the following rule:

				header nav ul.menu > li > a{
					z-index: 10;
					position: absolute;
					top: 0px;
					bottom: 0px;
					right: 0px;
					left: 0px;
				}

with the following:

				header nav ul.menu > li > a{
					height:100%;
				}

c) replace the margin-top declaration in the following rule:

					header nav ul.menu > li > a > div{
						...
						margin-top: 23.265625%;
					}

with a top declaration like this:

					header nav ul.menu > li > a > div{
						...
						top: 30%;
					}

These should fix the issue and will also simplify a bit your JS code. Let me know if you have any questions.

Cheers!

[admin]

Unfortunately, it’s really difficult to guess what exactly might be causing the issue without being able to test your exact code so, if possible, please post an URL to a live demo that I could test (you can post it as Protected data if you would like to keep it private between us.)

I will take a look and try to figure out what’s causing the problem.

[admin]

… or complain to the W3C for more overflow options in CSS.

LOL, right!

[admin]

On this page:

http://www.britishsteam.com/php_gwr/usr_gwr.php

if you remove the above code, the links in the sub menus start loading.

I thought this was the problem, isn’t it? Please try to explain in simple way what is the exact problem you are having on this page.

Thanks!

[admin]

There is really no very simple way to fulfill such specific positioning requirements for the sub menus. Basically, you would need to use the API and test the current sub menu’s position and dimensions against the page elements you like and re-position it if needed. You can find a code sample for a similar request from another user here:

http://www.smartmenus.org/forums/topic/2nd-level-within-parent-container-borders

Also note that the vertical scrolling for long sub menus can only work within the browser viewport (since the UL elements are truly nested in the parent LI’s and we cannot use CSS clipping because we would cut further sub levels.) So you cannot make that feature work for a specific container on the page instead of the whole viewport.

Hopefully, that helps.

[admin]

You need to remove the following code from the pages now that you don’t use iframes:

$(function() {
	$('#main-menu').bind('select.smapi', function(e, item) {
		var iframe2 = parent.document.getElementById('iframe2');
		if (iframe2) {
			iframe2.src = item.href;
		}
		return false;
	});
});

Cheers!

[admin]

You just need to call the SmartMenus initialization code after you have inserted the menu structure in the DOM. Here is a very basic example that gets the menu structure from an external file, prepends it in the body and then the menu is initialized:

$.get('URL_to_menu_structure_file', function(htmlStr) {

	// insert menu structure
	$('body').prepend(htmlStr);

	// SmartMenus initialization code
	$('#main-menu').smartmenus({
		subMenusSubOffsetX: 1,
		subMenusSubOffsetY: -8
	});

});

[admin]

Np, cheers! 🙂

[admin]

Hi Robert,

For 1) you could make use of the show API event, for example, like this:

var $mainMenu = $('#main-menu').bind('show.smapi', function(e, menu) {
	var $menu = $(menu),
		$container = $('#containerID');
	// check just first-level subs
	if ($container.length && $menu.dataSM('level') == 2) {
		var obj = $mainMenu.data('smartmenus'),
			containerX = $container.offset().left,
			containerW = obj.getWidth($container),
			menuX = $menu.offset().left,
			menuW = obj.getWidth($menu),
			$item = $menu.dataSM('parent-a'),
			itemX = $item.offset().left;
		// right align menu box in container if it overflows
		if (menuX + menuW > containerX + containerW) {
			var newX = containerX + containerW - menuW - itemX;
			$menu.css('margin-left', newX);
			if ($menu.dataSM('ie-shim')) {
				$menu.dataSM('ie-shim').css('margin-left', newX);
			}
		}
	}
});

Just configure this line $container = $('#containerID') with your container.

As for 2), it should be possible (and then you probably wouldn’t need 1) at all) but I will need to look at your exact code to be able to tweak it properly since you are obviously using some additional CSS to make the first-level subs horizontal. So please post some live test case if possible.

Thanks!

[admin]

Hi, as far as I can see, you are using SmartMenus with Bootstrap. In this case, the menu relies on the responsive breakpoints defined in the Bootstrap CSS:

http://cdfps.com/Valara/css/bootstrap.css

and in your case the breakpoint at which the menu becomes collapsible is 768px (which is the default). In order to fix this, you could:

1) either try to edit your Bootstrap’s generated CSS file and find the rules that matter for the menu like the following (these are just some sample ones, you will need to find and tweak them all…):

@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

...

@media (max-width: 767px) {
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }

  ...

/* etc... */

2) or create and download a customized version of the Bootstrap CSS with the exact breakpoints you like:

http://getbootstrap.com/customize/

This is the breakpoints section you need to tweak:

http://getbootstrap.com/customize/#media-queries-breakpoints

Though if you do this, the new breakpoint width will also affect all other Bootstrap components.

BTW, I noticed you are linking both the normal and minified version of the Bootstrap CSS on your page:

<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />

which you don’t need and I guess you would like to fix.

Please let me know if I could be of any further help.

[admin]

Hi, the main issue that produces a JS error is that your menu structure is not valid – i.e. the following:

<li class="four columns alpha omega"><a href="#" class="categories-btn">Categories</a></li>
    <ul>
        <li><a href="#">Business</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Entertainment/arts/literature</a></li>
        <li><a href="#">Government</a></li>
        <li><a href="#">Journalism</a></li>
        <li><a href="#">Law/criminal justice</a></li>
        <li><a href="#">Religion</a></li>
        <li><a href="#">Sports/recreation/adventure</a></li>
    </ul>

should look like this (the closing LI tag should be after its sub UL element):

<li class="four columns alpha omega"><a href="#" class="categories-btn">Categories</a>
    <ul>
        <li><a href="#">Business</a></li>
        <li><a href="#">Education</a></li>
        <li><a href="#">Entertainment/arts/literature</a></li>
        <li><a href="#">Government</a></li>
        <li><a href="#">Journalism</a></li>
        <li><a href="#">Law/criminal justice</a></li>
        <li><a href="#">Religion</a></li>
        <li><a href="#">Sports/recreation/adventure</a></li>
    </ul>
</li>

The next thing is that you have this rule:

.navigation a {    
    text-indent:-300em;
    ...
}

in http://69.89.31.123/~whimsie6/50-wise-site/style.css which affects the sub menus’ text and it is currently invisible. You could fix this, for example, by using another rule like:

#main-menu ul a {
	text-indent:0;
}

Apart from fixing these, you just need to style your sub menus as you like.

Cheers!

[admin]

Unfortunately, I am not able to reproduce the issue by just applying those styles on a menu toggle button (added on the page as described in the docs). I guess this might trigger the issue if it’s combined with something else specific for your layout but, again, it’s very difficult to guess what it might be without testing a live demo.

Cheers!

[Author]

Posts