Jump to content

Navigation Bar.


Sniffy
 Share

Recommended Posts

Hey people, I desperately need to know how to make a navigation bar so I have an organized way for users to move around my site. I'm new to the world of web design and just need a basic example please.

Link to comment
Share on other sites

I've read all of the html tutorials and just started getting into CSS that's why I need more help, but I just need a fully written example of a basic navigation bar that I can look at and learn off of.

Link to comment
Share on other sites

HTML CODE<div id="button"><ul> <li><a href="#">Home</a></li> <li><a href="#">Hidden Cameras</a></li> <li><a href="#">CCTV Cameras</a></li> <li><a href="#">Employee Theft</a></li> <li><a href="#">Helpful Hints</a></li> <li><a href="#">F.A.Q</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li></ul></div>CSS CODE#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }Thats straight of the link i gave earlier.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...