How to create a menu in pure CSS? And why?

Final Preview How to create a menu in pure CSS? And why?

Now-a-days web designing has totally changed from old Heavy Html pages to Xhtml and css combinations. Which are very attractive and accessible to every user no matter what ever media they uses to browse the web like mobile phones, PDA’S, screen readers, TV etc which are part of the changing world.

Building an accessible web site is a holistic endeavor. In order to provide easy access to various information on each page multiple factors are to be considered. One of the important thing among them is the navigation menu. For this following universally recognized standards in web design and construction is very important. This ensures that the widest possible variety of devices will be able to read your website — now and in the future. Navigation menu is the important and the key factor which enables the site user to move within your pages. My priority on design will be to design a css menu compatible with all browsers.

One trend in menu design is to create menus in tabular form — that is, menu items that look like the tabs at the top of paper files.

This method of creating menus is popular for a couple of reasons:

The structure is very good example in the case of accessible navigation.
The structure more closely resembles the menus found in most computer applications.
The structure is created from components that don’t lose their visual meaning if the styling is not present.
The structure is very light and loads faster than flash and traditional rollover menus

The importance of the first reason is very significant. Because when accessibility is there in the menu any model of browsers and tools can be used for browsing the web site. Which will be a very easy task for the user.

The importance of the second reason should be apparent — after years of revolutionary changes in web development, we can start to emulate the rest of the computer world by putting distinct blocks across the top of a page.

The third reason makes more sense when you consider what most tabular menus are constructed of unnumbered list command. Because every menu and submenu in Css is created by using lists or list elements

Eg:

<ul>
<li><a href="/">Home</a></li>
<li><a href="/news.php">News</a></li>
<li><a href="/bio.php">Biography</a></li>
</ul>

Use of list elements in their construction makes a lot of sense; and, of course, if a list is broken down into its base components due to the absence of fancy styles, it retains its meaning and hierarchy which is a plus.

The fourth reason is the one of the main reason which attract more designers and developers into it, is the simplicity and the ability to deliver a fast result which loads in no time compared to old rollover and flash buttons which were more heavier than this.

And one more thing, a list menu means a vertical navigation in orientation which can be displayed horizontally using the display property and setting it to in-line effectively takes a block element and at the end become an in-line one. I have given a very useful code below for making a menu for your own use. Please click the blue line" The code that generates this menu is as follows:"for viewing the code. Hope this will be a very useful peace of tool for you.

Code Html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Tabbed Menus</title>
</head>

<body>
<p>
<ul>
<li class="menu"><a href="#">BUSINESS</a></li>
<li class="menu"><a href="#">PARTNERS</a></li>
<li class="menu"><a href="#" class="active">AWARDS</a></li>
<li class="menu"><a href="#">SERVICES</a></li>
<li class="menu"><a href="#">BENEFITS</a></li>
</ul>
</p>
</body>
</html>

Code Css :

li.menu {
display: inline;}
li.menu a {
background-image: url(’images/tab.gif’);
width: 108px;
text-align: center;
float: left;}
li.menu a:hover {
background-image: url(’images/tabhover.gif’);
font-weight: bold;}
li.menu a.active {
border-bottom: none;}