mega menu implementation

[comcare]

We have been using a licenced version of the smartmenus for our government website:

http://www.comcare.gov.au

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

[admin]

Hi,

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!

[comcare]

Here is an example of the menu:

http://www.comcare.gov.au/home/megamenu

Thanks

[admin]

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

[comcare]

Thanks,

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.

[Author]

Posts