今日の人気記事

  1. 画像ポップアップ・スライドショー「Lightbox 2」
  2. マウスオーバーでサイズが変化するパネルを実装する「Kwicks」
  3. テーブルのヘッダーと左カラムを固定表示「fixedTblHdrLftCol」
  4. JSONデータからテーブルを表示「Columns」 - ソート - 検索 - ページャー
  5. アニメ効果がおもしろいモーダルボックス「Avgrund Modal」

レスポンシブなメニューを作成「MeanMenu」

スポンサーリンク

レスポンシブなメニューが作れるjQueryプラグイン「MeanMenu」の紹介です。

jQueryプラグイン「MeanMenu」

レスポンシブとは、PC・スマートフォン・タブレットなどのあらゆる端末に対応する制作手法です。今回紹介する「MeanMenu」は、レスポンシブなメニューを制作するのを補助してくれます。便利です。

スポンサーリンク

まずはデモをご覧ください。ブラウザの横幅を縮めると……。

「MeanMenu」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MeanMenu - jQueryプラグインまとめのコピペ</title>
<link rel="stylesheet" href="style.css" media="all" />
<link rel="stylesheet" href="meanmenu.css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.meanmenu.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('header nav').meanmenu();
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Top Level Link</a>
<ul>
<li><a href="#">Second Level Link</a>
<ul>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a></li>
<li><a href="#">Third Level Link</a>
<ul>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link</a></li>
<li><a href="#">Fourth Level Link</a>
<ul>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
<li><a href="#">Fifth Level Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Second Level Link</a></li>
<li><a href="#">Second Level Link</a></li>
</ul>
</li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
<li><a href="#">Top Level Link</a></li>
</ul>
</nav>
</header>
<h1>MeanMenuのデモでーす。</h1>
<p>ブラウザの横幅を縮めてください。480pxより小さくなると……。</p>
</body>
</html>

jsファイルのダウンロード、その他オプションなどの詳細とはこちらからどうぞ。
» MeanMenu - a jQuery responsive menu Plugin | MeanThemes

スポンサーリンク

関連記事(一部広告含む)