mega menu implementation

Home Forums Older releases 0.9.x mega menu implementation

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1267
    comcare
    Participant

    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

    #1439
    admin
    Keymaster

    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!

    #1448
    comcare
    Participant

    Here is an example of the menu:

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

    Thanks

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

    #1452
    comcare
    Participant

    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.

Viewing 5 posts - 1 through 5 (of 5 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?