Submenus

HTML & CSS
1

For a website I’m working on the owners would like to have similar submenus as on this website. Can somebody please tell me how this is done? I’m sure it is Javascript or jQuery. I have been on Google for neary 4 hours now but only could find sollutions for one single div, where I need sub menus for at least 5 menu items. Any help from a forum guru would be highly appreciated.

Thank you in advance

2

I have to make similar submenus as on this website Is this possible with just CSS or do I need something as Javascript or jQuery as well?

3

You could do that just with CSS. Here are some links that may help:

http://www.pmob.co.uk/temp/dropdown-fullwidth2.htm
http://www.visibilityinherit.com/code/mega-drop-down-demo.php
http://www.javascriptkit.com/script/script2/jkmegamenu.shtml
http://designm.ag/inspiration/mega-menus/

Or, if you want to use some JS:

http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/
http://users.tpg.com.au/j_birch/plugins/superfish/#examples
http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/
http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/
http://css-tricks.com/designing-the-digg-header-how-to-download/
http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery

4

As far as I can tell, it uses jQuery and sizzlejs:

5

The example is done with JavaScript - and the submenus don’t work at all for anybody with JS disabled. For my money, you’d be much better off with a pure CSS version.

6

It’s most definitely doable with only CSS. I’ll see what I can come up with.

7

No need to reinvent the wheel :). Ralph provided numerous links.

8

Hi thank you a lot ralph for the links. They were very helpful. There is one thing which I can’t figure though!!! The sub menu’s background should go over the entire width of the screen, but the actual content from the menus should not be wider then 1000px. I have no idea how to do that? Any help would be highly appreciated

9

Could you show us what you have so far? That way we can give specific code for your situation. :slight_smile:

10

Well you couldh ave a setup like this (we can go from your original example and give you exact code then)

<div width 100% with background>
<menu who is 1000px, (centered?)></menu>
</div>

11

I found the suggestion of RyanReese to use dive very smart one but I am afraid that I don’t know how to use it in an appropriate way. this is what I have so far.


html, body {
	width: 100%;
	height: 100%;
}

body {
	background: #AAA;
}

* {
	margin: 0;
	padding: 0;
}

ul, ol, li {
	list-style: none;
}

#menu {
	 width:100%;
   float:left;
   background:#fff;
   overflow:hidden;
   position:relative;
	 z-index: 100;
}

#menu ul {
   clear:left;
   float:left;
   position:relative;
   left:50%;
   text-align:center;
}

#menu ul li {
   display:block;
   float:left;
   list-style:none;
   position:relative;
   right:50%;
}

#menu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   color:#000;
   text-decoration:none;
   line-height:1.3em;
}

#menu ul li a:hover {
   color:#ff0000;
}

#menu ul li.accommodation,
#menu ul li.discover,
#menu ul li.prices,
#menu ul li.contact {
	width: 0;
	height: 0;
	position:absolute;
	left: -9999px;
	top: -9999px;
}

#menu ul li:hover .accommodation,
#menu ul li:hover .discover,
#menu ul li:hover .prices,
#menu ul li:hover .contact {
	width: 100%;
	height: 60px;	
	top: 60px;
	background: #CCC
}



<div id="menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="#">Accommodation</a>
    	<div class="accommodation">

      </div>
    </li>
		<li><a href="#">Gallery</a></li>
		<li><a href="#">Discover</a>
    	<div class="discover">

      </div>
    </li>
		<li><a href="#">Bookings</a></li>
		<li><a href="#">Prices &amp; Avalability</a>
    	<div class="prices">

      </div>
    </li>
		<li><a href="#">Travel</a></li>
		<li><a href="#">Contact</a>
    	<div class="contact">

      </div>
    </li>
	</ul>
</div>

It is obvious that this is wrong because the 100% I use for the submenus is related to the parent li, but I have realy no idea what other approach to take.

12

I just noticed in Paul’s example is that he is using #nav li ul li and #nav li ul ul and that is confusing me somehow (I see the logic but don’t know how to convert it to my situation). I thought using a div as RyanReese suggested would be the most appropriate way for me since all 4 submenus will have a different structure