Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Re: Fallback if Javascript is disabled?

Home Forums Older releases 0.9.x Fallback if Javascript is disabled? Re: Fallback if Javascript is disabled?



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 {

/* first level sub menus offset */
#main-menu li ul {

/* 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 {

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

b) or included in a separate  tag:
	/* 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

// 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.