Drop-Down Menus, Horizontal Model – A Record Aside

by

Anybody who has created drop-down menus will likely be acquainted with the massive portions of scripting such menus usually require. However, utilizing structured HTML  and easy CSS, it’s attainable to create visually interesting drop-downs which are straightforward to edit and replace, and that work throughout a mess of browsers, together with Web Explorer. Higher nonetheless, for code-wary designers, no JavaScript is required! (Really, a tiny little bit of JavaScript is required, however it’s not what you assume.)

Article Continues Beneath

Right here’s a sneak preview of the thực đơn in motion.

The primary and most necessary a part of creating our thực đơn is the thực đơn construction itself. One of the simplest ways to do that is to construct an unordered checklist, with every sub-menu showing as a listing inside its guardian checklist merchandise. Sound difficult? It’s truly very simple:

<ul> 
  <li><a href="#">Dwelling</a></li> 
  <li><a href="#">About</a> 
      <ul> 
      <li><a href="#">Historical past</a></li> 
      <li><a href="#">Crew</a></li> 
      <li><a href="#">Places of work</a></li> 
      </ul> 
    </li> 
  <li><a href="#">Providers</a> 
      <ul> 
      <li><a href="#">Net Design</a></li> 
      <li><a href="#">Web 
            Advertising</a></li> 
      <li><a href="#">Internet hosting</a></li> 
      <li><a href="#">Area Names</a></li> 
      <li><a href="#">Broadband</a></li> 
      </ul> 
    </li>
  <li><a href="#">Contact Us</a> 
      <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
      </ul> 
    </li> 
  </ul>

That’s it: some easy HTML that’s each accessible and straightforward to edit.

Visually interesting?#section3

When you’ve got previewed the thực đơn above, you’ll see a reasonably boring checklist of things. And I promised you it will be visually interesting! Let’s add some model.

Step one is to take away the indents and bullets from the unordered checklist and outline the width of our thực đơn objects.

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 }

Subsequent, we have to place our checklist objects. Fortuitously, these will stack vertically by default, which is what we require. Nonetheless, we should set the place as relative, as a result of we might want to place the sub-menus completely inside them.

ul li {
 place: relative;
 }

Subsequent step is the sub-menus. We wish every sub-menu to look to the best of its guardian thực đơn merchandise when that merchandise is hovered over.

li ul {
 place: absolute;
 left: 149px;
 prime: 0;
 show: none;
 }

Utilizing the “left” and “prime” attributes, we are able to completely place every sub-menu inside its guardian thực đơn merchandise. You’ll discover I’ve set the “left” property to 149px (1px lower than the width of the thực đơn objects), which permits the sub-menus to overlap the primary thực đơn and never produce a double border. (You’ll see what I imply later.)

We’ve got additionally set show to “none,” as we don’t need the sub-menus to be seen by default.

So now we’ve the framework in place, however it’s nonetheless trying a bit plain. Let’s model these hyperlinks.

ul li a {
 show: block;
 text-decoration: none;
 coloration: #777;
 background: #fff;
 padding: 5px;
 border: 1px strong #ccc;
 border-bottom: 0;
 }

I’ve styled the hyperlinks to my style, however they are often modified to your desire, as you want. It is very important set show to “block,” as we would like every hyperlink to take up all of the out there area of its containing checklist merchandise.

So issues are trying a bit higher, though customers of Web Explorer for Home windows could disagree. Sadly, IE Win interprets the road breaks between our properly formatted HTML checklist objects as white area, so you’ll discover that the thực đơn objects don’t stack up neatly in that browser. Nonetheless, there’s a method round IE’s bugs:

/* Repair IE. Conceal from IE Mac */
* html ul li { float: left; }
* html ul li a { peak: 1%; }
/* Finish */

We are able to apply the Holly Hack above, which hides these guidelines from all browsers however IE Win. Good. You’ll discover the peak: 1% rule that has additionally been added. Sadly (once more!) the float repair uncovers one other IE bug, which requires a peak worth to make the hyperlinks show as block-level components.

Additionally, you will discover the necessity to shut the thực đơn, which could be achieved by including the lacking border to the underside of the checklist. So, the ul rule turns into:

ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 150px;
 border-bottom: 1px strong #ccc;
 }

With some luck, everybody ought to now have the ability to see the unfunctional thực đơn.

Now the enjoyable bit. We have to make these sub-menus seem once we hover over the thực đơn objects.

li:hover ul { show: block; }

Voila…right here’s the naked bones thực đơn in motion.

“Woo hoo! It really works!” I hear 1% of you shout. “Superior!”

OK, OK, in order that darn IE/Win has to damage every thing and never do because it’s instructed. IE/Win solely permits the :hover pseudo-class to be utilized to a hyperlink — so the li:hover that makes the sub-menus seem means nothing to IE.

A tiny jot of JavaScript is required to kick IE again into motion (line wraps marked » — Ed.):

startList = perform() {
if (doc.all&&doc;.getElementById) {
navRoot = doc.getElementById("nav");
for (i=0; i<navroot.childnodes.size; i++)="" {="" node="navRoot.childNodes<i">;
if (node.nodeName=="LI") {
node.onmouseover=perform() {
this.className+=" over";
  }
  node.onmouseout=perform() {
  this.className=this.className.substitute»
 (" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</navroot.childnodes.size;>

Nice thanks and appreciation is due right here to Patrick Griffiths and Dan Webb, who launched this trickery in a earlier ALA article, Suckerfish Dropdowns. Thanks, guys!

So, the hover rule now turns into:

li:hover ul, li.over ul { 
 show: block; }

Moreover, we additionally have to affiliate the JavaScript with our principal ul, which turns into:

Hopefully, with the above tweaks in place, everybody ought to have the ability to see a easy model of the thực đơn in motion.


IE5.01 Leaping Thực đơn Bug#section5


Anybody utilizing IE5.01 on Home windows will discover that the thực đơn jumps round once you hover over a few of its objects. The issue is definitely mounted by modifying our earlier hacks as follows:


/* Repair IE. Conceal from IE Mac */
* html ul li { float: left; peak: 1%; }
* html ul li a { peak: 1%; }
/* Finish */



Thriller IE6 Bug:#section6


In the course of the improvement of this text, I uncovered a wierd bug that I consider is just obvious in IE6. A background have to be declared on the li a, else when a sub-menu stretches additional (vertically) than the primary thực đơn itself, the hyperlinks begin to disappear earlier than you may have time to click on them. Unusual! Strive it to see for your self.


That’s it! A standards-friendly methodology for creating visually interesting horizontal drop-down menus. All you need to do now could be add some hover kinds and make it your personal. Simply to provide you a style, right here’s a prettier one I ready earlier. Get pleasure from!

Leave a Comment