jQuery OSX Looking Dock
June 15th, 2010
I am very interested of what jQuery can do and the plugins there is keeps impressing me. I saw the world cup site Twitter did and at the top they were using some kind of dock with the flags of the teams. When I and Henrik Porseland were coding whatisxv.com we wanted a dock with students but the time ran out and we forgot about it.
But now I found jqDock! It’s very easy to use and i will show a very simple example here. You can do both horizontal and vertical dock menus and custom the looks of it very very easy. As I said before I wanted a dock menu with all the students in my class.
This is how I did it:
First of all to use this wonderful plugin you need jQuery v1.2.3 or later. And then you can download the plugin here.
Start with link the files in your <head> tag. Link in the jqDock source (full or compressed) after jQuery itself as in the example below:
<script type='text/javascript' src='jquery-1.2.3.min.js'></script> <script type='text/javascript' src='jquery.jqDock.js'></script>
Create a div and put an ID or Class on it. Then fill it with images that you want in your dock menu. In my example:
<div id="dockmenu"> ... <a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a> <a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a> <a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a> ... </div>
To convert your HTML into a Dock, simply call the jqDock function.
<script type="text/javascript">
$(document).ready(function($) {
$('#dockmenu').jqDock({align:'bottom', size:65, labels:true});
});
</script>
This code will make the menu expand from the bottom and up and every picture will have a label on it. You can see it in my example.
It’s very easy to style your dock menu as well. Here is the CSS for my menu:
div.jqDockWrap{margin:0 auto;}
div.jqDockLabel {color:#fff;background:#000; font-family:Myriad Pro; padding:4px;
font-size:11px;font-weight:normal;margin-top:-25px!important;white-space:nowrap;}
div.jqDockLabel a, a:hover, a:visited{color:#FFF; text-decoration:none;}
#dockmenu{clear:both;display:block;width:100%;position:absolute;text-align:center;
left:0; bottom:0px;}
#dockmenu img{padding:1px;float:left;display:block;}
Good Luck creating your own dock menu with jqDock!
February 9, 2011
URL
I’m Glad i came across this web site.Added theodesign.se to my bookmark!