HTML CSS Menu ,
HTML CSS Book menu ,
HTML CSS Menu with HOVER ,
Create HTML CSS Attractive menu ,
HTML CSS Menu Step By Step,
HTML ,PHP, JSP,ASP.net, ASP
HTML CSS Menu with Different Background image ,
Create HTML, PHP, JSP,ASP.net, ASP CSS Attractive menu,
PHP, JSP,ASP.net, ASP Menu Tutorial Step By Step
________________________________
HTML CSS Tutorial how to create Menu with different background image,
In this tutorial i am going to explain how to create Book style menu .
by using this tutorial you can create your own style menu like coffee cup menu for hotel or restaurant or hotel, flower shape menu for decorators website
in previous two tutorial we have created Kite menu, drop down menu, horizontal menu, HTML menu with rounded corner ,menu with different design even you can create menu using logo of website
in this tutorial i am going to explain HTML css menu Step by Step.
following is example i want to create website for book seller and want some innovative so i decide to design menu as shown
To Create menu you need two images
1st Image Background will display when your page lode in browser
You can save as above image by click and save as method
Step1:
create new HTML document copy paste following code in body tag___________________________________
<body><header id="header">
<h1>BookMenu</h1>
</header>
<nav id="nav">
<table>
<td background="book.jpg" height="160" width="150"><a href="http://html5css3sourcecode.blogspot.in">English</a></td>
<td background="book.jpg" height="160" width="150"><a href="http://html5css3sourcecode.blogspot.in">Hindi</a></td>
<td background="book.jpg" height="160" width="150"><a href="http://html5css3sourcecode.blogspot.in">Marathi</a></td>
<td background="book.jpg" height="160" width="150"><a href="http://html5css3sourcecode.blogspot.in">Science</a></td>
</table>
</nav>
</body>
___________________________________
Step3: Copy Paste following code in your html head section try to understand each property
___________________________________
<style>
#header{
text-align:center;
color:purple;
font-size:20px;
height:80px;
}
#nav
{
float:left;
margin-left:150px;
margin-right:80px;
width:800px;
height:80px;
padding:5px;
clear:both;
}
#nav ul {
float:left;
margin:0px;
text-decoration:none;
padding:7px 0 0 0;
text-decoration:none;
text-align:center;
}
#nav ul a{
float:left;
text-align:center;
text-decoration:none;
padding:0 25px 0 0;
color:purple;
font-size:16px;
}
td:hover,td:active
{
background-image:url('book1.jpg');
}
</style>
</head>
___________________________________ Or Save following Code using .html
___________________________________<!DOCTYPE html>
<html>
<head>
<title>BookMenu</title>
<style>
#header{
text-align:center;
color:purple;
font-size:20px;
height:80px;
}
#nav
{
float:left;
margin-left:150px;
margin-right:80px;
width:800px;
height:80px;
padding:5px;
clear:both;
}
#nav ul {
float:left;
margin:0px;
text-decoration:none;
padding:7px 0 0 0;
text-decoration:none;
text-align:center;
}
#nav ul a{
float:left;
text-align:center;
text-decoration:none;
padding:0 25px 0 0;
color:purple;
font-size:16px;
}
td:hover,td:active
{
background-image:url('book1.jpg');
}
</style>
</head>
</head>
<body>
<header id="header">
<h1>BookMenu</h1>
</header>
<nav id="nav">
<ul>
<table>
<td background="book.jpg" height="160" width="150"><a href="http://html5css3sourcecode.blogspot.in">English</a></td>
<td background="book.jpg" height="160" width="150"><a href="http://html5css3sourcecode.blogspot.in">Hindi</a></td>
<td background="book.jpg" height="160" width="150"><a href="http://html5css3sourcecode.blogspot.in">Marathi</a></td>
<td background="book.jpg" height="160" width="150"><a href="http://html5css3sourcecode.blogspot.in">Science</a></td>
</table>
</ul>
</nav>
</body>
</html>
___________________________________
you can download template click below link
Download html css template for Book shop
Design By :Pallavi Raccha (MCA II )IMSCDR, Ahmednagar
HTML5 CSS3 Session