Computer Help and Spyware Removal Computer Help and Spyware Removal Computer Help and Spyware Removal Computer Help Forums Windows Startup Programs Database Spyware and Malware Removal Guides Computer Tutorials Uninstall Database File Database Computer Glossary Computer Resources
 

Welcome Guest ( Log In | Click here to Register a free account now! )



Register a free account to unlock additional features at BleepingComputer.com
Welcome to Bleeping Computer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.
Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

 
Reply to this topicStart new topic
> How To Make A Horizontal Navigation Bar With Link Rollover State Using Xhtml/css
nosnhoj#3
post Jun 16 2006, 08:57 AM
Post #1


Forum Regular
***

Group: Members
Posts: 245
Joined: 27-May 05
From: 127.0.0.1
Member No.: 21,516
How to make a Horizontal Navigation Bar with Link Rollover State using XHTML/CSS



Guide Overview

The purpose of this guide is to show how a horizontal navigation bar with a link "Roll Over" state can be achieved using XHTML/CSS without the use of tables, images, Javascript, or any other scripting manipulation. The following example validates according to W3C standards, and is compatible with all modern browsers.

Instructions
  1. Open up Notepad or your preferred text editor.

  2. Copy and Paste the following code into your text editor of choice.


    CODE
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Horizontal Navigation Bar w/Rollover Effect</title>
    <style type="text/css">
    <!--

    #navbar ul {
        margin: 0;
        padding: 5px;
        list-style-type: none;
        text-align: center;
        background-color: #000;
        }

    #navbar ul li {  
        display: inline;
        }

    #navbar ul li a {
        text-decoration: none;
        padding: .2em 1em;
        color: #fff;
        background-color: #000;
        }

    #navbar ul li a:hover {
        color: #000;
        background-color: #fff;
        }

    -->
    </style>
    </head>
    <body>
    <div id="navbar">
      <ul>
        <li><a href="#">LinkHere</a></li>
        <li><a href="#">LinkHere</a></li>
        <li><a href="#">LinkHere</a></li>
        <li><a href="#">LinkHere</a></li>
        <li><a href="#">LinkHere</a></li>
      </ul>
    </div>
    </body>
    </html>


  3. Click File ---> Save as...
    In Notepad, change the Save as type to All Files. Give your file a name with the extension .html and save it to the directory of your choice.

  4. Now, open the new .html file in your browser to see how it looks.





Breaking down the CSS


#navbar ul {
margin: 0;
padding: 5px; /* Set margin and padding for cross browser consistency. */
list-style-type: none; /* Needed to eliminate list item marker */
text-align: center; /* Centers navigation bar */
background-color: #000; /* Set as desired */
}

#navbar ul li {
display: inline; /* Needed to create horizontal effect */
}

#navbar ul li a {
text-decoration: none; /* The setting of "none" allows the link to not be underlined. This is up to user preference. */
padding: .2em 1em; /* Gives the link space inside it's individual block. */
color: #fff; /* Set as desired */
background-color: #000; /* Set as desired */
}

#navbar ul li a:hover {
color: #000;
background-color: #fff; /* Both of these values create the "Rollover effect, Set as desired */
}


This list as is can be modified to give many different visual results. Try changing the color values, add borders, or adjust padding and margin values.


A look at the XHTML


<body>
<div id="navbar">
<ul>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
<li><a href="#">LinkHere</a></li>
</ul>
</div>
</body>


In place of the "#" symbols shown in the example, are where your links will go, and since each link is in it's own block element, the size of each link and it's rollover effect are determined automatically by the length of the text where "LinkHere" is shown.


--------------------
When I'm right, I'm right....
And when I'm wrong, I could have been right....
So I'm still right, cause I could have been wrong.
Go to the top of the page
 
+Quote Post
« Next Oldest · Programming and Web Design Mini-Guides · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 5th September 2008 - 11:24 AM


Advertise   |   About Us   |   Terms of Use   |   Privacy Policy   |   Contact Us   |   Site Map   |   Chat   |   Tutorials   |   Uninstall List
Discussion Forums   |   The Computer Glossary   |   Resources   |   RSS Feeds   |   Startups   |   The File Database   |   Malware Removal Guides

© 2003-2008 All Rights Reserved Bleeping Computer LLC.

Powered By IP.Board © 2008  IPS, Inc.