Total Pageviews

Thursday, March 19, 2015

HTML css book style menu

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







 2nd image i need to put on Mouse hover 

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

________________________________

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

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 

________________________________

Popular Posts

Follow by Email