ドック型メニュー

説明補足説明コード分割コードコメント投稿

このサンプルは、jQueryとスタイルシートを使用してドック型のメニューを表示します。マウスをイメージに移動するとイメージがドックから飛び出します。マウスをイメージから遠ざけるドックに収まります。

このサンプルは、jQueryとスタイルシートを使用してドック型のメニューを表示します。マウスをイメージに移動するとイメージがドックから飛び出します。マウスをイメージから遠ざけるドックに収まります。

ドック型のメニューは、div要素にanchor要素を配置して表示します。アンカーテキストはspan要素で囲みます。 このサンプルで使用しているスタイルシート、JSファイル、イメージは、 ここ からダウンロードしてください。 

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