CSS drop down menus

My requirement was to create a simple dropdown that would work across browsers.
And I wanted to use CSS (and not just javascript) to create this so that it would be more “search optimized”.

And I found it!! On www.alistapart.com
It’s a very small piece of javascript that uses DOM to create drop downs.
A BIG thanks to whoever wrote it!

And if you want to change the menu from horizontal to vertical, all you need to do is make tiny tweaks in the CSS file. And you’re done!

See this.
This uses the original script / css.

But, my design required me to have the menu appear under the links on the header.
See this.

All I needed to do is change the CSS around a little. No changes to the javascript at all!

Here’s what you need to make sure it works –

1. Make sure you include the .js file in the head tag of your html page and point to the appropriate path.
<script type=”text/javascript” src=”js/drop_down.js”></script>

2. Make sure you include the .css file in the head tag of your html page and point to the appropriate path / file.

//THIS CALLS THE NEW CSS FILE
<style type=”text/css”>
@import “css/new.css”;
</style>

//THIS CALLS THE ORIGINAL CSS FILE
<style type=”text/css”>
@import “css/new.css”;
</style>

Note: Use only one of these at a time depending of what dropdown you want to create.

3. Here’s the html that you need to include in the body of your html page:

<ul id=”nav”>
<li><a href=”#”>1. Link</a></li>
<li><a href=”#”>2. Link</a>
<ul>
<li><a href=”#”>1. Drop Down</a></li>
<li><a href=”#”>2. Drop Down</a></li>
<li><a href=”#”>3. Drop Down</a></li>
</ul>
</li>
<li><a href=”#”>3. Link</a>

<ul>
<li><a href=”#”>1. Drop Down</a></li>
<li><a href=”#”>2. Drop Down</a></li>
<li><a href=”#”>3. Drop Down</a></li>
<li><a href=”#”>4. Drop Down</a></li>
</ul>
</li>
</ul>

Note: Make sure that the first UL tag has an id=”nav”. That’s what the script uses to create the menu.

You can change this around in more than one way. You can make them regular dropdowns, change positions around so the menu appears next to the where the header link appears, add colors / backgrounds to the links….and more. If anyone has any questions or needs any help with creation of any of these, drop a note and I’d love to help!

Click here to download the above examples in a zip format.