TAGS: CSS | JavaScript | Menu | Dock | ドック | メニュー | jQuery | Interface
jQuery+interface.jsベースのMacOS X風ドックメニューの実装です。



使い方例



1)javascript&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">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->


2)ドック要素定義
<div class="dock" id="dock">
  <div class="dock-container">
      <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> 
      <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> 
      <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
    ...
  </div> 
</div>


3)JavaScriptでドックさせる
<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>


デモはこちら

Sponsored Link


有关作者
Syboos.jp編集長AJavaやオープンソース情報の執筆、Webサイトの開発や運営全般の業務に携わる。

Comments