元のhtmlをあまり複雑に触らずにPC表示とスマホ表示で切り替わる
レスポンシブメニューが実装できたらどんなに楽なんだろう~と思っていたときに
見つけたのがこれから紹介する「meanmenu.js」です。
レスポンシブメニューが実装できたらどんなに楽なんだろう~と思っていたときに
見つけたのがこれから紹介する「meanmenu.js」です。
meanmenu.jsをカスタマイズしたときの記事はこちら
自分好みのレスポンシブの多階層メニューをつくる!meanmenu.jsをカスタマイズ+css
自分好みのレスポンシブの多階層メニューをつくる!meanmenu.jsをカスタマイズ+css
使い方はとてもシンプルなので、どんなサイトでも使いやすいです。
viewport/css
viewportを指定してレスポンシブに適用させます。
meanmenu.cssを読み込みます。
ファイルの階層はそれぞれの環境に合わせて変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>Title</title>
<link rel="stylesheet" href="./css/meanmenu.css" />
</head>
HTML
HTMLは共通で良いので、お好きな書き方でOKです。
多階層メニューにしたい場合は、liタグの中にさらにulを入れることによって
自動的に「+」ボタンが表示され、それを押すことによって開くようになっています。
<nav>
<ul>
<li><a href="#">Menu01</a></li>
<li>
<a href="#">Menu02</a>
<ul>
<li><a href="#">第2階層Menu01</a></li>
<li><a href="#">第2階層Menu02</a></li>
<li><a href="#">第2階層Menu03</a></li>
</ul>
</li>
<li><a href="#">Menu03</a></li>
<li><a href="#">Menu04</a></li>
<li><a href="#">Menu05</a></li>
</ul>
</nav>
javascript
jQuery本体とmeanmenu.jsを
読み込みます。
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="./js/jquery.meanmenu.js"></script>
<script>
$(function(){
$('nav').meanmenu();
});
</script>
これでもう実装は完了です。
さらにjavascriptに以下を追加すると、カスタマイズもできます。
デフォルトではページ幅が480px以下になった時に、アコーディオンメニューを
生成するようになっておりますが、
meanScreenWidthの数値を変更することでブレイクポイントを変更することも可能です。
jQuery(document).ready(function () {
jQuery("nav").meanmenu({
meanMenuContainer: "", // メニューを表示させる位置
meanMenuClose: "x", // クローズボタン
meanMenuCloseSize: "18px", // クローズボタンのフォントサイズ
meanMenuOpen: "<span /><span /><span />", // 通常ボタン
meanRevealPosition: "right", // メニューボタンの表示位置
meanRevealColour: "", // 背景色
meanScreenWidth: "480" // ブレイクポイント
});
});
最後に
その他細かい見た目の調整等は、meanmenu.cssで調整してみてください。
ブレイクポイント以上のウィンドウサイズの場合、
メニューの見た目について指定されていませんので
すでにあるサイトをレスポンシブにするときにとっても便利ですよね!
自分用にカスタマイズできるので、お気に入りです。