In web designing the most important component is Menus. Almost 90% of the web sites we see today contains menus. Now we are going to see how can we make these menus through HTML without using any advanced tools like Adobe Dreamweaver etc..
There are many ways to create menus
1)Using Div's
2) Using Lists
We will see the first one i.e Div which is very flexible
Step-1: Open any html editor or an IDE and write the following html code
<html>
<head>
<title>Menustitle>
<head>
<body>
<div class="Menu">
<div class="MenuItems">
<a href="#">Homea>
</div>
<div class="MenuItems">
<a href="#">Htmla>
</div>
<div class="MenuItems">
<a href="#">Cssa>
</div>
<div class="MenuItems">
<a href="#">JavaScripta>
</div>
<div class="MenuItems">
<a href="#">AJAXa>
</div>
</div>
</body>
</html>
You will see the following output as shown below:
From the above image we can see that the div items are aligned vertically and due to anchor tag's default css properties the text got underlined. Now to remove the underline add the css lines to your code as shown below
a
{
text-decoration:none;
}
which results in the following output:
Now we have to align them horizontally to do this add the css properties to the MenuItems as
.MenuItems
{
width:200px;
height:30px;
vertical-align:middle;
display:table-cell;
text-align:center;
}
which results in the following output:
From the above output we can see that there is a small gap between the border and the MenuItems and also we can use border so make it look more beautiful.
To remove the gap add the css property to the Menu
.Menu
{
position:absolute;
top:0px;
left:0px;
}
To add the border use css border-style and border-width properties as shown below
.Menu
{
position:absolute;
top:0px;
left:20%;
width:60%;
border-style:solid;
border-width:thin;
}
This results as
Almost done we have to add more styling and make it look beautiful, add the following css lines to Menu and MenuItems
.Menu
{
position:absolute;
top:0px;
left:20%;
width:60%;
border-style:solid;
border-width:thin;
}
.MenuItems
{
width:200px;
height:30px;
vertical-align:middle;
display:table-cell;
text-align:center;
background-color:gray;
border-style:solid;
border-top-width:0px;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:thin;
}
see from the above that we are using width as 60% and left as 20% which means that we are aligning the menu towards the center of the screen
And the final thing when we move the mouse over the menu the background color should change so that user know's the response.
To do so as the following css
div.MenuItems:hover
{
background-color:#424242;
}
That's it designing a Menu is as simple as that.
There are many ways to create menus
1)Using Div's
2) Using Lists
We will see the first one i.e Div which is very flexible
Step-1: Open any html editor or an IDE and write the following html code
<html>
<head>
<title>Menustitle>
<head>
<body>
<div class="Menu">
<div class="MenuItems">
<a href="#">Homea>
</div>
<div class="MenuItems">
<a href="#">Htmla>
</div>
<div class="MenuItems">
<a href="#">Cssa>
</div>
<div class="MenuItems">
<a href="#">JavaScripta>
</div>
<div class="MenuItems">
<a href="#">AJAXa>
</div>
</div>
</body>
</html>
You will see the following output as shown below:
From the above image we can see that the div items are aligned vertically and due to anchor tag's default css properties the text got underlined. Now to remove the underline add the css lines to your code as shown below
a
{
text-decoration:none;
}
which results in the following output:
Now we have to align them horizontally to do this add the css properties to the MenuItems as
.MenuItems
{
width:200px;
height:30px;
vertical-align:middle;
display:table-cell;
text-align:center;
}
which results in the following output:
From the above output we can see that there is a small gap between the border and the MenuItems and also we can use border so make it look more beautiful.
To remove the gap add the css property to the Menu
.Menu
{
position:absolute;
top:0px;
left:0px;
}
To add the border use css border-style and border-width properties as shown below
.Menu
{
position:absolute;
top:0px;
left:20%;
width:60%;
border-style:solid;
border-width:thin;
}
This results as
Almost done we have to add more styling and make it look beautiful, add the following css lines to Menu and MenuItems
.Menu
{
position:absolute;
top:0px;
left:20%;
width:60%;
border-style:solid;
border-width:thin;
}
.MenuItems
{
width:200px;
height:30px;
vertical-align:middle;
display:table-cell;
text-align:center;
background-color:gray;
border-style:solid;
border-top-width:0px;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:thin;
}
see from the above that we are using width as 60% and left as 20% which means that we are aligning the menu towards the center of the screen
And the final thing when we move the mouse over the menu the background color should change so that user know's the response.
To do so as the following css
div.MenuItems:hover
{
background-color:#424242;
}
That's it designing a Menu is as simple as that.
2 comments:
very useful....
thanks rehana
Post a Comment