Home arrow Style Sheets arrow Page 6 - Introduction to CSS Positioning Properties Part 2
STYLE SHEETS

Introduction to CSS Positioning Properties Part 2


In this second part of a two-part article, we examine more positioning properties available in the CSS2 specifications, and use what we've learned to build a simple drop-down menu without employing any JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 14
February 28, 2005
TABLE OF CONTENTS:
  1. · Introduction to CSS Positioning Properties Part 2
  2. · The "clear" property
  3. · The "z-index" property
  4. · The "visibility" property
  5. · The "overflow" property
  6. · A simple drop-down menu using the "overflow" and "display" properties

print this article
SEARCH DEVARTICLES

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.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- 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...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




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