jQuery の jqDock プラグインで作る Mac OS X 風ドックメニューは、size オプションを設定することにより、最初に表示するメニュー画像の大きさを指定できる。
初期設定値は、「48」。
jqDock プラグインの入手方法や、他のオプションについては、こちら。
実装例（サンプル）
48（デフォルト）
60
35
32
24
実装例（サンプル）の動作について
メニュー画像にマウスのカーソルを合わせると、メニュー画像の元のサイズである 70px に拡大する。
実装例（サンプル）のソースコード
読み込み
<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(
{
size: '48'
}
);
});
// -->
</script>
<!--
$( function() {
$( '#jquery-plugin-jqDock' ) . jqDock(
{
size: '48'
}
);
});
// -->
</script>
48 の数値の部分が、カーソルにメニュー画像が反応する距離。この数値を、35 や 32 などに変更することで、最初に表示するサイズを指定できる。
CSS
<style type="text/css">
<!--
div#jquery-plugin-jqDock {
margin-top: 22px;
}
-->
</style>
<!--
div#jquery-plugin-jqDock {
margin-top: 22px;
}
-->
</style>
重ならないように、マージンを入れたが、重なっても構わない場合は、マージンを指定する必要はない。
size オプションに指定したサイズに応じて必要なマージンは変化する。例えば、元画像が 70px で、size オプションに 48 を指定した場合、70－48 で 22px となる。
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>
画像ファイルへのパスは、それぞれ、アップロードした場所を指定する。