CSS Horizontal Menu (3)

Again this menu uses a background 1px image with a slight gradient for affect. Whats slightly different this time is I have an extra image the floats under each menu item depending on the page you are on. This is just a small triangular image. Both images are attached below the code.

In the body tag of each page you have to include which page you are on. For example, on the hompeage it would be body class="Home", on the contact page body class="contact" and so on..

CSS
#menubar {width:750px;margin: auto;background:url(../images/menu_shade.jpg) repeat-x left top;}
ul#menu { color:fff; font-size:14px;margin: auto; overflow:hidden; list-style:none; font-family:Helvetica, Arial, sans-serif;}
ul#menu li { float:left;margin:0 4px; height:29px; padding:6px 5px 5px 5px; }

ul#menu li a:link,
ul#menu li a:visited { text-decoration:none; font-weight:bold; color:#ffffff; }
ul#menu li a:hover,
ul#menu li a:focus { text-decoration:none; color:#363636;}

body.Home ul#menu li.Home,
body.About ul#menu li.About,
body.Qualifications ul#menu li.Qualifications,
body.Testimonials ul#menu li.Testimonials,
body.Contact ul#menu li.Contact { background:url(../images/nav_cur_bg_red.jpg) no-repeat center bottom; }

body.Home ul#menu li.Home a,
body.About ul#menu li.About a,
body.Qualifications ul#menu li.Qualifications a,
body.Testimonials ul#menu li.Testimonials a,
body.Contact ul#menu li.Contact a { color:#fff; }

HTML:
<div id="menubar">
<ul id="menu">
<li class="Home"><a href="index.html">Home</a></li>
<li class="About"><a href="about.html">About Us</a></li>
<li class="Qualifications"><a href="qualifications.html">Qualifications</a></li>
<li class="Testimonials"><a href="testimonials.html">Testimonials</a></li>
<li class="Contact"><a href="contact.html">Contact Us</a></li>
</ul>
</div>

CSS Horizontal Menu (2)

Using the same color scheme as CSS Horizontal Menu (1), I have decided to make a couple of changes. The first menu only had an under line as a mouse over action, this time we change the background of the menu.
Also, I have made this menu rounded and with a blue border, the last one had straight line borders.

Instead of a 1 px background 2 tone image as a background set to run across the width of the page, I have made the background, complete with border, 1 long image, and set this length to the width allocated for it in the page.

Other than that you'll see the code is quite similar to the previous menu.

Here is the css:
/* Menu */
#menu {height:31px;background:url(../images/background_menu.jpg) no-repeat;
width:760px;clear: both;}
#menu ul {list-style:none;}
#menu li {height:31px;display:block;float:left;
background:url(../images/submenu_divider.jpg) no-repeat right top;z-index:20;}
#menu li a {
font-family:Geneva, Arial, Helvetica, sans-serif;color:#266181;text-decoration:none;
font-size:12px;font-weight:bold;padding:8px 30px 6px 30px;display:block;}
#menu li a:hover {border-top:1px solid #6591ac;
background:#f8f8f8 url(../images/submenu_divider.gif) no-repeat right top;
padding:7px 30px 6px 30px;}

HTML:
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="mission.html">Mission</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="services.html">Services/Fees</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

CSS Horizontal Menu (1)

Whoa, I've been busy lately so this is my first post in 2 months. I'll put up a couple of horizontal menus I used recently on a few different websites.

This menu is css driven - by a unordered list (as most menus will be on this blog). I use images for background sometimes, but making sure that adding a new menu item at a later date is adding 1 line to the list, instead of having to create on/off images.

There are two images used for
a) the shaded background
b) the item divider,

Here is the css, html and the images are included too.

/** Horizontal Menu **/
#menu {display:block;width:975px;margin:auto; }
#menu ul {list-style:none;background:url(../images/background_menu.jpg) repeat-x;
height:35px;margin:0;padding:0 0 0 10px;font-size:15px;}
#menu ul li {margin-top:2px;float:left;padding:3px 15px 0 15px;background:url(../images/menu_divider.jpg) no-repeat right top;}
#menu ul li a{text-decoration:none;color:#171a29;}
#menu ul li a:hover{text-decoration:underline;}

HTML:
<div id="menu">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Events</a></li>
<li><a href="">Advertising</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Directions</a></li>
</ul>
</div>

Images