多数のシンプルなスタイルが用意されているドロップダウンメニュー「mnmenu」
当ページのリンクには広告が含まれています。
スポンサーリンク
多数のシンプルなスタイルが用意されているドロップダウンメニュー「mnmenu」を紹介します。
jQueryプラグイン「mnmenu」
ドロップダウンメニューの実装はメニューアイテムを li タグでずらずらと並べるだけで簡単に実装できます。
スタイルの変更は、あらかじめ用意された CSS ファイルを読み込み、要素名を指定するだけです。
ササッとシンプルでかっこいいドロップダウンメニューを実装したい方におすすめのプラグインです。
スポンサーリンク
それではデモページのメニューをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="mnmenuのデモでーす。">
<title>mnmenu - jQueryプラグイン</title>
<link rel="stylesheet" type="text/css" href="css/blue.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.hoverintent.r7.js"></script>
<script src="js/jquery.mnmenu.js"></script>
<script>
$(document).ready(function() {
$('#idmenu').mnmenu();
})
</script>
</head>
<body>
<h1>mnmenu のデモでーす。</h1>
<ul id="idmenu" class="bluemenu">
<li>アイテム
<ul>
<li>サブアイテム</li>
<li>サブアイテム</li>
<li>サブアイテム
<ul>
<li>サブサブアイテム
<ul>
<li>サブサブサブアイテム</li>
<li>サブサブサブアイテム</li>
</ul>
</li>
<li>サブサブアイテム</li>
</ul>
</li>
</ul>
</li>
<li>アイテム
<ul>
<li>サブアイテム</li>
<li>サブアイテム</li>
</ul>
</li>
<li>アイテム</li>
</ul>
</body>
</html>
スポンサーリンク