I've come across the CSS Mac Dock Menu that utilizes jQuery. However, I have not been able to make it work on Thematic. I've integrated the CSS into my style sheet and placed the js into the scripts folder. I don't know what I am doing wrong or need to do in order to make this work.
http://www.ndesign-studio.com/blog/mac/css-dock-menu
I've placed this code into the header.php
<script type="text/javascript" src="<?php echo get_bloginfo('template_directory'); ?>/library/scripts/jquery.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_directory'); ?>/library/scripts/interface.js"></script>
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(<?php echo get_bloginfo('template_directory'); ?>/iepngfix.htc) }
</style>
<![endif]-->
and this is my code:
<div class="dock" id="dock2">
<div class="dock-container2">
<span>RSS</span><img src="<?php echo get_bloginfo('template_directory'); ?>/images/rss.png"alt="RSS" />
<span>Twitter</span><img src="<?php echo get_bloginfo('template_directory'); ?>/images/twitter.png" alt="Twitter" />
<span>Facebook</span><img src="<?php echo get_bloginfo('template_directory'); ?>/images/facebook.png" alt="Facebook" />
</div>
</div>
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
