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

でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」

｜ ｜ ｜ ｜ ｜ ｜ ｜

表示したい関連リンクなどが多いとき、こんな風に表現すると面白いかもしれません。 Cut & Paste jQuery Mega Menuを利用するとマウスを乗せたときに中身がどばっと表示されます。

使用方法
jQueryからjquery.jsを、Cut & Paste jQuery Mega Menuからjkmegamenu.css、jkmegamenu.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript" src="jkmegamenu.js">
/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
jkmegamenu.definemenu("アンカーID", "表示するID", "mouseover")
</script>

上記を記述したら、あとは表示する部分を記述すれば完成です。
<p id="アンカーID名">マウスをのっけてみて</p>
<div id="表示するID" class="megamenu">
<div class="column">
<h3>タイトル</h3>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</div>
<div class="column">
<h3>タイトル</h3>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</div>
<div class="column">
<h3>タイトル</h3>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</div>
</div>

でっかいメニューをJavaScriptで作る「Cut & Paste jQuery Mega Menu」サンプル

記事作成：2009年07月02日

前の記事：mootoolsで3Dメニュー「JavaScript 3D Cube Menu」
次の記事：JavaScriptでCaptchaぽいのを作る「jQuery Real Person」