A nice horizontal dropdown menu is often considered an indication of how well a website is designed. This is not without reason.
Experts say the usability of a website depends a lot on navigating from any of its pages to the other pages, and the easier it is, the more is the chance of viewers spending more time in the site.
Of course there are other factors that play their part. But navigation is surely an important consideration in a web design work.
In an earlier video article we’ve looked at creating 5 types of attractive horizontal navigation menus. All of them are made with simple CSS manipulation.
Starting with this video article we’ll now attempt to make horizontal dropdown menus with free scripts that look nice and also easy to implement.
A screenshot of the multi-tier dropdown menubar explained in this article is shown above. It is designed based on Michael Leigeber’s wonderful script available here.
Let’s first look at the demo of the dropdown menu below that we’ve created for this article. Click on the menu items to see how they work.
The video explaining the steps comes after that followed by the HTML code which you may use for implementing in your website.
HTML Code
Take a close look at the CSS code. The dropdown menu works with unlisted items that are displayed in ‘block’.
Each menu item has fixed width and is so designed that every section matches correspondingly. The dimensions and other parameters may be changed to see how the menu changes.
Note the dropdown menu is initialized by a small piece of JavaScript (other than the main one) toward the end of the HTML code.
<html><head>
<title>JavaScript Dropdown Menu Demo</title>
<meta name="robots" content="nofollow, noindex" />
<script type="text/javascript" src="script.js"></script>
<style>
body {margin:0px; font:12px Verdana,Arial; background:#fff}
ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#006; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:-1px}
ul.menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #4040ff; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#ccf}
ul.menu ul li a:hover {background-color:#999cff}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:1px solid #4040ff; padding:5px 7px 7px; font-weight:bold; background:url(header.jpg); width:134px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(header-over.jpg)}
ul.menu .sub {background:#e1e1e1 url(arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #4040ff}
</style>
</head>
<body>
<!-- Horizontal Menu Starts -->
<ul class="menu" id="menu">
<!-- First Menu Tab -->
<li><a href="#" class="menulink">This Drops Down</a>
<ul>
<li><a href="#">Navigation 1</a></li>
<li>
<a href="#" class="sub">More Navigation 1</a>
<ul>
<li class="topline"><a href="#">Navigation 1</a></li>
<li><a href="#">Navigation 2</a></li>
<li><a href="#">Navigation 3</a></li>
<li><a href="#">Navigation 4</a></li>
</ul>
</li>
<li>
<a href="#" class="sub">More Navigation 2</a>
<ul>
<li class="topline"><a href="#">Navigation 1</a></li>
<li>
<a href="#" class="sub">More Navigation 1</a>
<ul>
<li class="topline"><a href="#">Navigation 1</a></li>
<li><a href="#">Navigation 2</a></li>
</ul>
</li>
<li><a href="#">Navigation 2</a></li>
</ul>
</li>
<li><a href="#">Navigation 2</a></li>
<li><a href="#">Navigation 3</a></li>
</ul>
</li>
<!-- Second Menu Tab -->
<li><a href="#" class="menulink">This Does Not</a></li>
<!-- Third Menu Tab -->
<li>
<a href="#" class="menulink">This Also Drops</a>
<ul>
<li><a href="#">Navigation 1</a></li>
<li>
<a href="#" class="sub">More Navigation 1</a>
<ul>
<li class="topline"><a href="#">Navigation 1</a></li>
<li><a href="#">Navigation 2</a></li>
</ul>
</li>
<li><a href="#">Navigation 2</a></li>
</ul>
</li>
<!-- Fourth Menu Tab -->
<li>
<a href="#" class="menulink">This Drops Too</a>
<ul>
<li><a href="#">Navigation 1</a></li>
<li><a href="#">Navigation 2</a></li>
<li>
<a href="#" class="sub">More Navigation 1</a>
<ul>
<li class="topline"><a href="#">Navigation 1</a></li>
<li><a href="#">Navigation 2</a></li>
<li><a href="#">Navigation 3</a></li>
</ul>
</li>
<li><a href="#">Navigation 3</a></li>
<li><a href="#">Navigation 4</a></li>
</ul>
</li>
</ul>
<!-- Horizontal Menu Ends -->
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
</body></html> This article of November 10th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
