If we talk about creating menu in HTML is a very simple task
this consist of following steps
Step 1:
First create
the structure of yours page. Like human body is divided in three part (HEAD,
BODY and FOOT) similarly we are going to design ours web page.
<html>
This is the root
element of any html page.
<head>
This is the head portion of yours page
</head>
<body>
This the body of yours page. At this place itself we are going
to put our content.
</body>
<footer>
</footer>
</html>
Step 2:
In step second you have
to decide, what are the items of yours menu. Like HOME, ABOUT US, CONTACT US and
LOGIN. After deciding the menu then we have to prepare the list by using a unordered
list tag <UL>
<ul>
<li> HOME</li>
<li>ABOUT US</li>
<li>CONTACT
US</li>
<li> LOGIN</li>
</ul>
NOTE: place this content in the body portion of
our structure. |
| out put of the above steps |
Step 3:
Now step third is
styling of our list.
Let’s notes the thing
what we want to do. One we want to float the menu items in left direction. Second
we want to remove list style. Third we want to increase the size of text. Forth
we want to change the color of text with some padding and margin.
For all these things we
have to make use of <style> tag which is going to be place in head portion
of our structure.
<style>
ul{
list-style:none; // it
is to remove bullets
}
li{
float:left; // it is to
float the item in left direction
font-size:20px; // it
is to set the size of text inside the list
color:darkgray; // it
to color the text inside the list
padding-left:20px; //
it to provide padding in left
padding-right:20px; //
it to provide padding in right
padding-top:10px; // it
to provide padding in top
padding-bottom:10px; //
it to provide padding in bottom
border-left:1px solid
darkgray; // it to put left border
border-right:1px solid
darkgray; // it to put right border
box-shadow: 0px 1px 1px
1px rgba(0,0,0,0.8); // it is used to provide shadow black color
}
li:hover // this to change the style of list item when
get over through it
{
background-color:royalblue;
// it is to change the background of list item on hover
color:white;
}
Final output
file of the program contain following code
<html>
<head>
<style>
ul{
list-style:none;
over-flow:hidden;
}
li{
float:left;
font-size:20px;
color:darkgray;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom:10px;
border-left:1px solid darkgray;
border-right:1px solid darkgray;
box-shadow: 0px 1px 1px 1px
rgba(0,0,0,0.8);
}
li:hover
{
background-color:royalblue;
color:white;
}
</style>
</head>
<body>
<ul>
<li> HOME</li>
<li>ABOUT US</li>
<li>CONTACT US</li>
<li> LOGIN</li>
</ul>
</body>
</html>
