The Web Just This Site

NM Web Tutorials

Drop Down: Step 1

There are many different ways to make a drop down menu, many tutorials that I have found have all given me huge amounts of code, that don’t validate or work in even the most common browsers. Thanks to www.htmldog.com I was able to find a method that validates. BEFORE YOU GO COPYING AND PASTING AWAY, there is a piece of JavaScript I am going to give you in order for it to work in Internet Explorer, a big thanks to suckerfish. I just thought I should tell you that ahead of time so you don’t end up going only partway through tutorial and wonder why it doesn’t work. Don’t worry, it’s extremely easy to add the JavaScript, everything else is exceptionally complex. In the end of this section, you’ll have a fully functional, fully customizable drop down menu.

We are going to start by making an unordered list with the <ul id="nav"> tag (you can name it whatever you want, but nav works for me), everything within this drop down menu is going to be within the <ul> tag:

XHTML

What The Code Does

<ul id="nav">


<li><a class="dropper" href="#">Menu Button 1</a>
<ul>
<li><a class="drop" href="#">Item 1</a></li>
<li><a class="drop" href="#">Item 2 </a></li>
<li><a class="drop" href="#">Item 3 </a></li>
<li><a class="drop" href="#">Item 4 </a></li>
</ul>
</li>

 

<li><a class="dropper" href="#">Menu Button 2 </a>
<ul>
<li><a class="drop" href="#">Item 1</a></li>
<li><a class="drop" href="#">Item 2 </a></li>
<li><a class="drop" href="#">Item 3 </a></li>
<li><a class="drop" href="#">Item 4 </a></li>
</ul>
</li>

</ul>

A little daunting at first, but when you break it down, you’ll see how simple it really is. As mentioned before, the <ul id="nav1"> is going to be wrapped around the whole thing, which will finally end off with a </ul>. There will be more <ul> tags within it, so don’t get confused.

| NEXT>>

Home | Drop Down | Step 1

Valid XHTML 1.0 Transitional © 2008. NM Web Tutorials. Nathan Morier