skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

ダブルクリックで表示させるメニューを作る「JQuery NavigMenu」

｜ ｜ ｜ ｜ ｜ ｜ ｜

メニューはグローバルや左右に固定されているもの！・・・と、決め付けてはいませんか。
サイトの回遊性を上げるためにも、常に表示できるようにしておきたいものです。
JQuery NavigMenuでは、ダブルクリックで好きな場所にメニューを表示させられます。

使用方法
JQuery NavigMenuからjquery.navigmenu.jsをjQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript" src="jquery.navigmenu.js"></script>
<script type="text/javascript">
$(function(){
$('#id名').navigmenu();
});
</script>

あとはid名で囲んだところにメニューを書き込めば完成です。
例）画像1枚をmapでリンク指定。
<div id="demo">
<img src="/test/img/mapa2.png" usemap="#mapaLinkow" />
<map name="mapaLinkow" id="mapaLinkow">
<area shape="poly" coords ="62,99,0,99,8,62,30,30,72,72" href="リンク先" target="_blank" alt="" />
<area shape="poly" coords ="72,72,30,30,59,10,98,0,98,62" href="リンク先" target="_blank" alt="" />
<area shape="poly" coords ="98,62,98,0,140,10,170,30,124,72" href="リンク先" target="_blank" alt="" />
<area shape="poly" coords ="124,72,170,30,190,60,197,99,135,99" href="リンク先" target="_blank" alt="" />
<area shape="poly" coords ="135,99,197,99,190,140,168,168,124,124" href="リンク先" target="_blank" alt="" />
<area shape="poly" coords ="124,124,168,168,140,190,99,197,99,135" href="リンク先" target="_blank" alt="" />
<area shape="poly" coords ="99,135,99,197,60,190,28,168,72,124" href="リンク先" target="_blank" alt="" />
<area shape="poly" coords ="72,124,28,168,8,140,0,99,62,99" href="リンク先" target="_blank" alt="" />
</map>
</div>

ダブルクリックで表示させるメニューを作る「JQuery NavigMenu」サンプル

記事作成：2009年02月06日

前の記事：スムーズにスクロールするカルーセルJavaScript「Just Another Carousel」
次の記事：JavaScriptでタブメニューを簡単に作る「Semantic Tabs」