解説
メニューをコンテンツの上に重ねて出すタイプです。 左側のをメニューボタンをクリックすると、メニューが開閉します。メニューボタンはactive時とoffのときで背景色が変わります。
HTML
<div class="warpper"> <header> <h1 class="ttl"> <a href="kishiken.com">スマホメニュー</a> </h1> <div class="button-toggle">☰ </div> <nav class="menu"> <ul> <li> <a href="">menu1</a> </li> <li> <a href="">menu2</a> </li> <li> <a href="">menu3</a> </li> <li> <a href="">menu4</a> </li> <li> <a href="">menu5</a> </li> </ul> </nav> </header> <section> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> <p>コンテンツ</p> </section> </div> </div>
CSS
.main { width: 960px; margin: 0 auto; padding: 50px; margin: 0 auto; vertical-align: top; text-align: center; } .para { padding: 0 0 20px 0 } .warpper { max-width: 340px; margin: 0 auto; border: solid 1px #000; } header { background: #000; position: relative; height: 50px; border-bottom: 1px solid #fff; } .button-toggle { position: absolute; width: 28px; height: 28px; margin: 10px; color: #333; line-height: 30px; border-radius: 4px; text-align: center; cursor: pointer; background: #fff; font-size: 90%; border: 1px solid #fff; } .active { color: #fff; background: #000; } .ttl { font-size: 90%; float: left; height: 5px; line-height: 50px; width: 100%; text-align: center; z-index: 999; } .ttl a { color: #fff; text-decoration: none; } .menu { position: absolute; top: 51px; left: 0px; width: 100%; background: #000; color: #fff; overflow: hidden; } .menu a { display: block; color: #fff; text-decoration: none; padding: 5px 20px; border-bottom: 1px solid #555; height: 40px; line-height: 40px; font-size: 90%; } section { padding: 40px; }
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script> $(function(){ $(".menu").css("display","none"); $(".button-toggle").on("click", function() { $(".menu").slideToggle(); $(this).toggleClass("active"); }); }); </script>