The nature of our business means that we must cater for a very wide audience, thus forcing us to negate the use of JavaScript on our most important functional sections of our websites.

As you'll appreciate, the menu is the most important part of a website in most applications. We'd love to use megamenu but I installed it yesterday and trying it with JavaScript disabled, and furthermore tested it by deleting the .js file in the module, neither of which allow the full functionality of the menu. i.e. Only the top level is visible and active. The lower levels cannot be accessed.

Any help and advice on how I could achieve this with CSS only would be greatly appreciated.

Comments

danielhonrade’s picture

danielhonrade commented

hi,

add this to you css:

ul#megamenu-primary-links li:hover ul.megamenu-slots-columnar { top: 30px !important; }

Adjust your tags to whatever you're using, I'am using primary links and the height of my top menu is 30px, plus you have to add width and position to your columns because I think these are computed by js.

sittard’s picture

sittard commented

Taking that a bit further.

.megamenu-menu li:hover ul.megamenu-bin { 
  top: 30px !important; 
}

To allow both singular and columnar bins to be activated without JS and no need for the #megamenu-primary-links selector.

sittard’s picture

sittard commented

The CSS above forces the menu to appear instantly, essentially overriding the hovertime variable in megamenu.js. So ideally the CSS should ONLY be applied when JavaScript can not be detected.

jonthomas83’s picture

jonthomas83 commented

Thank you for your responses guys, very much appreciated, will take a look at implementing this as soon as I get a minute. Will get back to you with the result!

Thanks again, it's appreciated.

verta’s picture

verta commented

Subscribing, also can someone help me to do what is in #3, would this be code in the theme?

Anonymous’s picture

Anonymous (not verified) commented

Yes put mega menu styles in your theme's css.

Anonymous’s picture

Anonymous (not verified) commented
Component: Miscellaneous » Documentation
Assigned: Unassigned »
Priority: Major » Normal
lewisnyman’s picture

lewisnyman
he/him
commented

You would require a no-js class to be inserted into the body of your html using your theme page.tpl.

Then add this line of jQuery:
$('body').removeClass('no-js');

The CSS would then change to:

.no-js .megamenu-menu li:hover ul.megamenu-bin {
  top: 30px !important;
}