CSS Tutorial Rollover Menu

When creating a website some designers will use Flash elements for their navigation area, firstly it’s aesthetically pleasing and looks impressive to any new visitor to your website, but in reality the search engines cannot “as yet” read Flash files so struggle to index your website in their rankings.

Flash is used to create a personal website like to display your own portfolio/diary to your friends and close ones, but for a business who is attempting to reach a worldwide audience a Flash navigation is a no go area for the aforementioned reason.

Search engines require clarification on your websites content and what information your site offers, this is vital for the engine to index your pages, by having a CSS rollover menu the search engine will obtain the information required by reading the links in the HTML.

With CSS menus we can create a navigation menu that is just as appealing and easy on the eye, the benefits of this are the CSS menu will be made up of CSS to style the menu and HTML for the links.

CSS Navigation Menu

HTML is one of the oldest and most trusted methods of mark-up language on the internet and what most search engines were initially set up to read, not to mention over 90 % of websites have HTML coding in their source code. The result is the CSS menu allows you the best of both worlds, you have a nice appealing navigation area and your website will be indexed by all the search engines.

Below we will place the code for our CSS navigation menu, along with the HTML for our links, a demo can be seen below.


Navigation Menu CSS


#nav
{
padding:0;
}
#nav li
{
display:inline;
}
#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #ff0000;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#ccc;
border-bottom-style:solid;
}
#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:0000FF;
border-bottom-style:solid;
margin:-1px;
}


Navigation Meuu HTML


Now we are required to create the links for our navigation menu, this should be placed in your HTML; where you want the links to appear.

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


CSS Meuu Demo



CSS Menu Tips

CSS Menus are split into four sections.

  • Single Level Menus

  • Dropdown Menus

  • Dropline Menus

  • Flyout Menus

css menu

comments powered by Disqus