苹果风格的菜单 - CSS Dock Menu - Joomla中文交流平台,Joomla AutoIt!, Joomla SEO,joomla模板,joomla问题

	苹果风格的菜单 - CSS Dock Menu
	Author: Autoit \| Date:2007-12-16 \| View: 32813 \| Digg: 80

效果如下图

CSS Dock Menu

方法：在要用的页面里插入下面js+css ( 注意路径)

 <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

 <link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
 <style type="text/css">
 div, img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

然后在 <body> 标签里插入：

 <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>

菜单为：

<div class="dock" id="dock2">
  <div class="dock-container2">
 
  <a class="dock-item2" href="http://www.autoit.cn/#"><span>首页</span><img src="images/home.png" alt="home" /></a> 
  <a class="dock-item2" href="http://www.autoit.cn/#"><span>联系</span><img src="images/email.png" alt="contact" /></a> 
 
  </div>
</div>

这样，就是如图效果的菜单了。

如果需要菜单名字在下面的话，在<body>标签里插入的要替换为：

<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>

菜单为：

<div class="dock" id="dock">
  <div class="dock-container">
 
  <a class="dock-item" href="http://www.autoit.cn/#"><span>首页</span><img src="images/home.png" alt="home" /></a> 
  <a class="dock-item" href="http://www.autoit.cn/#"><span>联系</span><img src="images/email.png" alt="contact" /></a>   
  </div>
</div>