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

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

sponsors

使用方法

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

まとめ系

プライベート系


JavaScript

まとめ系

プライベート系

Javascriptサンプルページ一覧
skuare.net

sponsors