Latest tutorial: Making a Movieclip face another Movieclip or point on the stage | Ask Tutorial5!
 

Simple CSS vertical menus
(31 votes)
Written by SPIRI   
css vertical menus
The above image is a screen shot of the menus.

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

Download the HTML and CSS menu files.


Our menus are actually HTML unordered list elements <ul> styled using CSS, giving them background color, margin, padding and other CSS attributives.

The process of creating this menus can be separated in two main directives:

The HTML file

Create the HTML document containing main directives like HTML HEAD BODY and also including your menu mock up made up with a list like this example:

<div id="menu1">
<ul>
<li><a href="item-one.html" id="current">Menu item one</a></li>
<li><a href="menu-item-two.html">Menu item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

What the above code those is it creates a box element entitled a DIV identified by its ID="menu" witch in turn contains an unordered list <ul> of elements <li>.
Every list element is considered a menu item that contains a link to a page on your website <a href="contact.html">Contact</a>.

The CSS styling

Now that we have our basic HTML file containing our menu we need to style that menu so it can fit with our website.

This is the CSS code used for styling the first menu:

In this portion we style the main DIV containing the menu, everything that represents our menu resides in this box.
For the purpose of this tutorial we are floating the menus left so they can stay aligned next to each other.

#menu1 {
width: 200px;
float:left;
}


In this portion we style the actual list, containing the list items. This is the place were we decide on our font-type, size, margin, padding and of course the list style. We are using list-style-type:none; so our list items wont display anything in front of them.

#menu1 ul
{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}


In this portion we apply a CSS property to our List elements that makes our menu look the same on Internet Explorer and other browsers.

#menu1 li
{
display: inline;
/* for IE5 and IE6 */
}


In this portion we style the LINK that is reside inside the list element. The reason we are not styling the LI element is that by styling the LINK (a href) we can make the clickable menu area spread along the whole list element, using display: block;

#menu1 a
{
color: #fff;
text-decoration: none;
font-size: 14px;
display: block;
padding: 3px;
width: 160px;
background-color: #686C7A;
border-bottom: 1px solid #eee;
}


In this portion we style visited and active state of our links (menu items, a href).

#menu1 a:link, #menu1 a:visited
{
color: #EEE;
text-decoration: none;
}


In this portion we style the hover state of our links (menu items). The attributes we use here are applied to the a menu item when we move our mouse cursor over it.

#menu1 a:hover
{
background-color: #00BEE4;
color: #fff;
}


In this portion we style the current state of our link (menu item). If we click the Contact menu item (link) and are now browsing the contact page, we need our menu to always highlight the page we are currently browsing. This attributes are applied to the a href containing the additional id="current"
<a href="item-one.html" id="current">

#menu1 li a#current
{
border-bottom: 3px solid #DAD6B7;
background: #00BEE4;
}

All you need to do now is append the desired CSS styling to your own website CSS files and insert the HTML menu code in your HTML files.


  • Install Photoshop on Ubuntu Linux
    Believe it or not Photoshop CS2 is now fully supported on Ubuntu Linux using Wine. For a long period of time I was eager in switching to Ubuntu but the incompatibility of my most used Windows based applications always made me switch back to Linux. No more Windows based Photoshop skills, now you can powerup Photoshop on Ubuntu.
  • Google AdSense with Allowed Sites
    google logoEvery AdSense Publisher had nightmares when hearing of all the horror stories where people get banned from AdSense because someone else used their AdSense code on malicious sites, breaking the Google AdSense TOS.
    This all ended when Google decided to listen to the community and build the Allowed Sites feature.
  • PHP Forms
    php-logo.jpgIn this tutorial you will learn the basics of working with forms using only one php file.
  • Adding a bump to a photo in Photoshop
    bump-photo-thumb.jpgIn this Photoshop tutorial you are going to learn how to add a bump to a photo increasing its artistic effect and making it more realistic.
  • Search engine friendly post slug URLs
    php-logo.jpgIn this PHP tutorial you are going to learn how the famous post slugs are created and how you can create your own post-slug function for your web applications.

Subscribe now via RSS feed and get all the new tutorials

written by Bev , December 28, 2007

This is good except you have one error in your code....the style uses menu1 so the html needs to be
written by SPIRI , January 16, 2008

Thank you Bev, all fixed now.
You can also check out our new tutorial on Creating a horizontal CSS menu
written by Parth , March 01, 2008

How do can u create verical boxes on a website?
I am new to html so idk where to start.
written by asdasd , May 07, 2008

as fas fdsa fasd
written by Web Designer , June 22, 2008

Is theres a PHP active menu tutorial?
written by tedd , August 07, 2008

how i build my own web [page with this .css code and html code
written by Toner Dolumu, kartu?, toner, fax, fotokopi, , August 26, 2008

Toner Dolumu, Kartu? Dolumu, kartu?, toner, fax, fotokopi, büro makinalar?, kartu? dolum, toner dolum, teknik servis, ofis makinalar?, sarf malzeme
written by Paris , August 26, 2008

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

Do you need more help? Ask now!
 

busy
Last Updated ( Wednesday, 16 January 2008 )