ACTIVITY:
CSS NAVIGATION 8 - CREATING PURE CSS DROP-DOWN MENUS
- Unless you have already done so, create a new folder in your My Sites folder called My CSS Navigation.
- Create an images folder in the My CSS Navigationfolder. Copy into this folder the images contained within the zipped folderimages for My CSS Navigation.
- Create a new Dreamweaver site pointing to the My CSS Navigationfolder. Give the Dreamweaver site an appropriate name.
Creating Pure CSS Drop-Down Menus
Previously, we learned to create image- and JavaScript-free rollovers. Can the same be achieved for drop-down menus? The answer is ‘Yes’ - but the resulting menus do not work in Internet Explorer 6 or earlier.
Solution
Open a new HTML and enter the following – saving the file as menus.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Navigation - Using Lists</title>
<link rel="stylesheet" type="text/css" href="menus.css" />
</head>
<body>
<ul id="nav">
<li<a href="#">Starters</a>
<ul>
<li<a href="">Fish</a</li>
<li<a href="">Fruit</a</li>
<li<a href="">Soups</a</li>
</ul>
</li>
<li<a href="#">Main Courses</a>
<ul>
<li<a href="">Meat</a</li>
<li<a href="">Fish</a</li>
<li<a href="">Vegetarian</a</li>
</ul>
</li>
<li<a href="#">Desserts</a>
<ul>
<li<a href="">Fruit</a</li>
<li<a href="">Puddings</a</li>
<li<a href="">Ice Creams</a</li>
</ul>
</li>
</ul>
</body>
</html>
And here are the style rules to implement this effect:
Open a new CSS file and enter the following – saving the file as menus.html:
body {
font: 1em verdana, arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 1em 0 0 1em;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
font-size: 80%;
margin-right: 1em;
}
#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
padding-left: 1em;
color: #2D486C;
}
* html #nav a {
width: 100%;
}
#nav ul {
display: none;
position: absolute;
padding: 0;
}
#nav ul li {
float: none;
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}
#nav li:hover ul {
display: block;
}
Discussion
Though this attractive and easy effect will not work in InternetExplorer6 it is supported by several other newer browsers. This solution allows you to create adrop-down menu without using any JavaScript at all. The technique is based onthe SuckerfishDropdowns solution detailed on A List Apart. (
The menus themselves are based on simple unordered lists. The top-level menu items consist of one main list - the items that fall under each main item are containedin nested lists:
<ul id="nav">
<li<a href="#">Starters</a>
<ul>
<li<a href="">Fish</a</li>
<li<a href="">Fruit</a</li>
<li<a href="">Soups</a</li>
</ul>
</li>
When styles are not applied to the menu, the page displays as a logically structured, unordered list with subsections that are easy to spot.
To begin with, we style the top-level menu removing its list style. We also float thelist items to the left so that they stack horizontally. The list items are given aposition value of relative so that we can position our fly-out menus within themlater on:
#nav, #nav ul {
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
margin-right: 1em;
}
We coerce the links in the menu to display as blocks so they fill the rectangularareas defined by the menu items. InternetExplorer6 (and earlier) doesnot recognize this. However, setting the width of each link to 100% ensures that our clickable regionexpands to fill the containing block.
#nav a:link, #nav a:visited {
display: block;
}
* html #nav a {
width: 100%;
}
Next, we style the nested lists that constitute our fly-out menus so that by default they are not displayed (display: none). We do, however, specify that absolutepositioning is to be used when they are displayed so that they donot affect the flowof the rest of the document:
#nav ul {
display: none;
position: absolute;
}
To prevent our fly-out menu list items from being floated horizontally the way the main menu items are, we need to set their float property to none:
#nav ul li {
float: none;
}
Finally, we use the :hover pseudo-class to display the fly-out menu within any main menu item when the cursor is moved over it:
#nav li:hover ul {
display: block;
}
With these basic CSS rules in place the menu should display as shown below:
This code initially sets the nested lists to display: none. When the user hoversthe cursor over a main menu list item, the property of the nested list within thatlist item is set to display: block, and the menu appears. However, this approachdoes not work in InternetExplorer since in that browser the :hoverpseudo-class works only on links - not on any other element.
The rest of the CSS simply applies visual styles to make the menus look good.
When a fly-out menu opens, the user must move the cursor down to the fly-outmenu items to select one. If, in this motion, the cursor moves outside of the listitem that opened the fly-out menu, the menu will close immediately since the:hover pseudo-class will no longer be in effect.
Looking at the style rules for this page, you can see that we use absolute positioningto display the nested list over the top of the rest of the page content without disturbingit.
In theory, we should be able to leave a little space between the top-level menuitem and the fly-out menu simply by adding margin to the top of the list. However,in InternetExplorer 7 the fly-out menu will disappear if the cursor passes over a margin area rendering the menu unusable. Instead, we have created the effect by applyinga white border to the top of the menu.
We have also added a very small margin to the top of each list item and a negativemargin of the same amount to the bottom. This has the effect of shifting our menudown by one pixel - just enough to ensure that our white border doesnot cover upthe bottom of our top-level menu item.
#nav ul li {
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}
Accessibility Concerns
When you are using any drop-down menu - with or without JavaScript - make surethat users who donot see the full effect of the menus are still able to move aroundyour site.
In the case of this example, users who donot have CSS support will see the expanded nested lists and will be able to navigate through the site. Anyone who usesa browser that doesnot support the display of the submenus such as Internet Explorer 6 will still be able to navigate as long as the pages to which the top-levelmenu items link contain links to all the pages in that section’s submenu.
Any menu system that prevents users whose browsers donot support it from navigatingthe site is bad news.
A - CSS Navigation 8 - Creating Pure CSS Drop-Down MenusVersion 2
Page 1 of 8