CSS Dock Menu

This is the greatest CSS menu you have ever seen . It is originally created by ndesign-studio and modified by bloganol for the easy of the bloggers. In this menu whenever you haver the image the image comes front and becomes bigger.See the Demo Below.

Demo:Hover the image with your mouse pointer.



In the above demo you will see two menu . The top menu is called top dock and Bottom menu is called the Bottom Dock.Now lets start the installation of this dock menu.

First of all goto Blogger EditHtml Page and Insert the Following Code to the Head section of your Template just above ]]></b:skin> Tag.

<script type="text/javascript" src="http://bloganol3.googlepages.com/jquery.js"></script>
<script type="text/javascript" src="http://bloganol3.googlepages.com/interface.js"></script>
<link href="http://bloganol3.googlepages.com/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>

<style type="text/css">
.dock img { behavior: url(http://bloganol3.googlepages.com/iepngfix.htc) }
</style>
<![endif]–> 

Again insert the following Code Just Below ]]></b:skin> Tag of your Template.

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

Now the time comes to select Top Duck Menu or Bottom Duck Menu . If you like to use The Top Duck menu then Copy the Following Code and Paste it to Your Blog by adding a new Html Page.

Top Dock Menu

 <div class="dock-container">
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/home.png" alt="home" /><span>Home</span></a> 
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/email.png" alt="contact" /><span>Contact</span></a> 
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/music.png" alt="music" /><span>Music</span></a> 
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/video.png" alt="video" /><span>Video</span></a> 
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/history.png" alt="history" /><span>History</span></a> 
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/link.png" alt="rss" /><span>Links</span></a>
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss.png" alt="rss" /><span>RSS</span></a> 
<a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss2.png" alt="rss" /><span>RSS2</span></a>
</div> 

Or If you like to use Bottom Dock menu then Copy the Following Code and Paste it to Your Blog by adding a new Html Page.

Bottom Dock Menu

 <div class="dock-container2">
<a class="dock-item2" href="#"><span>Home</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/home.png" alt="home" /></a> 
<a class="dock-item2" href="#"><span>Contact</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/email.png" alt="contact" /></a> 
<a class="dock-item2" href="#"><span>Portfolio</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/portfolio.png" alt="portfolio" /></a> 
<a class="dock-item2" href="#"><span>Music</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/music.png" alt="music" /></a> 
<a class="dock-item2" href="#"><span>Video</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/video.png" alt="video" /></a> 
<a class="dock-item2" href="#"><span>History</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/history.png" alt="history" /></a> 
<a class="dock-item2" href="#"><span>Calendar</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/calendar.png" alt="calendar" /></a> 
<a class="dock-item2" href="#"><span>Links</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/link.png" alt="links" /></a> 
<a class="dock-item2" href="#"><span>RSS</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss.png" alt="rss" /></a> 
<a class="dock-item2" href="#"><span>RSS2</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss2.png" alt="rss" /></a> 
</div>