In today tutorial i will teach you how to create a simple and fantastic horizontal meu with related icons.
Lets start the beginning
First of all we have to create the html, Copy & Paste the below code in your <head> tag of your html file:
<div id="horizontalmenu"> <div class="link"><a><img src="home.png" border="0" alt="" vspace="0" width="16" height="16" align="absbottom" /> home</a></div> <div class="link"><a><img src="contact.png" border="0" alt="" vspace="0" width="16" height="16" align="absbottom" /> contact</a></div> <div class="link"><a><img src="forum.png" border="0" alt="" vspace="0" width="16" height="16" align="absbottom" /> forums</a></div> <div class="link"><a><img src="advertise.png" border="0" alt="" vspace="0" width="16" height="16" align="absbottom" /> advertise</a></div> <div class="link"><a><img src="download.png" border="0" alt="" vspace="0" width="16" height="16" align="absbottom" /> download</a></div> <div class="link"><a><img src="rss.png" border="0" alt="" vspace="0" width="16" height="16" align="absbottom" /> rss feeds</a></div> </div>
Icons Used
Right Click on below icons and save to your computer
Creating the Css
Okay, now we are doing to add margin to the <div id=”horizontalmenu”> div, Copy and Paste the below code in your <head> tag of your html file, or paste it in your .css file.
#horizontalmenu{
margin:10px;
}
Styling the Menu Links
Ok now lets style menu each links, add the following css:
#horizontalmenu .link a{
float:left;
padding:8px;
background-color:#eeeeee;
display:block;
margin-right:9px;
text-decoration:none;
-webkit-border-radius:7px;
-moz-border-radius:7px;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
color:#666;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
}
text-shadow: This is used for adding a drop down shadow under text.
float: left: This is used for making the menu horizontal.
Some browser doesn’t support rounded corners borders, so we used “-webkit-border” and “-moz-border-radius” for multiple browser support, so in the above code “-webkit-border” is used for WebKit equivalent, and“-moz-border-radius” is used for Mozilla equivalent…
When Mouse Rollover
When the mouse is rollover the menu, then change the background color, add the following css:
#horizontalmenu .link a:hover{
background-color:#e3e3e3;
text-shadow:1px 1px 1px #fff;
}
and that’s it we are finished!
Putting all css Together
#horizontalmenu{
margin:10px;
}
#horizontalmenu .link a{
float:left;
padding:8px;
background-color:#eeeeee;
display:block;
margin-right:9px;
text-decoration:none;
-webkit-border-radius:7px;
-moz-border-radius:7px;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
color:#666;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
}
#horizontalmenu .link a:hover{
background-color:#e3e3e3;
text-shadow:1px 1px 1px #fff;
}
Demo Available
Click here to view the live demo