[admin]

Sorry, I am not very sure what exactly you mean. 😕 Are they too small to hit precisely or maybe you need to tap multiple times before an item is activated? What is the exact issue you are having? Also please mention the phone model and browser you are using.

Thanks!

[admin]

Hi, yes, you can see on the default example that the “sm-clean” class shows sub indicators:

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

Though the class that the script sets to the spans is “sub-arrow” which makes me think you might possibly also use some other script that adds those “more-indicator” spans you mention (or they are directly outputted in the source).

The sub indicators are generally controlled by the “subIndicators”, “subIndicatorsPos” and “subIndicatorsText” options. By default “subIndicatorsText” is set to “+” which means you would get the following:

<a href="#"><span class="sub-arrow">+</span>Item text</a>

And then in the theme we have the following CSS:

.sm-clean a span.sub-arrow {
	position:absolute;
	right:12px;
	top:50%;
	margin-top:-3px;
	/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
	width:0;
	height:0;
	overflow:hidden;
	border-width:4px; /* tweak size of the arrow */
	border-style:solid dashed dashed dashed;
	border-color:#555 transparent transparent transparent;
}
/* and few more rules for sub levels and mobile... */

The following declarations:

	width:0;
	height:0;
	overflow:hidden;
	border-width:4px; /* tweak size of the arrow */
	border-style:solid dashed dashed dashed;
	border-color:#555 transparent transparent transparent;

basically make sure the “+” is hidden and we then apply some border to create the triangle instead. If you would like to show the “+” or some other symbol instead of the default arrow, just remove the above declarations and it should appear.

I hope this helps, please let me know if you still have any troubles. In that case, it would help very much if you could post some live demo I could test.

Cheers!

[admin]

Hi, there is a quick tutorial in the docs how you can add menu toggle button on small screens:

http://www.smartmenus.org/docs/#menu-toggle-button

Please take a look and let me know if you have any questions.

Cheers!

[admin]

Np, cheers! 🙂

[admin]

Thanks, that helped a lot!

OK, in your case some of the declarations did not take effect so please just use this code instead in your “common_style.css”:

#Menu1 {
	display:table;
	border-spacing:0; /* removes completely the item spacing */
}
#Menu1 > li {
	display:table-cell;
	float:none !important;
	width:1% !important;
}
#Menu1 > li > a {
	padding-right:0 !important;
	text-align:center;
}

Additionally in “c_config.js” set these to 0 in your main menu style array to remove the item separators spacing:

0,		// ItemsSeparatorSize
...
0,		// ItemsSeparatorSpacing

Please let me know if you still have any troubles.

Cheers!

[admin]

Hm, are you sure you are using SmartMenus 6 (and not the new jQuery version)? Because these rules work just fine on the default v6.0.4 demo page. Or maybe, you are using a different id for your menu tree and not “Menu1”?

In any case, it’s very difficult to guess what exactly might be causing the issue without looking at your core. So if you like, please post some live URL and I will take a look (you can post it as “Protected data” if you’d like to keep it private between us.)

Thanks!

[admin]

Hi,

You can use the following – it will work in all browsers except IE7:

#Menu1 {
	display:table;
}
#Menu1 > li {
	display:table-cell;
	float:none;
	width:1%;
}
#Menu1 > li > a {
	padding-right:0 !important;
	text-align:center;
}

If you care about IE7, you can also add the following and it will fix the main menu for it so that it doesn’t look too bad:

/* IE7 main menu fix */
*:first-child+html #Menu1 > li {
	float:left;
	width:auto;
}
*:first-child+html #Menu1 > li > a {
	padding-right:15px !important;
}

Cheers!

[admin]

Np at all! 🙂

[admin]

Hi,

The problem seems to be that your page does not have any doctype set and IE renders it in quirks mode. And in order to work correctly the script requires a proper doctype that will force standards-compliant rendering mode. So to fix the issue just add the HTML5 doctype at the beginning of your pages – e.g.:

<!DOCTYPE html>
<html>
...

Cheers!

[admin]

Hi,

Yes, it is not a problem to add some CSS rules that will show the sub menus even if JS is disabled (i.e. make it a pure CSS menu). Here is a quick example:

1) You need to include the following rules on the page (these will work well with the default example with a horizontal main menu, otherwise you may need to tweak the sub menus’ width and offset):

/* sub menus defaults */
#main-menu ul {
	display:block;
	top:auto;
	left:-99999px;
	width:15em;
	height:auto;
	overflow:visible;
}

/* first level sub menus offset */
#main-menu li ul {
	margin:0;
}

/* second+ level sub menus offset */
#main-menu li ul ul {
	margin:-2.7em 0 0 15em;
}

/* show sub menus on hover */
#main-menu li:hover > ul {
	left:auto;
}

But make sure they are:
a) either included and linked in a separate CSS file:

</pre>
b) or included in a separate  tag:
<pre>
	/* the above rules... */

2) Make sure the above styles are removed when JS is supported by adding the following line right before SmartMenus jQuery is initialized for your menu:

// remove pure CSS menu styles
$('#sm-purecss').remove();

// init SmartMenus jQuery
$('#main-menu').smartmenus({ ... });

That’s all. You can try it on the default example in the download package. Please let me know if you have any questions.

Cheers!

[admin]

As far as I can see, you’ve included jQuery after the SmartMenus plugin in the source and it should be linked before it (or any other jQuery plugin).

I.e. in the head section of your page you have the following:

Just change it like this and it should work:

Let me know if you still have any troubles. Cheers!

[admin]

Hm, the script shouldn’t really do this. Are you sure you are not using some other script that does it?

I can take a look if you like, please just post some sample URL I can test.

Thanks!

[admin]

Np at all, cheers!

[admin]

Hi,

As far as I can see, the issue is in the following file:
http://www.multibrand.visionmix.us/sites/all/themes/multibrand2013/js/scripts.js

Just replace the following lines:

$('#mainnav ul.menu').smartmenus();
$('#main-menu').smartmenus('menuHideAll');

with this:

$('#mainnav ul.menu:first').smartmenus();

The problem is that $('#mainnav ul.menu') selects 3 UL elements (the root UL and 2 sub UL’s) and the script tries to initialize them all while normally we should initialize just the root UL.

Please let me know if you still have any troubles.

Cheers!

[admin]

Yep, the script has a pretty good API and it’s possible to modify the behavior in many ways quite easily. I have planned to add some samples in the docs soon too but anyway.

First let me explain why it works like that by default since I think this is quite important. When in collapsible mode, the first click/tap on a menu item that has a sub menu activates the sub menu and the second click loads the item link. This allows setting actual links that work even in collapsible mode to the parent menu items which many users prefer being able to do. That’s why by default we hide the sub menu indicators after the first click instead of, for example, showing a minus “-” since that would easily trick the end users into thinking that clicking again would collapse the sub menu instead of activating the item’s link.

Now here are some instructions how to modify this behavior if you like:

1) Comment out/delete the following rule in the theme CSS file (e.g. “sm-blue.css”) – it’s inside the last media query:

/* Sub menu indicators
===================*/
	...
	/* Hide sub indicator "+" when item is expanded - we enable the item link when it's expanded */
	.sm-blue a.highlighted span.sub-arrow {
		display:none !important;
	}

This will make sure the indicators are not hidden when the sub menu is expanded.

2) Choose one of these JS mods and add it on your page:

a) Variant 1 – Click/tap to toggle the sub menus in collapsible mode:

// click/tap to toggle the sub menus in collapsible mode
var lastClicked = null;
$('#main-menu').bind('click.smapi', function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
		lastClicked = item;
		var $sub = $(item).parent().dataSM('sub');
		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
			obj.menuHide($sub);
			return false;
		}
	}
});
$('#main-menu').bind('beforehide.smapi', function(e, menu) {
	if (lastClicked && lastClicked != $(menu).dataSM('parent-a')[0]) {
		lastClicked = null;
		return false;
	}
});
$('#main-menu').bind('show.smapi', function(e, menu) {
	$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
});
$('#main-menu').bind('hide.smapi', function(e, menu) {
	$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
});

b) Variant 2 – Click/tap to toggle the sub menus in collapsible mode and also reset deeper levels and other expanded branches:

// click/tap to toggle the sub menus in collapsible mode (reset deeper levels and other branches too)
$('#main-menu').bind('click.smapi', function(e, item) {
	var obj = $(this).data('smartmenus');
	if (obj.isCollapsible()) {
		var $item = $(item),
			$sub = $item.parent().dataSM('sub');
		if ($sub && $sub.dataSM('shown-before') && $sub.is(':visible')) {
			obj.itemActivate($item);
			obj.menuHide($sub);
			return false;
		}
	}
});
$('#main-menu').bind('show.smapi', function(e, menu) {
	$(menu).dataSM('parent-a').children('span.sub-arrow').text('-');
});
$('#main-menu').bind('hide.smapi', function(e, menu) {
	$(menu).dataSM('parent-a').children('span.sub-arrow').text('+');
});

Any of these mods will make sure parent menu items only toggle their sub menus on click/tap when in collapsible mode (also meaning it makes it impossible to activate their link). These also make sure the text in the sub indicators is toggled when a sub menu is shown/hidden – i.e. “+” or “-” is displayed.

Hope this helps. Please let me know if you have any questions.

[admin]

This was a known compatibility issue with Bootstrap 3 caused by their global usage of box-sizing: border-box. I say “was” because it is now fixed in SmartMenus v0.9.3 (released today) so please just grab it from the download page:

http://www.smartmenus.org/download/

and everything should be fine.

Important: The fix is actually in “sm-core-css.css” so make sure you update that file too.

[admin]

Hi,

If you already have an id on the parent LI:

<li id="menu-item-8"><a href="#">About</a>

you can use the following JS:

$('#main-menu').smartmenus('itemActivate', $('#menu-item-8 > a'));

Otherwise, you could also use the following (set an id to the A element instead of class):

<li><a href="#" id="myItem">About</a>

and the JS:

$('#main-menu').smartmenus('itemActivate', $('#myItem'));

Let me know if you still have any troubles.

Cheers!

PS: All methods are case sensitive, so be careful with that too.

[admin]

Yep, you could use some additional CSS to float the items and set them fixed width (the LIs) and also set a fixed width for the sub menu (the UL) – e.g. something like this:

	#main-menu ul.columns-2 {
		width:500px !important;
		max-width:none !important;
	}
	#main-menu ul.columns-2 > li {
		float:left;
		width:250px !important;
	}

and then you just need to set the class to the sub menu you like:

<ul class="columns-2"> ...

By tweaking the widths, you can get as many columns as you like.

[admin]

It’s actually very easy to achieve this. You will just need to activate the styles that make the sub menus collapsible on small screens for all screen widths – i.e. you will need to remove the media query part (but keep the inner rules) in the theme “.css” file.

For example, for the default theme “sm-blue.css” look at the end at the “Responsiveness” section at the end of the file – you have the following media queries:

/* decrease horizontal main menu items left/right padding to avoid wrapping */
@media screen and (max-width: 850px) {
	.sm-blue:not(.sm-blue-vertical) > li > a {
		padding-left:18px;
		padding-right:18px;
	}
}
@media screen and (max-width: 750px) {
	.sm-blue:not(.sm-blue-vertical) > li > a {
		padding-left:10px;
		padding-right:10px;
	}
}

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

	[ KEEP JUST THESE RULES ]

}

You basically need to delete all these and just leave the rules inside the last media query and this will make your sub menus collapsible for all users (desktop and mobile).

Now the only remaining thing is that the sub menus will expand onclick even on desktop since the script has some code which enables onclick activation when collapsible sub menus are detected. You can fix this by using the following additional JS code:

$('#main-menu').bind('mouseenter.smapi', function(e, item) {
	$('#main-menu').smartmenus('itemClick', { currentTarget: item });
});

But I believe once you test this live, you will prefer the expand/collapse onclick rather than onmouseover.

Please let me know if you have any questions.

[admin]

Thanks! At first sight, your menu structure is invalid – e.g. you have bits like this where a closing LI tag is rendered right after an opening UL tag:

   <ul class="mega-menu">
    </li>  

so I created a short sample structure for you to start with:

<ul id="main-menu" class="sm sm-blue">
	<li><a href="http://www.comcare.gov.au/home/megamenu#">Promoting Health and Safety</a>
		<ul class="mega-menu">
			<li>
				<div style="border:10px solid red;padding:10px;">
					<h3>A Mega menu</h3>
					<p>A list of links:</p>
					<ul>
						<li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li>
						<li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a>
							<ul>
								<li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li>
								<li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li>
								<li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li>
							</ul>
						</li>
						<li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li>
						<li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li>
						<li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li>
					</ul>
				</div>
			</li>
		</ul>
	</li> 
</ul>

I also added a wrapper DIV with thick red border so you get the idea how to build you mega menus easier.

There is also a nested list of links which I suppose you would like to have. For those, however, you will need some additional CSS to reset the default styles inherited from the SmartMenus core CSS. Here is a good starting reset CSS you could use for nested lists of links:

#main-menu .mega-menu ul {
	position:static; 
	border:0;
	margin:0;
	padding:0 0 0 20px;
	width:auto;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	box-shadow:none;
}
#main-menu .mega-menu ul li {
	display:list-item;
	list-style-type:disc;
}
#main-menu .mega-menu ul a {
	display:inline;
	padding:0;
}

You can, of course, further style the links as you like, etc.

Hope this helps!

[admin]

OK, sorry, I didn’t think you’d need IE6 support too – I added another rule for it in the code sample above. Just take a look at the previous post again.

Cheers!

[admin]

OK, I see. No need to apply the “display:inline” on the links. You can use “display:inline-block” for the main menu LIs instead – e.g. something like this:

#main-menu {
	text-align:center;
}
#main-menu ul {
	text-align:left;
}
#main-menu > li {
	float:none;
	display:inline-block;
	margin-right:-4px;
}
*:first-child+html #main-menu > li { /* for IE7 */
	display:inline;
	margin-right:0;
	zoom:1;
}
* html #main-menu li { /* for IE6 */
	float:none;
	display:inline;
	zoom:1;
}
/*
 Override the above in collapsible mode.
 Make sure the break point width is the same as the one in the theme you use.
*/
@media screen and (max-width: 640px) {
	#main-menu {
		text-align:left;
	}
	#main-menu > li {
		display:block;
		margin-right:0;
	}
}

This will work in all browsers including IE7+.

But I will try to think of some safer way to check if CSS is disabled too.

Cheers!

[admin]

Yes, this is done intentionally. There is a check in the script (the “isCSSOn()” method) that tests the computed display of the first link in the menu tree and when it’s not “block”, the script assumes CSS is disabled in the user agent. And in that case the script prevents handling events (e.g. focus, mouseenter, etc.) so that accidental JS errors are not produced.

So basically in the current code it’s always assumed that the menu item links will have “display:block” applied (this is set in the core CSS and it’s not recommended changing anything there since it might break some script feature).

And this brings the question why exactly do you want to set “display:inline” to the menu item links? I mean is there something you can’t achieve when “display:block” is used?

[admin]

If you’ve moved the libs folder then I guess the hardcoded path in “libs/jquery-loader.js” is not accurate any more and jQuery doesn’t get loaded at all. So just check/fix this line:

var path = '../libs/jquery/jquery.js';

Or, alternatively, you can opt to not use “jquery-loader.js” at all and instead include directly your prefered jQuery version on your pages – e.g.:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

The loader script is just used on the demo page to allow easy testing with different jQuery versions.

[admin]

Hi,

Please post some live example that I could test because it’s difficult to guess what exactly might be causing the issue without looking at your code. Most probably this is a CSS issue rather than a JS but still I need to look at the code to be sure.

Thanks!

[Author]

Posts