We have been moved to http://www.bloganol.com/

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) }

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

<script type="text/javascript">
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
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>

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>


5 Responses to "CSS Dock Menu"
balbinodearaujo said...
October 11, 2008 at 8:54 PM

Hi!Deinesh, Very good hack. The installation is too easy.
But, It must have some error! The imagens is too great e static.
Balbino de Araujo

dinan said...
April 12, 2009 at 2:19 PM

look like nice blog, btw how to resize the pic, in my blog to large, pls tell me

thank be4

Wailshire said...
May 4, 2009 at 11:31 AM

thanks this is to good, but I need to customize it
to other img and links

henry J said...
September 1, 2009 at 2:56 AM

hi friend its not working in my blog http://blogdir360.blogspot.com/

pls give me solution. thanks in advance.

KAT said...
September 12, 2009 at 2:26 AM

how to add new html page and paste the code

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!