スマホヘッダーメニュー2箇所


左からスライドして出てくるメニューと常時見えているアコーディオンメニューを作成してみました。

f:id:paris1204:20180415215322j:plain

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;
    });
    });



  

});