mega menu implementation
Home › Forums › Older releases › 0.9.x › mega menu implementation
- This topic has 4 replies, 2 voices, and was last updated 7 years, 6 months ago by
comcare.
-
AuthorPosts
-
August 11, 2013 at 21:48 #1267
comcare
ParticipantWe have been using a licenced version of the smartmenus for our government website:
I was wanting to modify the jquery version to implent a full width multi column mega menu that shows level three content.
I have managed to create the mega menu however the sub ul and li elements are always hidden. I’ve tryed to modify the .js file lines 200-201 to show the nested ul and li but no success:
if (this.hasClass(‘mega-menu’)) {
this.find(‘ul’).removeDataSM(‘in-mega’);
}Any support or advice would be appreciated.
If you don’t think your smartmenu jquery version supports this layout could you recommend an accessible mega menu for us to use.Thanks
August 15, 2013 at 03:55 #1439admin
KeymasterHi,
Please post some live example that I could test because it’s difficult to guess what exactly might be causing the issue without looking at your code. Most probably this is a CSS issue rather than a JS but still I need to look at the code to be sure.
Thanks!
August 25, 2013 at 20:33 #1448comcare
ParticipantAugust 27, 2013 at 05:26 #1451admin
KeymasterThanks! At first sight, your menu structure is invalid – e.g. you have bits like this where a closing LI tag is rendered right after an opening UL tag:
<ul class="mega-menu"> </li>
so I created a short sample structure for you to start with:
<ul id="main-menu" class="sm sm-blue"> <li><a href="http://www.comcare.gov.au/home/megamenu#">Promoting Health and Safety</a> <ul class="mega-menu"> <li> <div style="border:10px solid red;padding:10px;"> <h3>A Mega menu</h3> <p>A list of links:</p> <ul> <li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li> <li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a> <ul> <li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li> <li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li> <li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li> </ul> </li> <li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li> <li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li> <li><a href="http://www.comcare.gov.au/home/megamenu#">Preventing Harm</a></li> </ul> </div> </li> </ul> </li> </ul>
I also added a wrapper DIV with thick red border so you get the idea how to build you mega menus easier.
There is also a nested list of links which I suppose you would like to have. For those, however, you will need some additional CSS to reset the default styles inherited from the SmartMenus core CSS. Here is a good starting reset CSS you could use for nested lists of links:
#main-menu .mega-menu ul { position:static; border:0; margin:0; padding:0 0 0 20px; width:auto; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; } #main-menu .mega-menu ul li { display:list-item; list-style-type:disc; } #main-menu .mega-menu ul a { display:inline; padding:0; }
You can, of course, further style the links as you like, etc.
Hope this helps!
August 27, 2013 at 23:44 #1452comcare
ParticipantThanks,
The CSS has revealed the list elements thank you.
I’ve included the above css style to the megea menu page above.However the HTML structure is valid as I couldn’t find the issue you pointed out.
-
AuthorPosts
- You must be logged in to reply to this topic.