Re: mega menu implementation

Home Forums Older releases 0.9.x mega menu implementation Re: mega menu implementation

#1451
admin
Keymaster

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!

Register

You will be emailed a link to set your password.

Login

Lost password?