css-menu-using-unordered-list-

In web programming beauty in design has become an essential requirement. Technically you may have built a great site but it if does not look good, you do not get deserved appreciation and reward. so in addition to learning great web programming tricks you should also spend some time to create beautiful designs. You must have seen fancy looking menus in websites. These menu can be designed and programmed in JavaScript, DHTML and HTML.

Some tools are also available to create eye-catching menu on the fly. Whatever method is used, CSS is core requirement to all these.Without CSS things would have been complex. In web programming CSS is used in a number of ways to create standard navigation menus for web applications. List markups are one way of doing this. Unordered List element is the correct choice in this sense, with each destination link is defined by an individual list item. This approach provides great flexibility allowing navigation menu either vertical or horizontal.

This article provides basic guide on css menu.Menu which are designed using power of CSS are known as CSS Menu. To create a verticle navigation CSS menu, let’s start with a simple unordered list. Throughout this article this HTML will be used to design the CSS menu.

<ul>
<li><a href=’#’>Home<a/></li>
<li><a href=’#’>Company Profile</a></li>
<li><a href=’#’>Departments<a/></li>
<li><a href=’#’>Services<a/></li>
<li><a href=’#’>Future Plan<a/></li>
<li><a href=’#’>About Us<a/></li>
</ul>
Corresponding CSS is defined as
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
padding:0;
}
This CSS ensures that we are working with blank canvas. No default spacing, padding or margin which creates confusion. At this stage our menu will look like under

css_menu_a

Now next step is to convert these list items into buttons. This done by following CSS, also padding is now adjusted to allow some space around the text. Add the lines in bold to previous CSS rules.

ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
background: #DDD;
margin: 0;
padding: 2px 10px;
border-left: 1px solid #fff;
border-top: 1px solid #fff;
border-right: 1px solid #666;
border-bottom: 1px solid #aaa;
}

After applying above CSS our menu gets some shape and loos like under.
css_menu_b

Next Step is to define the width of buttons. As list item have been converted into buttons so width is adjusted with the help of UL selector. Add line in bold to earlier CSS rules.

ul {
list-style-type:none;
margin:0;
padding:0;
width:160px;
}

After this step our CSS menu is complete and look like under, You customize it by adding more css to refine the text styles or font size.
css_menu_c

In some sites when you place your mouse at menu it changes its color, this can be done by using a:hover in CSS.

Comments are closed.