jQuery の jqDock による上揃え水平タイプのドックメニュー

jQuery の jqDock プラグインで作る Mac OS X 風ドックメニュー。上揃え水平タイプ。
メニュー画像を、横に並べたドックメニュー。メニュー画像に、マウスのカーソルを合わせると、そのメニュー画像が大きくなるが、その時、大きくなった画像と、小さいままの画像とを、上で揃える。
jqDock プラグインの入手方法については、こちら

実装例(サンプル)

home blog about mail bbs link

実装例(サンプル)の動作について

それぞれのメニュー画像に、マウスのカーソルを合わせると、そのメニュー画像が大きくなる。例えば、「BLOG」のメニュー画像に、マウスのカーソルを合わせると、「BLOG」のメニュー画像が大きくなる。その際、上は揃えたままで、下へ向かって大きくなる。

実装例(サンプル)のソースコード

読み込み

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

jquery.js と jquery.jqDock.js を読み込む。
ファイルへのパスは、それぞれ、アップロードした場所を指定する。

JavaScript

<script type="text/javascript">
<!--
$( function() {
    $( '#jquery-plugin-jqDock' ) . jqDock(
        {
            align: 'top'
        }
    );
});
// -->
</script>

CSS

<style type="text/css">
<!--
div#jquery-plugin-jqDock {
    margin-bottom: 35px;
}
-->
</style>

重ならないように、マージンを入れたが、重なっても構わない場合は、マージンを指定する必要はない。

HTML

<div id="jquery-plugin-jqDock">
    <a href="#"><img src="img/jqDock_home_70.png" title="home" alt="home" /></a>
    <a href="#"><img src="img/jqDock_blog_70.png" title="blog" alt="blog" /></a>
    <a href="#"><img src="img/jqDock_about_70.png" title="about" alt="about" /></a>
    <a href="#"><img src="img/jqDock_mail_70.png" title="mail" alt="mail" /></a>
    <a href="#"><img src="img/jqDock_bbs_70.png" title="bbs" alt="bbs" /></a>
    <a href="#"><img src="img/jqDock_link_70.png" title="link" alt="link" /></a>
</div>

画像ファイルへのパスは、それぞれ、アップロードした場所を指定する。

スポンサード リンク

カテゴリー: JavaScript, jqDock, jQuery, プラグイン, メニュー パーマリンク