Horizontal Navigation Menu

Category:

Have you ever try Dock Menu in computer Macintosh? Or you have been looked it? If not yet no problem, such as the image below example layout of icon Dock Menu. Dock menu such as in computer MAC will show icon effect with (Aquos) style, we will see the size change when the mouse goes to that menu.



Ndesign-studio.com is one of sites that provide open source to Css Dock Menu. From all example of coding Dock Menu the easiest from this service is practice it. For sample of layout you can see here. Actually in this sites have already learned as short the tutorial. But it will be better if I explain more.

Follow the step to installing Dock menu : :


1. Download first file CSS dock menu zip package.


2. Then Unzip that file first.


3. At folder JS there 2 file JavaScript (interface.js and jquery.js) and at folder images you will found image file, please upload all file to each host directory (I save the file at Pages.google.com), If finish please open more folder css-dock-menu, repeat more such as the step before by upload file iepngfix.htc and style.css
 


4. Until here upload process finish, the next step how to installing in blogger



How to embedded on blogger:


1. Enter to Edit HTML menu, search code <head> and put this script under that one:


<head>
<script src='http://oom.blog.googlepages.com/jquery.js' type='text/javascript'/>
<script src='http://oom.blog.googlepages.com/interface.js' type='text/javascript'/>
<link href='http://oom.blog.googlepages.com/style.css' rel='stylesheet' type='text/css'/>


For pink color above please satisfied it based on each path directory.


2. Still at Edit HTML page, search code </body> then put this file on code </body> such as below:


<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

</body>
</html>



The last step just installing process menu. This Dock menu can you put at wherever area , can in blogger page element or edit HTML page. To make it easy you ca install it this example code below.


<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
</div>


Red color above is goal link pink color above please makes it suitable with each path directory.

For professional programming of course will easier, you can change by yours code css and JavaScript or that image based on your need. Because this tutorial for new user so I explain whatever there. Please improve by yours okay. Thanks (Agusramadhani.com)
 

Add your comment