Fisheyeメニューの「CSS Dock Menu」を設置してみた

Fisheyeメニューを表示するスクリプト一覧ということで色々紹介しましたがそのなかでもこれは非常に設置しやすそうだったので試しに設置してみました。



htmlは比較的シンプルで下記のjavascriptをいじると画像の大きさや広がり具合を調節できます。外部ファイルはjavascript2つとCSS1つとなっています。
<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> 
  <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> 
  <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> 
  <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> 
  <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
  <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a> 
  </div>
  </div>
  <script type="text/javascript">
  
  $(document).ready(
    function()
      {
        $('#dock').Fisheye(
          {
             maxWidth: 50,  //広がったときの画像の大きさ
             items: 'a',
             itemsText: 'span',
             container: '.dock-container',
             itemWidth: 40,  //最初の画像の大きさ
             proximity: 90,  //画像が広がり具合
             halign : 'center'  //全体の表示位置「left」「right」
          }
          )
       }
    );
</script>
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加