WebDev: Creating rollover effect using CSS list menus

You can publish this article wherever you feel like, as long as you use the resource box. Although it is not necessary to inform me, but I feel happy if some tell me that my article has been posted :-)

-- Amrit

==========================================

Article Title: Creating rollover effect using CSS list menus Category: WebDev Copyright © 2005 Amrit Hallan

==========================================

== Article Begins ==

Note: you can read a more interactive version of this article at www.aboutwebdesigning.com/2005/10/15/creating-rollover-effect-using-css-list-menus

Ever seen those fancy links where they change the appearance as soon as you place your mouse cursor on them. See a simple example of a rollover effect at www.aboutwebdesigning.com/examples/rollover1.php. The CSS definition of this simple example goes like this:

== Code begins ==

<style>

body{ background-color: #FFFFFF; font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif; }

#nav{ width: 150px; }

#nav ul{ display: inline; } #nav ul li{ list-style-type: none; line-height: 150%; } #nav ul li a{ color: #6495ED; text-decoration: none; border-bottom: #6495ED 1px dotted; } #nav ul li a:hover{ color: #DC143C; text-decoration: none; border-bottom: #DC143C 1px solid; }

</style>

== Code ends ==

This sort of rollover simply changes the color or the look of the underline.

Now let us move on to some complex looking rollover. To see what I am talking about, have a look at www.aboutwebdesigning.com/examples/rollover2.php. First let us view the entire CSS definition of this rollover menu and then we shall discuss what all is happening.

== Code begins ==

<style>

body{ background-color: #FFFFFF; font-family: Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif; } #nav{ width: 150px; }

#nav ul{ display: inline; } #nav ul li{ list-style-type: none; line-height: 150%; border-left: #000000 8px solid; border-top: #000000 1px solid; border-bottom: #000000 1px solid; border-right: #000000 1px solid; background-color: #BDB76B; margin-top: 5px;

} #nav ul li a{ color: #000000; text-decoration: none; display: block; padding-left: 10px; padding-right: 10px; } #nav ul li a:hover{ color: #FFFFFF; background-color: #4682B4; text-decoration: none; }

</style>

== Code ends ==

And this is how you use it:

== Code begins ==

<div id="nav"> <ul> <li><a href="#">This is link 1</a></li> <li><a href="#">This is link 2</a></li> <li><a href="#">This is link 3</a></li> <li><a href="#">This is link 4</a></li> </ul> </div>

== Code ends ==

While defining your CSS layout, once you define a main DIV ID, you can define all the tags that belong to that ID; for instance here we have the main DIV called #nav (<em>let it be small for "navigation"</em>). All the tag definitions preceded by #nav belong to this particular DIV ID. Take for instance

== Code begins ==

#nav{ width: 150px; }

#nav ul{ display: inline; } #nav ul li{ list-style-type: none; line-height: 150%; border-left: #000000 8px solid; border-top: #000000 1px solid; border-bottom: #000000 1px solid; border-right: #000000 1px solid; background-color: #BDB76B; margin-top: 5px;

}

== Code ends ==

As you can see, there is a DIV with an ID nav. This DIV with ID nav further contains a list tag <ul> that further contains its own tag <li>. All the features are inherited downwards. This first definition is self-explanatory. The real fun begins when we define the <li> tag. Here too, all the definitions are fairly simple. The only definition that may nened explanation is list-style-type: none, which means that while displaying the list, there is no need to display any kind of buller before that.

Then we come to the <a> tag definition. The crucial part here is:

== Code begins ==

display: block; padding-left: 10px; padding-right: 10px;

== Code ends ==

Again, the padding setting inserts space left and right, and display: block fills the entire bullet space upon the rollover. Without setting the display as "block" only the background behind the text is changed, as you can see it at www.aboutwebdesigning.com/examples/rollover3.php, and not the complete block.

== Article Ends ==

About the author: ===============================================

Amrit Hallan is a freelance copywriter, and a website content writer. He also dabbles with PHP and HTML. For more tips and tricks in PHP, JavaScripting, XML, CSS designing and HTML, visit his blog at www.aboutwebdesigning.com

===============================================