Reply To: Smartmenu doesnt work in Javascript not enabled browsers

[admin]

Hi,

Could be done very easily with a bit of additional CSS.

1) Copy the following (you can tweak it later if you like) and save it in a new file “sm-pure-css.css”:

/* SmartMenus - pure CSS menus */
@media (min-width: 768px) {

	/* sub menus defaults - width should be the same for all */
	.sm ul {
		width: 12em;
		left: 0;
	}
	.sm-rtl ul {
		left: auto;
		right: 0;
	}

	/* sub menus offset */
	.sm ul ul, .sm-vertical ul {
		margin: -2.7em 0 0 11.8em;
	}
	.sm-rtl ul ul, .sm-rtl.sm-vertical ul {
		margin: -2.7em 11.8em 0 0;
	}

	/* show sub menus on hover */
	.sm li:hover > ul {
		display: block;
		z-index: 10000;
	}
}

2) Then link it on your page after “sm-core-css.css” and your chosen theme like this:

<link id="sm-pure-css" href="PATH_TO/sm-pure-css.css" rel="stylesheet" type="text/css" />

3) Finally, add the following JS line before your SmartMenus init call:

$('#sm-pure-css').remove();

E.g. should look something like:

$(function() {
	// disable SmartMenus pure CSS
	$('#sm-pure-css').remove();

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

Let me know if you have any troubles.