Design Menu With CSS - Simple Projects with Source Code

1. Designing the Menu (Vertical) with CSS

To design the menu with CSS we need a list of menus created with HTML. HTML tags are used to create the menu is ul. Below is the HTML code of the menu will be designed by CSS.

<ul>

</li> <li><a href="services.html">Services</a></li>

<li><a href="support.html">Suport</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

The code will produce the following display:

Home
Services
Support
About Us
Contact Us

To design the menu we have to give id beforehand to differentiate with ul list to another, so the code above into the following:

<li><a href="services.html">Services</a></li>

<li><a href="support.html">Suport</a></li>

<li><a href="about.html">About Us</a></li>

<li><a href="contact.html">Contact Us</a></li>

</ul>

After the given id, we can choose the menu with CSS and start designing. CSS code is as follows:

With the code above, the menu will not show the bullet (with code list-style-type: none), boundaries and padding will be 0, width 180px, and will display the background color of chocolate. More or less looks like this:

After that we will design each menu item, which is the tag of these items is <li> </ li>. In addition to the li tag, we also will design <a> tag </ a> (link) so that the area can be clicked to be larger (not just its text alone, but the whole box).

We need to add the CSS code to design it again. Her CSS code is as follows:

# nav li {

margin: 0;

padding: 0;

}

# nav a {display: block; / * Click to enlarge the area as a default inline tags

* /

color: # FFF;

text-decoration: none; padding: 0 15px;

line-height: 2.5; border-bottom: 1px solid # FFF;

}

With the code, the display menu will be as follows:

2. Designing the Menu (Horizontal) with CSS

Vertical menu with horizontal differences are:
• The width is much wider than the vertical menu
• The text is in the middle
• Each element is on the other elements, not under other elements.

To design a horizontal menu, we just stayed modify some of the menus Vertical CSS code. Code that must be modified is
• We need to change the width of the ul element because it is not needed anymore 100%
• Element does not require a display: block, since it would in-float
• Because we make the text be in the middle, the right and left padding can be removed
• Border also be changed from the bottom right

Code be modified as follows:

#nav {

margin: 0;

padding: 0;

background: #663300;

list-style-type: none;

float: left; /* Contain floated list items */

}

#nav li

{

margin: 0;

padding: 0;