-->

Friday, August 28, 2015

Creating CSS horizontal menu


Introduction


Menu is very important part of web design. you can create beautiful menu using CSS and HTML codes. It is common practice to create - horizontal menus or vertical menus.

Horizontal menu is aligned on top of the web page, so we cannot add more items to the menu. If we want to add more items, then creating a sub-menu is best practice.


Basically, menus are list items displayed horizontally or vertically and then we add some style to the menu items.



HTML Code


First we need to create a simple page with HTML and then we can create a css file and then link the file to HTML page. I have given the code for HTML below and then following code links the external css file to the HTML document.



<link rel=”stylesheet” href=”style.css” type=”text/css”/>


HTML codes for Horizontal Menu

In the above code, we have defined the navigation lists using unordered list (<ul>). So there are two lists
there are two lists.
  1. Main horizontal menu
  2. Sub-menu
  "<ul class="NAV">" defines the main horizontal menu and 


<li> item-1 

            <ul class="SUBMENU">
                        <li> Sub item-1</li>
                        <li> Sub Item-2</li>
            </ul>
</li>

Then the "<ul class="SUBMENU">" defines the sub-menu items.

The "<div class="container">" is the class which contains the whole menu items in the HTML codes.
Save the HTML page as Menu.HTML and then we can write the css code to style the menu the way we want.


CSS codes 


We can write the css codes with in the HTML document between <style> and </style> tags. If we have lot of css style information it is better to create a new css file and link the file to HTML documents.

Let us discuss the css codes now.


.nav, .subnav 
{
list-style-type: none;
}

The list-style-type above will remove the bullet points from the list items successfully. We will next style the list items in the following code.


.nav li
{
background: black;
color: white;
float: left;
padding: 10px;
font-family: Arial;
margin: 2px;
width: 120px;
text-align: center;
border-radius: 5px;
 }

 Now the "float: left" will make the list spread horizontally. But there is a problem with this approach. The sub-menu items also floats to the left.


.subnav li 
{
float: none;
background: firebrick;
}

The above code defines the sub-menu list and background color. Notice that we have
disabled the floating sub-menu using code "float: none". But we want the sub-menu appear as a drop-down list.

Here is what it looks like now.



CSS Horizontal Menu




Now we do not want our sub-menu to keep displaying continuously, that would be odd. We need to hide the sub-menu and only let it appear when we hover main menu items.


.subnav
{
display: none;
}

The above code will hide the sub-menu list. If we want to make sure that it appears when you highlight the main menu items. Write the following codes


.nav li:hover .subnav 
{
display: block;
position: absolute;
}

This above code will display the sub-menu items as a block level item and with absolute positioning the item appears in its original position.




CSS Code for Horizontal Menu


Complete Code for CSS Horizontal Menu





<html>
<head><title> CSS Horizontal Menu</title>
<style type="text/css">
.nav, .subnav {

list-style-type: none;

}
.nav li {
background: black;
color: white;
float: left;
padding: 10px;
font-family: Arial;
margin: 2px;
width: 120px;
text-align: center;
border-radius: 5px;

}
.subnav li {
float: none;
background: firebrick;

}

.subnav {

display: none;
}

.nav li: hover .subnav {

display: block;
position: absolute;
transition: 5s ease-in;
transition-delay: 1s;
}
</style>
</head>
<body>
<h1>HORIZONTAL MENU CSS</h1>
<hr/>
<div class="container">

<ul class="nav">
 <li>Item-1
         <ul class="subnav">
                                                <li>One</li>
                                                <li>Two</li>
                                                <li>Three</li>
                                                <li>Four</li>
                                </ul>
</li>
<li> Item-2
                                <ul class="subnav">
                                                <li>Blue</li>
                                                <li>Red</li>
                                                <li>Yellow</li>
                                                <li>Silver</li>
                                </ul></li>
</ul>
</div>
</body>
</html>



Conclusion


There are more complex ways to create Horizontal menus using css and html codes. But in its simplest form, we know how you can create a Horizontal Menu.Complex codes can includes JavaScript or jQuery or other style elements.

No comments:

Post a Comment