Introduction to CSS Positioning Properties Part 2 - A simple drop-down menu using the "overflow" and "display" properties
(Page 6 of 6 )
First, let's show the corresponding CSS and markup code for the menu, and then explain what they do:
<style type="text/css">
.navbar {
display: block;
font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
color: #fff;
padding: 2px;
background: #00f;
text-align: center;
}
a.menu:link,a.menu:visited {
display: block;
width: 100px;
height: 18px;
overflow: hidden;
text-decoration: none;
}
a.menu:hover {
display: block;
width: 100px;
height: 90px;
overflow: visible;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
color: #000;
background: #ffc;
padding: 0px 0px 5px 0px;
text-decoration: none;
}
</style>
The HTML markup is listed below:
<a href="#" class="menu">
<span class="navbar">Products</span><br />
Stereo Editors<br />
Multitrack Editors<br />
Expanders<br />
Compressors<br />
Equalizers</a>
That's all of the necessary code to make our simple menu work. Let's explain our CSS declarations:
We've defined a class "navbar" which will be displayed initially as the navigation element for our menu. As usual, we've styled the element using fonts, background colors, padding and the like. The only property to be noticed is "display: block." Since this element will be included within an <a> element, we need it to behave as a block-level element.
Next, we've declared another class "menu," which acts as the menu for the navigation bar element. Here, we're taking advantage of each state for the "a:link" and "a:hover" pseudoclasses. Since our menu is built around the <a> element, we need to initially hide the menu items. That's what we do by setting a height of 18px and assigning the property "overflow: hidden" for the "a:link" state. This way, all of the menu items will be properly hidden since they exceed height.
Then, for the a:hover state, we just assign a new width of 90px for menu items and set the overflow property to "visible." This causes the menu items to be displayed when the mouse it's hovered on the link. Quite simple, isn't it?
The output for this simple drop-down menu is illustrated is the following sequence:
We've created a simple but useful menu using the powerful CSS position capabilities, without the help of any JavaScript code and with little or no effort. Since most modern browsers offer support for these properties, our menu is pretty well suited for being implemented on websites that don't require sophisticated navigation systems.
Summary
In this article, we've looked closely at the most common CSS2 visual properties, which are strongly oriented to position elements in Web documents. Also, with the help of numerous examples, we were able to implement those properties in order to make them work for us in an efficient way. As usual with client-side techniques, we should always be aware of browser support. However, since old fourth-generation browsers are progressively being replaced by today's versions, we can take advantages of the benefits and capabilities available from using the newer CSS2 specifications.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 9 
