To create a HTML Menu in HTML File, you just follows the below given steps :
1. Open a text Editor and type the following css code in it.
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
#main
{
padding: 30px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
color: #034af3;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
Now save the above file with the name 'site1.css'
2. Now open text editor one more time and type the following code.
<head>
<title></title>
<link href="site1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<h1>Hello</h1>
</div>
<ul id="menu">
<li><a href="try_webpages_cs_013.asp">Home</a></li>
<li><a href="try_webpages_cs_014.asp">About</a></li>
</ul>
<div id="main">
<h1>Welcome to Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
<p>© 2012 W3Schools. All rights reserved.</p>
</div>
</body>
</html>
and save the above file as 'menubar.html'
3. Now when you run the menubar.html file in browser then this file is look like as follows :
To illustrate this i have given an example which is as follows :
Menu with HTML
No comments:
Post a Comment
Note: only a member of this blog may post a comment.