How to Create Menu with SubMenu using CSS/HTML
This article will cover the creating of a CSS menu using the HTML Div tags. It will demonstrate the functionality by giving some examples on to play with different types of menus.
Introduction:
This tutorial will deal with menu designing in CSS. You know that one of the most important parts of website is navigation menu, which is very decorative and interactive section of page. At the end of this tutorial you will be able to create interactive navigation menu.
We will start menu designing by creating a container using a div box. My div box will contain id of navigation. A navigation menu always requires Standard HTML as a basic tool for menu designing. In following script we will use a div tag, <ul> and <li> tags and create menu options.
Following listed script will display simple vertical menu with sub menu, which compile the basic idea of menu designing.
Listing 1: Script of Vertical Menu and Submenu
|
<html>
<head>
<title>Example of HTML Menu</title>
</head>
<body>
<div id="navigation">
<ul> <li><a href="#">News</a>
<ul> <li>National News</li> <li>International News</li> <li>Sports News </li> <li>Hollywood news</li> </ul>
</li>
<li>
<a href="#">Technology</a>
<ul> <li>IT/Software </li> <li>Hardware</li> <li>Iphone</li> <li>Neuro-Science</li> </ul>
</li>
<li>
<a href="#">Sports</a>
<ul> <li>Cricket</li> <li>Tenis</li> <li>Badminton</li> <li>Hockey</li> </ul>
</li>
<li>
<a href="#">Contry</a>
<ul> <li>India</li> <li>Shree lanka </li> <li>Bangaladesh</li> <li>England</li> </ul>
</li>
</ul>
</div>
</body>
</html>
|
Figure 1: Above figure is simple menu with submenu created by div tag which contains four main menu and 16 submenu (4 submenu for each main menu) and we have used standard HTML as a baseline. In this example we can remove bullets and the margins and padding from the list.
Horizontal Menu:
Following section contains the description of linear menu (horizontal menu). Where the “li” elements will be displayed as inline elements, this forces the list to be in one line. The “ul” element has a full width and each hyperlink in the list has a width of 7px. Also we have added some colors to make it interactive
Listing 2: Script of Horizontal Menu and Submenu
|
<!DOCTYPE html>
<html>
<head>
<title>Example of HTML Menu</title>
<style type="text/css">
ul
{
list-style-type:none;
margin:1;
padding:1;
padding-top:7px;
padding-bottom:5px;
}
li
{
display:inline;
}
a:link,a:visited
{
font-weight:bold;
color:#CC3DD;
background-color:#90EE90;
text-align:center;
padding:6px;
text-decoration:italic;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#FF1493;
}
</style>
</head>
<body>
<ul>
<li><a href="#News">News</a></li>
<li><a href="#Technology">Technology</a></li>
<li><a href="#Sports">Sports</a></li>
<li><a href="#Country">Country</a></li>
<li><a href="#Video">Video</a></li>
<li><a href="#Download">Download</a></li>
</ul>
</body>
</html>
|
Figure 2: Above figure is simple menu items in horizontal way.
Submenu/Dropdown Menu in horizontal Main Menu:
This section will explain the drop down menu or submenu in horizontal Menu. In modern interactive web designing, drop down menus appear very frequently. After entry of CSS higher version, it became possible to create similar effects using standard HTML technologies, a significant number of people who have difficulty with hand control or eye blindness can use a keyboard or other text device for accessing drop down menu. Listed script will compile the idea of dropdown menu in horizontal way.
Listing 3: Script to Sub Menu/Dropdown Menu
|
<html>
<head>
<title>Example of HTML Menu</title>
<style type="text/css" media="screen">
#horizontalmenu ul {
padding:1; margin:1; list-style:none;
}
#horizontalmenu li {
float:left; position:relative; padding-right:100; display:block;
border:4px solid #CC55FF;
border-style:inset;
}
#horizontalmenu li ul {
display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
display:block;
background:red;
height:auto; width:8em;
}
#horizontalmenu li ul li{
clear:both;
border-style:none;}
</style>
</head>
<body>
<div id="horizontalmenu">
<ul> <li><a href="#">News</a>
<ul> <li><a href="#">National</a></li> <li><a href="#">International</a></li> <li><a href="#">Sport</a></li> <li><a href="#">Hollybood</a></li> </ul>
</li>
<li>
<a href="#">Technology</a>
<ul> <li><a href="#">IT/Software</a></li> <li><a href="#">Hardware</a></li> <li><a href="#">Iphone</a></li> <li><a href="#">Neuro-Science</a></li> </ul>
</li>
<li>
<a href="#">Sports</a>
<ul> <li><a href="#">Cricket</a></li> <li><a href="#">Tenis</a></li> <li><a href="#">Badminton</a></li> <li><a href="#">Hockey</a></li> </ul>
</li>
<li>
<a href="#">Country</a>
<ul> <li><a href="#">India</a></li> <li><a href="#">America</a></li> <li><a href="#">France</a></li> <li><a href="#">Pakistaan</a></li> </ul>
</li>
</ul>
</div>
</body>
</html>
|
Figure 3: Menu done
Conclusion:
This tutorial cover the basic knowledge of CSS menus. We have seen three kinds of menus including submenus. Go through the examples given with this tutorial and let us know your queries at mrbool site. We will answer as soon as possible.
No comments:
Post a Comment