This is an awesome
navigation menu with an unique and eye-catching design, operated by the
famous JavaScript framework, ...
detail at
JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place CSS below in your HEAD section
CSS
Code:
<link rel='stylesheet' href='slider.css' type='text/css' />
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script src="mootools-12-core.js" type="text/javascript"></script>
<script src="mootools-12-more.js" type="text/javascript"></script>
<script src="dock.js" type="text/javascript"></script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="stage-container">
<p class="text">
<img src="text.gif" alt="image" width="111" height="24" />
</p> <br clear="all"/>
<a href="#" id="moveleft">Left</a>
<a href="#" id="moveright">Right</a>
<div id="wrapper">
<ul id="items">
<li><a><img class="icon" src="1.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="2.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="3.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="4.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="5.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="10.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="6.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="7.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="8.png" alt="image" width="32" height="32" /></a></li>
<li><a><img class="icon" src="9.png" alt="image" width="32" height="32" /></a></li>
</ul>
</div>
</div>
Step 4: downloads
Files
1.png
10.png
2.png
3.png
4.png
5.png
6.png
7.png
8.png
9.png
dock.js
left.gif
mootools-12-core.js
mootools-12-more.js
right.gif
slider.css
stage2.jpg
text.gif
