Second article of day in which i'am going to teach you how to create a jquery elastic menu for blogger and all html docs. Feeling damn sleepy because of not sleeping all night from over 8-9 months and doing blogging and crappy things over the internet all night so i'am going to finish this so quick.
- Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :
- Just above ]]></b:skin> paste following CSS :
/* The container which the menu is "locked" to the bottom of */
#menuwrapper{ position:relative; height:210px; }
/* Fixes the whole menu to the bottom of the parent div */
#menu{position:absolute; bottom:0;}
/* Each individual menu item fixed to the bottom with display:inline-block to create elasticity */
.menuitem{ position:fixed relative; bottom:0px; display:inline-block; }
- Now search for </head> and just above it paste following script :
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menuitem img').animate({width: 100}, 0); //Set all menu items to smaller size
$('.menuitem').mouseover(function(){ //When mouse over menu item
gridimage = $(this).find('img'); //Define target as a variable
gridimage.stop().animate({width: 200}, 150); //Animate image expanding to original size
}).mouseout(function(){ //When mouse no longer over menu item
gridimage.stop().animate({width: 100}, 150); //Animate image back to smaller size
});
});
</script>
- Now Go To Layout > Add A Gadget > HTML/JavaScript > Paste following HTML :
<div id="menuwrapper">
<div id="menu">
<a href="#" class="menuitem"><img src="Image1"></a><!--Template for each menu item-->
<a href="#" class="menuitem"><img src="Image2"></a>
<a href="#" class="menuitem"><img src="Image3"></a>
<a href="#" class="menuitem"><img src="Image4"></a>
<a href="#" class="menuitem"><img src="Image5"></a>
</div>
</div>
Now replace # with you links and Image 1/2/3/4/5 with your image url and just like this you can add as many images as you want....if this widget is not working then check if there is any other CSS in your template with same class and delete it.
