Lets start:
Step 1: – Create a HTML Document in your favourite Editor
<!DOCTYPE html>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nowstartwebdesign.com- How to create a simple navigation
menu</title>
</head>
<body>
</body>
Step 2: – Create a Unordered List inside like below code
<body>
<ul>
<li>Home</li>
<li>Tutorilas</li>
<li>Downloads</li>
<li>Portfolio</li>
</ul>
</body>Step 3: – Now add <a> tag, which means will going to the specified pages.what ever you insert link.
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorilas</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Portfolio</a></li>
</ul>Step 4: – Now we are going to css. Use of the <style> element inside <head> </head> like below code
<head>
<style>
<style>
</style>
</head>
</head>
The List Items to be horizontal – write this ‘float: left’ property. Remove the block dots – write this ‘list-style-type: none’ property.
So let’s add this CSS to the inside <style> </style>
<style>
ul {
margin: 20px 10px;
}
ul li {
float: left;
list-style-type: none;
}
</style>Step 5: – This is final step
Remove the underline – write this ‘text-decoration: none’ property.
Add some padding to give the buttons volume -‘padding: 10px 20px’
Add a background colour – with ‘background: # DB0000′
Add a font colour – with ‘color: white’
Change the display to ‘block’ so that the entire <a> is clickable, not just the text (It seems like this only needed for IE6 and IE7)- with ‘display: block’
Change the type of font used – with ‘font-family: Arial, Helvetica, sans-serif’
ul li a
{
background: #115D87;
color: white;
display: block;
font-family: Arial, Helvetica, sans-serif;
padding: 10px 20px;
text-decoration: none;
}
ul li a:hover {
background: #168AC9;
}Click Here Demo Download
No comments :
Post a Comment