Part Deux

"Wait! You said this would be a multi-menu drop down horizontal thingy!" Yes, it will be! But now we have to add a few things!

Adding the sub menus

Well, lets create our sub menus. Use undordered lists. Place each submenu within it's own div. And, of course, the fake links.

<div id="mainmenu">
 <ul>
  <li><a href="#">Menu1</a></li>
  <li><a href="#">Menu2</a></li>
  <li><a href="#">Menu3</a></li>
 </ul>
</div>
<div id="menu1">
 <ul>
  <li><a href="#">Menu1.1</a></li>
  <li><a href="#">Menu1.2</a></li>
  <li><a href="#">Menu1.3</a></li>
 </ul>
</div>
<div id="menu2">
 <ul>
  <li><a href="#">Menu2.1</a></li>
  <li><a href="#">Menu2.2</a></li>
  <li><a href="#">Menu2.3</a></li>
 </ul>
</div>
<div id="menu3">
 <ul>
  <li><a href="#">Menu3.1</a></li>
  <li><a href="#">Menu3.2</a></li>
  <li><a href="#">Menu3.3</a></li>
 </ul>
</div>

But how do we get them to be subordinate menus? Ahh, CSS, again. We already have most everything we need, so lets add each element to what we have.

#menu1 ul, #menu2 ul, #menu3 ul {
     /*/*/margin: 0;
     white-space: nowrap;
     padding: 0; /* */
}

#menu1 li, #menu2 li, #menu3 li {
     display: inline;
     list-style-type: none;
}

#menu1 a, #menu2 a, #menu3 a {
     color: #000;
     /*/*/padding: 1px 8px 1px 24px;
     border: 1px solid #333333;
     background-image: url(images/standard.gif); /* */
}

#menu1 a:link, #menu2 a:link, #menu3 a:link, #menu1 a:visited, #menu2 a:visited, #menu3 a:visited {
     color: #000;
     text-decoration: none; /* */
}

#menu1 a:hover, #menu2 a:hover, #menu3 a:hover {
     color: #FFF; border: 1px solid #333333;
     background-image: url(images/mouseover.gif);
}

Now, the magic that makes it all hidden.

#menu1, #menu2, #menu3 {
     left: 36px;
     top: 86px;
     visibility: hidden;
     display: none;
}

The nifty attributes visibility: hidden; and display: none; hide the menus from being displayed, and, space being reserved on the canvas for them. Take special note of this, if you place it on a page with fixed content, insert the menu within another div element, and specify a height (in pixels, of the total height of each menu level added together, plus a few pixels of 'padding' to account for browser variations and screen resolutions.) So, the whole shebang:


But where are the sub menus?!

We have to add some onmouseover calls to each link. So, with JavaScript, and a little DOM 1.0, we can make this all happen. Insert these JavaScript functions into the head of your document:

<script type="text/javascript">
function showmenu(obj){
document.getElementById(obj).style.visibility="visible";
document.getElementById(obj).style.display="inline";
document.getElementById(obj).style.display="block";
}
function hidemenu(obj){
document.getElementById(obj).style.display="block";
document.getElementById(obj).style.visibility="hidden";
document.getElementById(obj).style.display="none";
}
</script>

The document.getElementById(obj) are DOM 1.0 object calls. Basically, they allow you to alter object attributes in real time. Remember, we want the sub menus to be come visible on mouseovers. Changing the display to block takes care of some browsers that incorrectly handle the visiblity switching. Now, in each <a href="#"> call, we'll have to insert a onmouseover="showmenu('%sub menu name%'); hidemenu('%sub menu name%'). One hidemenu call for each submenu that we don't want to show.

Here's what we want each main menu item to do, basically:

Sounds really simple, right?

<div id="foo" style="height:50px;">
 <table border="0" cellpadding="0">
  <tr>
   <td>
    <div id="mainmenu">
     <ul>
      <li><a href="#" onmouseover="hidemenu('menu2'); hidemenu('menu3'); showmenu('menu1')">Menu1</a></li>
      <li><a href="#" onmouseover="hidemenu('menu1'); hidemenu('menu3'); showmenu('menu2')">Menu2</a></li>
      <li><a href="#" onmouseover="hidemenu('menu1'); hidemenu('menu2'); showmenu('menu3')">Menu3</a></li>
     </ul>
    </div>
   </td>
  </tr>
  <tr>
   <td>
    <div id="menu1">
     <ul>
      <li><a href="#">Menu1.1</a></li>
      <li><a href="#">Menu1.2</a></li>
      <li><a href="#">Menu1.3</a></li>
     </ul>
    </div>
    <div id="menu2">
     <ul>
      <li><a href="#">Menu2.1</a></li>
      <li><a href="#">Menu2.2</a></li>
      <li><a href="#">Menu2.3</a></li>
     </ul>
    </div>
    <div id="menu3">
     <ul>
      <li><a href="#">Menu3.1</a></li>
      <li><a href="#">Menu3.2</a></li>
      <li><a href="#">Menu3.3</a></li>
     </ul>
    </div>
   </tr>
   </td>
  </tbody></table>
 </div>

And here it is, in action.


And that's quite nice, but lets make it better with some more CSS!


< Return to Page 1  ::  On to Page 3 >