In the above image vertical icon menu bar or vertical navigation bar is present.This menu bar have zoom in and zoom out effect. That means mouseover event.For developing attractive as well as animated navigation bar we are using HTML and CSS. In this we are using images for menu bar.Below is full code for above navigation bar.
Zoom.html
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body{
background-color:#005a31;
padding-top:100px;
padding-left:50px;
}
.imgzoom img{
height:50px;
width:50px;
-webkit-transition:all 1s ease;
display:inline-block;
padding-left:8px;
padding-top:10px;
}
.imgzoom img:hover{
width:70px;
height:70px;
}
#block{
background-color:#f3fab6;
width:68px;
height:65px;
border-radius:30%;
border:1px black;
}
</style>
</head>
<body>
<div class="imgzoom">
<div id="block">
<a href="link 1"><img src="home.png"></a>
</div>
</div></br>
<div id="block">
<div class="imgzoom">
<a href="link 2"><img src="about.png"></a>
</div>
</div></br>
<div id="block">
<div class="imgzoom">
<a href="link 3"><img src="gallery.png"></a>
</div>
</div></br>
<div id="block">
<div class="imgzoom">
<a href="link 4"><img src="help.png"></a>
</div>
</div></br>
<div id="block">
<div class="imgzoom">
<a href="link 5"><img src="contact.png"></a>
</div>
</div>
</body>
</html>
perfect...it saved my time :)
ReplyDelete