スマホヘッダーメニュー2箇所
左からスライドして出てくるメニューと常時見えているアコーディオンメニューを作成してみました。
html**
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Reflect_header</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> <script type="text/javascript" src="js/jQuery1.8.2.js"></script> <script type="text/javascript" src="js/header.js"></script> </head> <body> <div class="over01"></div> <div class="over02"></div> <div id="reflect-header"> <!-- block3 --> <div class="block3 clear"> <h1><a href="">Brand</a></h1> <!-- search area --> <div class="hd_search_btn"></div> <div class="slidesearch"> </div><!-- slidesearch --> <!-- .menu --> <div class="menu"> <div class="bgblack"></div> <div class="slidemenu"> <h2>CATEGORIES</h2> <ul class="hunbergarlist" style="display: block;"> <li class=""> <a href="#" class="plus">AAA</a> <ul class="detail_list" style="display: block;"> <li><a href="">aaaaaa</a></li> <li><a href="">aaaaaa</a></li> <li><a href="">aaaaaa</a></li> <li><a href="">aaaaaa</a></li> <li><a href="">aaaaaa</a></li> </ul><!-- .detail_list --> </li> <li class=""> <a href="#" class="plus">BBB</a> <ul class="detail_list" style="display: none;"> <li><a href="">bbbbbb</a></li> <li><a href="">bbbbbb</a></li> <li><a href="">bbbbbb</a></li> <li><a href="">bbbbbb</a></li> <li><a href="">bbbbbb</a></li> </ul><!-- .detail_list --> </li> <li class=""><a href="">CCC</a></li> <li class=""> <a href="#" class="plus">DDD</a> <ul class="detail_list" style="display: block;"> <li><a href="">ddddd</a></li> <li><a href="">ddddd</a></li> <li><a href="">ddddd</a></li> <li><a href="">ddddd</a></li> <li><a href="">ddddd</a></li> </ul><!-- .detail_list --> </li> <li class=""> <a href="#" class="plus">EEE</a> <ul class="detail_list" style="display: none;"> <li><a href="">eeeee</a></li> <li><a href="">eeeee</a></li> <li><a href="">eeeee</a></li> <li><a href="">eeeee</a></li> <li><a href="">eeeee</a></li> </ul><!-- .detail_list --> </li> <li class=""> <a href="#" class="plus">FFF</a> <ul class="detail_list" style="display: none;"> <li><a href="">fffff</a></li> <li><a href="">fffff</a></li> <li><a href="">fffff</a></li> <li><a href="">fffff</a></li> <li><a href="">fffff</a></li> </ul><!-- .detail_list --> </li> </ul> <p class="gn-close">CLOSE</p> </div><!-- .slidemenu --> </div><!-- .menu --> <!-- BRAND下のメニュー --> <ul class="under_nav"> <li class="un"> <a href="#" class="plus">AAA</a> <ul class="detail_list"> <li><a href="">aaaaa</a></li> <li><a href="">aaaaa</a></li> <li><a href="">aaaaa</a></li> <li><a href="">aaaaa</a></li> <li><a href="">aaaaa</a></li> </ul><!-- .detail_list --> </li><!-- .un --> <li class="deux"> <a href="#" class="plus">BBB</a> <ul class="detail_list"> <li><a href="">bbbbb</a></li> <li><a href="">bbbbb</a></li> <li><a href="">bbbbb</a></li> <li><a href="">bbbbb</a></li> <li><a href="">bbbbb</a></li> </ul><!-- .detail_list --> </li><!-- .deux --> <li class="trois"> <a href="#" class="plus">CCC</a> <ul class="detail_list"> <li><a href="">ccccc</a></li> <li><a href="">ccccc</a></li> <li><a href="">ccccc</a></li> <li><a href="">ccccc</a></li> <li><a href="">ccccc</a></li> </ul><!-- .detail_list --> </li><!-- .trois --> </ul><!-- .under_nav --> </div><!-- /block3 --> </div><!-- .reflect-header --> <div style="height: 1000px"></div> </body> </html>
CSS**
@charset "utf-8"; @media screen and (max-width:640px){ *{margin:0; padding:0;} ul,li{list-style:none;} .over01{height: 30px; background:#000;} .over02{height: 30px; background:yellow;} #reflect-header{font-family: 'Lato', sans-serif; width:100%;} #reflect-header .block3{border-bottom: 1px solid #bfb267; background: #fafbf5; position: relative; z-index: 97; width: 100%; height: 56px; top: 0;} #reflect-header .block3 h1{text-align: center; letter-spacing: 0.05em;} #reflect-header .block3 h1 a{color:#333; font-size:28px; line-height: 56px; text-decoration: none;} /*検索エリア*/ #reflect-header .slidesearch{position: absolute; height: 56px; width: 56px; background:red; top:0; right:0;} /*横スライドメニュー*/ #reflect-header .menu .bgblack{width:100vw; height: 100vh; position: fixed; background:rgba(0,0,0,0.5); top:0; left:0; z-index:5; display:none;} #reflect-header .menu .bgblack.menu_up{display: block;} #reflect-header .menu .slidemenu{position:fixed; top:0; left:-240px; width:240px; height: 100%; z-index:100; background:#fafbf5; overflow-y:scroll; transition: 0.2s;} #reflect-header .menu .slidemenu.menu_up{top:0; left:0;} #reflect-header .menu .slidemenu h2{background:#999; padding:10px 15px;} #reflect-header .menu .slidemenu ul.hunbergarlist{} #reflect-header .menu .slidemenu ul.hunbergarlist > li{font-size:14px; width:100%;} #reflect-header .menu .slidemenu ul.hunbergarlist > li a{display: block; padding:10px 7px; text-decoration: none; color:#000;} #reflect-header .menu .slidemenu ul.hunbergarlist > li ul.detail_list li{padding-left:20px;} #reflect-header .menu .slidemenu ul.hunbergarlist a{position: relative;} #reflect-header .menu .slidemenu ul.hunbergarlist a:after { background-image: url(../img/arrow_menu_hd_open.png); background-repeat: no-repeat; background-size: 100%; visibility: visible; width: 10px; height: 6px; position: absolute; top: 43%; right: 10px; -webkit-transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1.0); transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1.0); content: "";} #reflect-header .menu .slidemenu ul.hunbergarlist a.plus:after { background-image: url(../img/arrow_menu_hd_open.png); } #reflect-header .menu .slidemenu ul.hunbergarlist a.minus:after { background-image: url(../img/arrow_menu_hd_close.png); } #reflect-header ul.under_nav{letter-spacing: -0.40em;} #reflect-header ul.under_nav > li{font-size:14px; position:relative; width:33.33%; letter-spacing: normal; text-align: center; display: inline-block;} #reflect-header ul.under_nav > li a{display: block; padding:10px 7px; text-decoration: none; color:#fff; background:#ccc;} #reflect-header ul.under_nav > li ul.detail_list{display: none; position: absolute; background:#ccc; width:100%; font-size:14px;} #reflect-header ul.under_nav > li ul.detail_list li a{padding:10px 7px; border-bottom:1px solid #fff;} #reflect-header ul.under_nav > li ul.detail_list li:last-child{border-bottom:0;} }
JS**
$(function(){ // 左からのスライドメニュー // アコーディオンメニュー $('ul.hunbergarlist a.plus').each(function(){ $(this).click(function(){ $(this).next('ul').slideToggle(300); $(this).toggleClass('minus'); return false; }); }); $('.slidesearch').click(function(){ $('.bgblack').addClass('menu_up'); $('.slidemenu').addClass('menu_up'); return false; }); $('.bgblack').click(function(){ $('.bgblack').removeClass('menu_up'); $('.slidemenu').removeClass('menu_up'); return false; }); $('.gn-close').click(function(){ $('.bgblack').removeClass('menu_up'); $('.slidemenu').removeClass('menu_up'); return false; }); // Brand下のメニュー // アコーディオンメニュー $('ul.under_nav a.plus').each(function(){ $(this).click(function(){ $(this).next('ul').slideToggle(300); $(this).toggleClass('minus'); return false; }); }); });