Re: Fallback if Javascript is disabled?

[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!