HTML, CSS codes for horizontal menu.

workteam_ua posted this at 07:46 — 21st May 2008.

They have: 1 posts

Joined: May 2008

I am sorry I am new in web design field and developing my web site using Dreamweaver, could you provide me with examples of horizontal menu - HTML and CSS codes. Thanks in advance.

www.hostingcoupons.com

Megan posted this at 13:28 — 21st May 2008.

She has: 11,421 posts

Joined: Jun 1999

Alright, we'll start with a list:

<ul id="navbar">
      <li><a href="index.html">Home</a></li>
      <li><a href="aboutus.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="pricing.html">Pricing</a></li>
      <li><a href="contactus.html">Contact Us</a></li>
</ul>

That's what a navigation menu is - a list. Now we'll add some CSS.

First we need to take out any margins and padding and the list bullets:

ul#navbar {
 margin: 0;
 padding: 0;
 list-style: none;
 }

Next, let's make the list items float next to each other:

ul#navbar li {
 float: left;
 display: block;
 padding: .5em 0;
 }

They're all bumping into each other so we should add some padding. I'm going to do this on the link tags, not the list items - you'll see why in a minute:

 ul#navbar li a {
  padding: 6px 10px;
  }

Next, let's add some colour:

ul#navbar {
 margin: 0;
 padding: 0;
 list-style: none;
 background: #ccc;
 }
 
ul#navbar li {
 float: left;
 display: block;
 padding: .5em 0;
 }
 
 ul#navbar li a {
  padding: .5em 10px;
  background: #ccc;
  color: #009;
  text-decoration: none;
  }

Next, we'll put some hovers on those nav items:

ul#navbar li a:hover, ul#navbar li a:active {
  background: #99CCCC;
  color: #333;
  }

The only thing left to do is make that grey bar stretch all the way across the page:

ul#navbar {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #ccc;
	height: 2.25em;
} 

If you're really having trouble I can put it all together for you, but you should at least try to work with the code first.

Megan
Connect with us on Facebook!

webwiz posted this at 19:40 — 21st May 2008.

He has: 629 posts

Joined: May 2007

Also look at Listutorial - step by step instructions for all kinds of menus. See tutorial 4 for horizontal lists.