Need a little help with my dropdown menu

Get Started
1

Hi Guys,

I’m in the process of updating a site and have opted to have a “mega” drop down menu on the website.

I’ve been looking at the example over at http://www.visibilityinherit.com/code/mega-drop-down.php and a few others.

Ideally, I’m looking to have a similar effect to the one that is on www.audi.co.uk which allows the drop down div to include images, text and links and has a nice slide down effect…I’m assuming I need jQuery to do this.

Does anybody know of any tutorials or scripts that are around to get me on my way.

Thanks in advance,

2

Hi WebEd, welcome to SitePoint! :slight_smile:

Here are two links that might help:
A tutorial on building a mega menu:

And some design inspiration:

3

Hi Ralph,

Thanks for your welcome and help, I look at the sitepoint tutorial and if I can’t get what I have justnow to work properly I will give that tutorial a shot.

Right now I more or less have what I need but…

As you can see the menu does dropdown but doesn’t align with the original “navbar”.

Its important that all the dropdown elements site directly under the original navigation bar.

Here’s my code


<!--begin navigation section-->
<div id="nav">
<ul id="mega">
<li><a href="#">Home</a></li>
<li><a href="#">About</a> <b class="s4"></b>
      <div> <b class="s1"></b><b class="s2"></b><b class="s3"></b>
        <h2>Classes</h2>
        <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Dance</a></p>

        <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Perform</a></p>
        <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Math</a></p>
        <h2>Teachers</h2>
        <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>

        <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
        <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
      </div>
    </li>
    <li><a href="#">Removals</a> <b class="s4"></b>

      <div> <b class="s1"></b><b class="s2"></b><b class="s3"></b>
        <h2>Classes</h2>
        <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
        <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
        <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>

        <h2>Teachers</h2>
        <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
        <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
        <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>

        <h2>Location</h2>
        <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
        <p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
        <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>

        <h2>Months</h2>
        <p><a href="#">Janary</a><a href="#">February</a><a href="#">March</a><a href="#">April</a></p>
        <p><a href="#">May</a><a href="#">June</a><a href="#">July</a><a href="#">August</a></p>
        <p><a href="#">September</a><a href="#">October</a><a href="#">November</a><a href="#">December</a></p>

      </div>
    </li>
    <li class="dif"><a href="#">Packing</a> <b class="s4 dif-s4"></b>
      <div> <b class="s2"></b><b class="s3"></b>
        <h2>Classes</h2>
        <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Math</a><a href="#">Cooking</a></p>

        <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Algebra</a><a href="#">Fitness</a></p>
        <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Training</a><a href="#">Web Design</a></p>
        <h2>Teachers</h2>

        <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
        <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
        <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
      </div>

    </li>
    <li class="dif"><a href="#">Storage</a> <b class="s4 dif-s4"></b>
      <div> <b class="s2"></b><b class="s3"></b>
        <h2>Classes</h2>
        <p><a href="#">Times</a><a href="#">Schedual</a></p>
        <p><a href="#">Names</a><a href="#">Study</a></p>

        <p><a href="#">Health</a><a href="#">Dance</a></p>
        <h2>Teachers</h2>
        <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a><a href="#">Mack</a><a href="#">Fred</a></p>
        <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Lemmon</a><a href="#">Stone</a><a href="#">Bella</a></p>

        <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Shannon T</a><a href="#">Sarah</a><a href="#">Ralph</a></p>
      </div>
    </li>
</ul>
</div>
<!--end navigation section-->

And here’s the CSS,


/*Navigation section styles*/
#nav { width: 888px; height: auto; min-height: 40px; background-image: url(images/layout/nav-bg.png); background-repeat: repeat-x; background-color: #0054a6; border-width: 1px; border-style: solid; border-color: #000000; border-spacing: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; text-align: left; }
* { margin: 0; padding:0; }
#mega { list-style: none; font-weight: bold; height: 38px; margin: 0; padding: 0; }
#mega li { float:left; width: auto; text-align: center; position: relative; padding: 0 20px 0 20px }
#mega li:hover { background: #0054a6; border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */ padding: 2px 20px 1px 20px; margin-top: 0px; z-index:0; /* shadow above adjacent li */ }
#mega a { color: #ffffff; font-size: 1em; outline: 0; text-decoration:none; display:block; line-height: 38px; }

#mega div { position: absolute; left: -999em; margin-top: 1px; width: 868px; padding:0 10px 10px; border: 1px solid #000000; border-top:0; font-weight: normal; text-align: left; background: #0054a6; }
#mega li:hover div { left: -1px; top: auto; }
#mega li.dif:hover div { left: 0px; }


/* --------- Within Div Styles --------- */
#mega div h2 {
background:#999;
font-size:1em;
padding:0 10px;
margin:10px 0 5px 0;
clear:both;
float:left;
width:330px;
position:relative; /* makes above drop shadow */
}
#mega div p {
float:left;
width:106px;
padding-left:10px;
position:relative; /* makes above drop shadow */
}
#mega div p a {
text-decoration:underline;
float:left;
clear:left;
width:100%; /* For IE6/7 */
line-height:1.4;
}
#mega div a:hover, #mega div a:focus, #mega div a:active {
text-decoration:none;
}
/* ---------- Drop Shadow ---------- */
#mega div .s1, #mega div .s2, #mega div .s3 {
position:absolute;
width:100%;height:100%;
}
#mega div .s1 {
background:url(../images/rightcorner.png) 100% 0 no-repeat;
top:1px;right:-9px;
} 
#mega div .s2 {
background:url(../images/leftcorner.png) 0 100% no-repeat;
bottom:-9px;left:1px;
} 
#mega div .s3 {
background:url(../images/shadow.png) 100% 100%;
top:9px;right:-9px;
}
#mega li:hover .s4 {
background:url(images/li-shadow.png) 100% 0 repeat-y;
position:absolute;
top:0;right:-9px;
height:100%;
padding:0 8px 0 0;
}
* html #mega li:hover .s4 {
background:none;
}
#mega li:hover .dif-s4 {
padding-bottom:9px
}

Obviously, I’m not finished with the rest of the layout and links contained in the dropdown but this main alignment thing is really bugging me and I can’t work out if I need to use z indexes or somthing along those lines to fix it.

I should add that each drop down is out of alignment to a different degree, e.g - the final link in the bar dropsdown extending way out the page.

If anyone can offer me some help on this I would be really grateful!

4

As #mega li has position:relative; #mega div, having position:absolute; will position itself in relation to its parent li.

Removing position:relative; from #mega li will cause #mega div to position in relation to the next parent with position:relative; which is #mega i.e. the ul.

#mega li {
    float: left;
    padding: 0 20px;
    position: relative; /* remove */
    text-align: center;
    width: auto;
}
5

Yes, good point. At the moment, #mega doesn’t have position: relative, so remember to add it here after removing it from #mega li:

#mega { 
  list-style: none; 
  font-weight: bold; 
  height: 38px; 
  margin: 0; 
  padding: 0; 
 [COLOR="Red"] position: relative;[/COLOR] /* add this */
}
6

Good point. I was juggling in Firebug so must have applied it to #mega and promptly forgotten.

7

Thanks so much guys!

That worked perfect, it always seems to be the simplest things I slip up on!

8

Hi guys,

Was working away on this again when I came across this http://vidasp.net/jquery-example7.html .

This menu has the smooth slidedown effect I really need, does anybody know what is the best way of integrating the same effect into my current dropdown?

Thanks,

9

Not meaning to hijack, but I am having a similar issue. I need the jquery menu to slide up from the bottom, rather than drop down. Is there a way to do this in the code or do I have to use a different plugin?