in the name of allah
  ArabTut
main tutorials downloads forums links contact us  
   
 
 
Arabtut>tutorials>CSS tutorials
Creating vertical menu with a rollover effect
  1. create a basic HTML page with a tan background

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <head>
    <title>rollover menu </title>
    </head><style type="text/css">
    <!--
    body {
    background-color:#D5D6AE;
    }
    -->
    </style><body>
    </body>
    </html>

  2. creat a list of components which will be our menu
    <ul>
    <li><a href="home.htm">home</a></li>
    <li><a href="about.htm">about</a></li>
    <li><a href="contact.htm">contact</a></li>
    <li><a href="gallery.htm">gallery</a></li>
    </ul>
  3. now change the text to anchor links
    <li><a href="home.htm">home</a></li>
    <li><a href="about.htm">about</a></li>
    <li><a href="contact.htm">contact</a></li>
    <li><a href="gallery.htm">gallery</a></li>
  4. now make class and call it "menu" and add it to the style tag after background-color:#D5D6AE; to change the bullets -dots-
    ul.menu {list-style:none ; }
  5. now we change the <ul> tag in step 2 to
    <ul class="menu>
  6. we change the ul.menu class and put some font types and size and then fix the width to 100px and give the menu a lighter background color #EEEDC
    ul.menu {
    list-style:none ;
    font-family:verdana,arial,sans-serif ;
    font-size:0.8m ; }
  7. now we add a padding and a margin of 0px on our <ul> in order to make our menu look good in browsers other than internet explorer - for example Firefox and Netscape .
    ul.menu {
    list-style:none ;
    font-family:verdana,arial,sans-serif ;
    font-size:0.8m ;
    border-bottom:1px solid #6F3E04;
    width:100px;
    background-color:#EEEDC;
    padding:0;
    margin:0
    }
  8. now to remove the underlines under the links we make a new class in our style called ul.menu li a and make it like that
    ul.menu li a {
    text-decoration:none ;
    display:block;
    width:100px;
    }
  9. now we add some font style and color to our links and put some width to make it compatible for Firefox
    ul.menu li a {
    text-decoration:none ;
    display:block;
    width:100px;
    color: #333333;
    font-weight:bold;
    padding:2px 10px;
    width:80px;
    }
  10. now we put the hover class which will display when the visitor move the mouse over the menu
    ul.menu li a:hover {
    background-color: #B9BB79 ;
    color:: #EEEEDC ;
    }

now preview the page

 
     
All Copyrights Reserved Arabtut© 2006