Posted By Doteasy

horizontal_menu

This menu:

  • items aligned horizontally
  • items are displayed as blocks
  • block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
    list-style: none;
    }

2. Set the width and margin of the menu.

#mainmenu {
    margin: 10px;
    width: 750px;
    font-family: Tahoma;
    }

Setting the width prevents the menu from wrapping when the user shrinks the browser window.

3. Set the list items to display as blocks. We will also give them a width and float them to the left so they will be displayed to the right of the preceding item. We will also give them a margin border.

#mainmenu li {
    display: block;
    width: 120px;
    float: left;
    margin-left: 2px;
    border: 1px solid #333333;
    }

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
          display:block;
          padding:3px;
          text-decoration:none;
          background-color:#333333;
          color:#FFFFFF;
         }

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
          background-color:#8CC919;
          color:#FFFFFF;
         }

 

The Full CSS Code

So, to achieve the horizontal menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type="text/css"> and </style> to your CSS file.

<head>
<style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu {
                 margin:10px;
                 width:750px;
                 font-family: Tahoma;
                 }
 
            #mainmenu li {
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }
 
             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                 }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }
        </style>
</head
>


Resources:

>> Stay tuned as next time, we will be creating a vertical menu.


 
1 Comment(s):
Performans event said...
thanks
September 22, 2009 10:37:18
 


 
Google

Recent Entries
 
Category
 
Latest Comments
 
Archives
 
Free Tools and Applications
 
Doteasy Knowledge Base
 
 
Links
 
Doteasy Reviews
 
Visitors

You have 2084763 hits.

 
$0 Web Hosting

$0 Web Hosting
 
 

Add to Technorati Favorites



Add to Google Reader or Homepage

Add to My AOL

Add to netvibes

Subscribe in Bloglines

Powered by FeedBurner