Create Css Dock Menu Like Macintosh
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)
0 comments:
Post a Comment