jQuery の jqDock プラグインで作る Mac OS X 風ドックメニュー。下揃え水平タイプ。
メニュー画像を、横に並べたドックメニュー。メニュー画像に、マウスのカーソルを合わせると、そのメニュー画像が大きくなるが、その時、大きくなった画像と、小さいままの画像とを、下で揃える。
jqDock プラグインの入手方法については、こちら。
実装例（サンプル）
実装例（サンプル）の動作について
それぞれのメニュー画像に、マウスのカーソルを合わせると、そのメニュー画像が大きくなる。例えば、「BLOG」のメニュー画像に、マウスのカーソルを合わせると、「BLOG」のメニュー画像が大きくなる。その際、下は揃えたままで、上へ向かって大きくなる。
実装例（サンプル）のソースコード
読み込み
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery/plugin/jqDock/jquery.jqDock.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: 'bottom'
}
);
});
// -->
</script>
<!--
$( function() {
$( '#jquery-plugin-jqDock' ) . jqDock(
{
align: 'bottom'
}
);
});
// -->
</script>
CSS
<style type="text/css">
<!--
div#jquery-plugin-jqDock {
margin-top: 35px;
}
-->
</style>
<!--
div#jquery-plugin-jqDock {
margin-top: 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>
<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>
画像ファイルへのパスは、それぞれ、アップロードした場所を指定する。