To write the script, you could use any html css editor software but don’t forget to save the file with .HTML extension. Here I have used Notepad++ to write the script.
Step 1: Open any HTML editor and write HTML script in ul-li order without any CSS script and save the file with .html extension.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Horizontal CSS Menu Bar</title>
<body>
<ul id=”menu”>
<li><a href=”#”>Link1</a></li>
<li><a href=”#”>Link2</a>
<ul>
<li><a href=”#”>Link2.1</a></li>
<li><a href=”#”>Link2.2</a></li>
<li><a href=”#”>Link2.3</a></li>
</ul>
</li>
<li><a href=”#”>Link3</a>
<ul>
<li><a href=”#”>Link3.1</a></li>
<li><a href=”#”>Link3.2</a></li>
</ul></li>
<li><a href=”#”>Link4</a></li>
</ul>
</body>
</html>
Now if you open this html page in any browser, it looks like below, without any formatting. Next we will add CSS script to organize menus horizontally.
Step 2: Here we will write CSS script inside html file. This type of css script is called internal css and another one is external. In external css, we write script in a separate file, save it as .css and include that file in the html page. The benefit of using external css is reusability, one css file can be used for more than one webpage. To make it simple, we have added internal CSS. To add internal css, create a ‘Style’ tag under HEAD section of HTML and write the css script inside <style> block. First we shall add few basic css tags to set width, height, background color.
<style>
/* Main */
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
}
</style>
After adding CSS:
Step 3: Now add curve corner to give it a beautiful looks. To do this, use css command border-radius. set it to 50px.
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
border-radius: 50px;
}
After adding CSS:
It looks better, right! well, once we complete css script, it will look good.
Step 4: Now give a nice floating looks where all ‘li’ elements will be in one line and all ‘ul’ elements will be below that line.
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative; }
After adding CSS:
Step 5: Set properties for ‘A’ (hover) tag like color, text decoration, font
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #CC6600;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000; }
After adding CSS:
Step 6: Add one more property to change the color once you keep the mouse on those links
#menu li:hover > a{
color: #CC3333; }
Step 7: Now add two css blocks for ‘ul’ items. First block will hide all ‘ul’ items, also set display properties like color, padding, position. Second block is to display all ‘ul’ items once we hover the ‘li’ items.
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
background: #222; }
#menu li:hover > ul{
display: block; }
After adding CSS:
Step 8: Set padding to 0, margin 0 for all items to make look and feel better
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block; }
Step 9: Set properties for all ‘a’ items which come under ‘ul’ tag
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none; }
Step 9: Now add few more lines to improve visual effects, set the proper size for the black background, display of all elements
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: ” “;
clear: both;
height: 0; }
After adding CSS:
That’s all. We have successfully created the horizontal CSS menu bar. Now we will add few more lines to give our css menu bar more professional look.
Additional Step 1: To display a pointer under the hover link, add the below script
#menu ul li:first-child a:after{
content: ”;
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #FF0000;
}
After adding CSS:
Additional Step 2: Set border-radius property to 5px under ‘#menu ul’ element which will give small carve for all ul tags
border-radius: 5px;
After adding CSS:
Isn’t it nice!!! simple to create but great in looks. We could add many more properties to give it more professional looks. But as it is our first horizontal menu bar, don’t want to make it complex. We will discuss all other properties in subsequent articles.
If you have any doubt or question, feel free to ask us. To get more updates on recent activities, follow ‘TechOneStop’ on Facebook/Twitter/LinkedIn or join our website as followers.
How to create vertical menu bar using HTML and CSS>>
thank you
Nice information about the menubars code in one place..