Object Dock Navigation Tutorial

here...another tutorial for your blog guys ^^
as the title above, you can tell ...am i right?..yes, this is the tutorial to create object dock navigation :),ah if u dont know it's ok...just see the screenshot above this Tutorial ,nah...you can tell now ,right ^^ .I am already using this trick too ,so...you can see the live preview for this tutorial.

Actually my previous post already using this too ,yeah "The DotA Allstars Template"...because of that ,few visitors want to know how i create this navigation.So...to answer that question i will tell you how to create it with this post

Here I come!!!! :D
First Found this Code


Paste this Css Code above that code

» Click to show CSS Code - click again to hide... «

/* Object Dock Nav */
.dock {

position: relative;

height: 50px;

text-align: center;

}

.dock-container {

position: absolute;

height: 50px;

background: url(http://i191.photobucket.com/albums/z269/ziegey/BGDock.png);

padding-left: 20px;

}

a.dock-item {

display: block;

width: 40px;

color: #FFFFFF;

position: absolute;

top: 0px;

text-align: center;

text-decoration: none;

font: bold 12px Arial, Helvetica, sans-serif;

}

.dock-item img {

border: none;

margin: 5px 10px 0px;

width: 100%;

}

.dock-item span {

display: none;

padding-left: 20px;

}

next...paste this code below this

<script src='http://www.geocities.com/ziegey_clonesphare/jquery.js' type='text/javascript'/>
<script src='http://www.geocities.com/ziegey_clonesphare/interface.js' type='text/javascript'/>

NOTE:you see jquery.js and interface.js URL right?? I suggest you download that file and reupload to your filehosting ,because im not responsible if that file removed from my account

ok next
here the last script .paste this below

» Click to show Script - click again to hide... «

<div class='dock' id='dock'>

<div class='dock-container'>

<a class='dock-item' href='#'><img alt='home' src='http://i191.photobucket.com/albums/z269/ziegey/home-1.png'/><span>Home</span></a>

<a class='dock-item' href='#'><img alt='contact' src='http://i191.photobucket.com/albums/z269/ziegey/email-1.png'/><span>Contact</span></a>

<a class='dock-item' href='#'><img alt='portfolio' src='http://i191.photobucket.com/albums/z269/ziegey/portfolio.png'/><span>Portfolio</span></a>

<a class='dock-item' href='#'><img alt='music' src='http://i191.photobucket.com/albums/z269/ziegey/music.png'/><span>Music</span></a>

<a class='dock-item' href='#'><img alt='video' src='http://i191.photobucket.com/albums/z269/ziegey/video.png'/><span>Video</span></a>

<a class='dock-item' href='#'><img alt='history' src='http://i191.photobucket.com/albums/z269/ziegey/history.png'/><span>History</span></a>

<a class='dock-item' href='#'><img alt='calendar' src='http://i191.photobucket.com/albums/z269/ziegey/calendar.png'/><span>Calendar</span></a>

<a class='dock-item' href='#'><img alt='rss' src='http://i191.photobucket.com/albums/z269/ziegey/rss.png'/><span>RSS</span></a>

<a class='dock-item' href='#'><img alt='rss' src='http://i191.photobucket.com/albums/z269/ziegey/rss.png'/><span>RSS</span></a>

<a class='dock-item' href='#'><img alt='rss' src='http://i191.photobucket.com/albums/z269/ziegey/rss2.png'/><span>RSS2</span></a>

</div>

</div>

<script type='text/javascript'>



$(document).ready(

function()

{

$(&#39;#dock&#39;).Fisheye(

{

maxWidth: 50,

items: &#39;a&#39;,

itemsText: &#39;span&#39;,

container: &#39;.dock-container&#39;,

itemWidth: 40,

proximity: 90,

halign : &#39;center&#39;

}

)

}

);

</script>

you can modify that script on your own ,you can change # for the URL,Images ,and dock labels
Ok Thats all...see you again in the other tutorial ^^

Thx to
http://www.andrewsellick.com

Tags: Tips & Tricks, Tutorial, Blogger, Navigation, Html, Javascript, Css