Fallback if Javascript is disabled?

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1275
    bulldog
    Participant

    Hi,
    Nice menu system. I’m trying to figure out if any fallback can happen if javascript is disabled. I notice that the submenus don’t work if JS is disabled. Any suggestions? Thanks in advance.

    #1468
    admin
    Keymaster

    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!

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?