
レスポンシブ対応のメニューを簡単につくることができる「MeanMenu」
2014年7月28日jQueryプラグイン活用
ウィンドウサイズを縮めていくと、メニューが指定したブレイクポイントで折り畳み式に切り替わります。
JavaScript
(function($){ $(function(){ $('#menu').meanmenu({ meanMenuClose: "x", meanMenuCloseSize: "18px", meanMenuOpen: "<span /><span /><span />", meanRevealPosition: "right", meanRevealColour: "", meanScreenWidth: "480" }); }); })(jQuery);
HTML
<nav id="menu"> <ul> <li><a href="#">menu01</a></li> <li><a href="#">menu02</a></li> <li><a href="#">menu03</a></li> <li><a href="#">menu04</a></li> <li><a href="#">menu05</a></li> </ul> </nav>
CSS
#menu { text-align: center; background-color: #ffbc30; display: block; } #menu li { float: left; width: 20%; } #menu a { text-align: center; color: #ffffff; background-color: #ffbc30; text-decoration: none; padding: 14px 0; width: 100%; display: block; } #menu a:hover { color: #ffbc30; background-color: #ffffff; } /* meanmenu */ .mean-container a { text-decoration: none; } .mean-container .mean-bar { float: left; width: 100%; position: relative; background: #ffbc30; min-height: 42px; z-index: 999999; } .mean-container a.meanmenu-reveal { width: 22px; height: 22px; padding: 11px 13px 13px 13px; position: absolute; top: 0; right: 0; cursor: pointer; color: #ffffff; font-size: 16px; text-indent: -9999em; line-height: 22px; font-size: 1px; display: block; font-weight: 700; } .mean-container a.meanmenu-reveal span { display: block; background: #fff; height: 3px; margin-top: 3px; } .mean-container .mean-nav { float: left; width: 100%; background: #ffbc30; margin-top: 44px; } .mean-container .mean-nav ul { padding: 0; margin: 0; width: 100%; } .mean-container .mean-nav ul li { position: relative; float: left; width: 100%; } .mean-container .mean-nav ul li a { display: block; float: left; width: 90%; padding: 1em 5%; margin: 0; color: #ffffff; border-top: 1px solid rgba(255,255,255,0.5); text-transform: uppercase; } .mean-container .mean-nav ul li a:hover { background-color: #ffffff; color: #ffbc30; } .mean-container .mean-push { float: left; width: 100%; padding: 0; margin: 0; clear: both; } .mean-nav .wrapper { width: 100%; padding: 0; margin: 0; } .mean-container .mean-bar, .mean-container .mean-bar * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }