レスポンシブなメニューを作成「MeanMenu」
当ページのリンクには広告が含まれています。
スポンサーリンク
レスポンシブなメニューが作れるjQueryプラグイン「MeanMenu」の紹介です。
jQueryプラグイン「MeanMenu」
レスポンシブとは、PC・スマートフォン・タブレットなどのあらゆる端末に対応する制作手法です。今回紹介する「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
スポンサーリンク