Jump to content


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, 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.

Photo
- - - - -

How To Make A Horizontal Navigation Bar With Link Rollover State Using Xhtml/css


  • Please log in to reply
8 replies to this topic

#1 nosnhoj#3

nosnhoj#3

  • Members
  • 245 posts
  • OFFLINE
  •  
  • Location:127.0.0.1
  • Local time:11:25 PM

Posted 16 June 2006 - 08:57 AM

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
  • Open up Notepad or your preferred text editor.

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


    <!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>


  • 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.

  • 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.

BC AdBot (Login to Remove)

 


#2 P3T3R

P3T3R

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:01:25 AM

Posted 19 November 2008 - 08:53 PM

How do you change the size of the navigation bar, say to 1000px?

#3 nigglesnush85

nigglesnush85

  • Members
  • 4,371 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:UK
  • Local time:06:25 AM

Posted 20 November 2008 - 07:55 AM

Looks good. Thanks for sharing :thumbsup:
Regards,

Alan.

#4 MrIndianTeen

MrIndianTeen

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:10:25 PM

Posted 20 June 2011 - 04:37 PM

How do you increase the size of the font?

#5 jack.bettam

jack.bettam

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Gender:Male
  • Local time:06:25 AM

Posted 22 December 2011 - 06:00 AM

How do you increase the size of the font?

You can do this by adding the
<font>
code, this can be done like this:
<!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>Your Webpage</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> 
<font size="3" face="verdana" color="blue">
<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>
If you cant be bothered to read the above its this:
<font size="3" face="verdana" color="blue">
This means anything below this code is in size 3 Verdanna in blue.
Hope it helps :)

#6 Xander360tips

Xander360tips

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:01:25 AM

Posted 23 January 2012 - 10:50 PM

Is there a way to use this code in a drop-down navigation bar? I've been trying to do this for quite some time now and I can't figure it out. I love the horizontal layout, I just want some of the links to have a drop-down menu attached to them to make my site easier to navigate, and so that some of the links are hidden until you hover over it's category link in the navigation menu. Please help me if you can. Thanks!

#7 heistheyare

heistheyare

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:01:25 AM

Posted 04 March 2012 - 05:22 AM

Hi: Thanks for posting this it helped me out alot! I was wondering though, I made the position of this nav bar fixed so that it would stay on top.. but I'm getting a gap between the top of my nav bar and the browser window-- do you know how I can get rid of this gap? Thanks!
here's my css(same but with position fixed)

#navbar ul {
margin: 0;
padding: 0px;
list-style-type: none;
background-color: #fff;
position:fixed;
}

#navbar ul li {
display: inline;
}

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

a:active {
color: #C00;
}
.links {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
color: #666;
margin: 3px;
padding-right: 3px;
padding-left: 3px;
text-decoration: none;
text-transform: none;
}

Edited by heistheyare, 04 March 2012 - 05:28 AM.


#8 TinaBina22

TinaBina22

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:01:25 AM

Posted 29 July 2012 - 05:53 PM

I have been trying to set up a horizontal menu bar for about 5 days now, to no avail. I came across this forum in searching google for the answer. When I first read through the post I thought woo hoo I finally found it but... When trying to set it up my bar itself is horizontal but the wording (buttons) are still vertical :( Can someone please tell me what I am doing wrong? I would include a link but it's on my computer itself not on the web yet. I could always copy and paste what I have set up if that would help.

#9 janddy81

janddy81

  • Members
  • 1 posts
  • OFFLINE
  •  
  • Local time:01:25 AM

Posted 24 November 2012 - 10:00 AM

The code looks great an was bery easy to implement. I'm tyring to go one more step and highlight the "current" page. Can you please provide the code for how to do that?




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users