Theo Stråhlén » plugin http://theodesign.se The blog and portfolio of Theo Stråhlén. Currently a student at Hyper Island. Thu, 27 Jan 2011 21:05:24 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery OSX Looking Dock http://theodesign.se/jquery-osx-looking-dock/ http://theodesign.se/jquery-osx-looking-dock/#comments Tue, 15 Jun 2010 10:55:18 +0000 theo http://theodesign.se/?p=129 Continue reading →]]>

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.

Take a look a the Demo I did

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!

]]> http://theodesign.se/jquery-osx-looking-dock/feed/ 4