Home arrow Style Sheets arrow Page 2 - Improving the Visual Presentation of a CSS Drop-Down Menu
STYLE SHEETS

Improving the Visual Presentation of a CSS Drop-Down Menu


Welcome to the final installment of the series “Building clean drop-down menus with CSS.” This series shows you how to build an extensible drop-down menu which you can easily include in the existing structure of your own web site. In this part, we'll work on the menu we've created to make it more visually appealing.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 4 stars4 stars4 stars4 stars4 stars / 5
October 29, 2008
TABLE OF CONTENTS:
  1. · Improving the Visual Presentation of a CSS Drop-Down Menu
  2. · A review: the menu’s complete source code
  3. · Improving the look and feel with additional CSS styles
  4. · Setting up a working example

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Improving the Visual Presentation of a CSS Drop-Down Menu - A review: the menu’s complete source code
(Page 2 of 4 )

Actually, before I proceed to show you how to change the initial group of CSS styles that belongs to this menu to make it slightly more appealing, I’d like to list its full source code. This will help you recall more quickly how it looked previously.

So, that being said, here’s the complete definition of this drop-down menu, before we modify its visual appearance:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example of CSS-based Drop-down menu (cross-browser compatible)</title>

<style type="text/css">

/* reset body styles */

body{

padding: 0;

margin: 0;

background: #fff;

}

/* style unordered list */

ul{

padding: 0;

margin: 0;

list-style: none;

}

/* style menu items */

li{

float: left;

position: relative;

width: 10em;

}

/* position and hide drop-down menu */

li ul{

display: none;

position: absolute;

top: 1em;

left: 0;

}

li > ul{

top: auto;

left: auto;

}

/* display drop-down menu (add an 'over' class attribute to list items for IE */

li:hover ul,li.over ul{

display: block;

}

</style>

<script language="javascript">

function initializeDropDownMenu(){

// get 'navbar' element

var navbar=document.getElementById('navbar');

if(!navbar){return};

// get all menu items

var menuitems=navbar.getElementsByTagName('li');

if(!menuitems){return};

for(var i=0;i<menuitems.length;i++){

// assign 'over' class attribute to each menu item on 'mouseover'

menuitems[i].onmouseover=function(){

this.className+=' over';

}

// remove 'over' class attribute to each menu item on 'mouseout'

menuitems[i].onmouseout=function(){

this.className=this.className.replace(' over','');

}

}

}

// initialize drop-down menu when web page is loaded

window.onload=function(){

if(document.all&&document.getElementById&&document.getElementsByTagName){

initializeDropDownMenu();

}

}

</script>

</head>

<body>

<ul id="navbar">

<li>About Us

<ul>

<li><a href="">Our Staff</a></li>

<li><a href="">Why work with us?</a></li>

<li><a href="">Our profile</a></li>

<li><a href="">More details</a></li>

</ul>

</li>

<li>Services

<ul>

<li><a href="">Graphic Design</a></li>

<li><a href="">Web Design</a></li>

<li><a href="">Web Programming</a></li>

<li><a href="">Software Development</a></li>

</ul>

</li>

<li>Products

<ul>

<li><a href="">Simple AJAX Library</a></li>

<li><a href="">PHP Form Validator</a></li>

<li><a href="">PHP MySQL Connector</a></li>

<li><a href="">PHP Easy Pager</a></li>

<li><a href="">PHP Form Factory</a></li>

</ul>

</li>

</ul>

</body>

</html>


As you can see, the above code sample demonstrates in a nutshell that it’s  possible to build this kind of menu by writing clean, accessible (X)HTML markup, in conjunction with some basic CSS styles. Pretty good, right?

Now that the definition of the previous menu is fresh in your mind, it’s time to jump forward and learn how to  make it look slightly more compelling.

Want to see how this will be achieved? Click on the link below and keep reading, please.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions
Find More Style Sheets Tutorials

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 2 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials