In this tutorial we are going to create Kite Shape menu using HTML CSS and JavaScript. using this method you can create different shape menu as per your interest basic requirement is image you need to set. lets start step by step.
Step 1: Create or download image you want here we are going to use kite image as shown
Step 2: open image with Microsoft picture manager and create two different images using picture-> Color option create Black and White image for above picture as shown in picture
Using This Tool create black and white image and colorful image
Step 3: create a HTML page paste kitemenu.html following code in body tag
<body>
<center>
<table height="190" width="56%">
<td background="Kite.jpg" width="18%">
<a href="home.html"> Home</a>
</td>
<td background="Kite.jpg" width="18%">
<a href="galary.html">Gallary </a>
</td>
<td background="Kite.jpg" width="18%">
<a href="aboutus.html">
About Us
</a>
</center>
</td>
<td background="Kite.jpg" width="18%">
<a href="contactus.html"> Contact Us<</a>
</td>
</table>
</body>
Step 4: write CSS Class or Copy paste following CSS code to to <head> tag
<style type="text/css">
a{
font-weight:bold;
color:yellow;
font-size:25px;
}
td{ text-align:center; }
td:hover,td:active
{ background-image:url('kite5.jpg');
}
</style>
complete code is
_____________________________________________
<html>
<head>
<title>IMS</title>
<style type="text/css">
a{
font-weight:bold;
color:yellow;
font-size:25px;
}
td{
text-align:center;
}
td:hover,td:active
{
background-image:url('kite5.jpg');
}
</style>
</head>
<body>
<center>
<table height="190" width="56%">
<td background="Kite.jpg" width="18%">
<a href="home.html">
Home</a>
</td>
<td background="Kite.jpg" width="18%">
<a href="galary.html">
Galary
</a>
</center>
</td>
<td background="Kite.jpg" width="18%">
<a href="aboutus.html">
About Us
</a>
</center>
</td>
<td background="Kite.jpg" width="18%">
<a href="contactus.html">
Contact Us<</a>
</center></td>
</table>
Design By:
<br>
Sayali Bhore MCA Student IMSCDR, Ahmednagar
</body>
</html>
_________________________________________________________
You can down lode the complete HTML CSS Template source code with example on following link
Design By:
Sayali Bhore MCA Student IMSCDR, Ahmednagar
Template Design During HTML5 CSS3 Sesson
click to Download HTML5 CSS3 Kite Template source code with example
Step 1: Create or download image you want here we are going to use kite image as shown
Using This Tool create black and white image and colorful image
Step 3: create a HTML page paste kitemenu.html following code in body tag
<body>
<center>
<table height="190" width="56%">
<td background="Kite.jpg" width="18%">
<a href="home.html"> Home</a>
</td>
<td background="Kite.jpg" width="18%">
<a href="galary.html">Gallary </a>
</td>
<td background="Kite.jpg" width="18%">
<a href="aboutus.html">
About Us
</a>
</center>
</td>
<td background="Kite.jpg" width="18%">
<a href="contactus.html"> Contact Us<</a>
</td>
</table>
</body>
Step 4: write CSS Class or Copy paste following CSS code to to <head> tag
<style type="text/css">
a{
font-weight:bold;
color:yellow;
font-size:25px;
}
td{ text-align:center; }
td:hover,td:active
{ background-image:url('kite5.jpg');
}
</style>
complete code is
_____________________________________________
<html>
<head>
<title>IMS</title>
<style type="text/css">
a{
font-weight:bold;
color:yellow;
font-size:25px;
}
td{
text-align:center;
}
td:hover,td:active
{
background-image:url('kite5.jpg');
}
</style>
</head>
<body>
<center>
<table height="190" width="56%">
<td background="Kite.jpg" width="18%">
<a href="home.html">
Home</a>
</td>
<td background="Kite.jpg" width="18%">
<a href="galary.html">
Galary
</a>
</center>
</td>
<td background="Kite.jpg" width="18%">
<a href="aboutus.html">
About Us
</a>
</center>
</td>
<td background="Kite.jpg" width="18%">
<a href="contactus.html">
Contact Us<</a>
</center></td>
</table>
Design By:
<br>
Sayali Bhore MCA Student IMSCDR, Ahmednagar
</body>
</html>
_________________________________________________________
You can down lode the complete HTML CSS Template source code with example on following link
Design By:
Sayali Bhore MCA Student IMSCDR, Ahmednagar
Template Design During HTML5 CSS3 Sesson
click to Download HTML5 CSS3 Kite Template source code with example