JSFiddle - React, Tailwind, and code Playground

by jun68ykt

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="spbatsu" class="pcnone">
    <!-- 三本線のメニュー、cssアニメーションで×になる１ -->
    <a class="menu-trigger" href="#">
        <span></span>
        <span></span>
        <span></span>
    </a>
</div>
<!-- ドロップダウンで表示される内容１ -->
<div id="panel">
    <div id="panel_in">
        <ul id="panel_in_ul">
            <li class="spmenuin_li"><a href="#">トップページ</a></li>
            <li class="spmenuin_li spyazi">
                <a href="#" class="panel_in_li">店舗一覧</a>
                <ul class="spmenuin_li_in">
                    <li><a href="http://example#sample" class="spmenuin_li_in_li">●●店</a></li>
                    <li><a href="http://example#sample2" class="spmenuin_li_in_li">●●店</a></li>
                </ul>
            </li>
            <li class="spmenuin_li spyazi">
                <a href="#" class="panel_in_li">メニュー</a>
                <ul class="spmenuin_li_in">
                    <li><a href="#" class="spmenuin_li_in_li">ランチメニュー</a></li>
                    <li><a href="#" class="spmenuin_li_in_li">ディナーメニュー</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div id="spbatsu2" class="pcnone">
    <!-- 三本線のメニュー、cssアニメーションで×になる２ -->
    <a class="menu-trigger2" href="#">
        <span></span>
        <span></span>
        <span></span>
    </a>
</div>
<!-- ドロップダウンで表示される内容２ -->
<div id="panel2">
    <div id="panel_in2">
        <p class="yoyakup">レストラン</p>
        <div class="spbtm"><a href="#">予約</a></div>
        <p><a href="tel:0123456789" class="sp_tel_ablack">0123456789</a></p>
        <p>定休日：なし</p>
        <hr/>
        <p class="yoyakup">カフェ</p>
        <div class="spbtm"><a href="#">予約</a></div>
        <p><a href="tel:0123456789" class="sp_tel_ablack">0123456789</a></p>
        <p>定休日：なし</p>
    </div>
</div>

CSS

#panel {
    display: none;
    width: 100%;
    margin: 0;
    padding: 20px 0 35px 50px;
    background: #fff;
    z-index: 100;
    position: fixed;
    top: 60px;
    font-size: 13px;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}

#panel a {
    color: #000;
}

#panel2 {
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    z-index: 100;
    position: fixed;
    top: 60px;
    right: 0px;
    font-size: 13px;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}

#panel_in2 {
    padding: 20px;
    text-align: center;
}

#panel_in2 .yoyakup {
    padding-bottom: 0.5em;
    font-weight: bold;
}

.panel_in_li {
    font-size: 13px;
}

.menu-trigger,
.menu-trigger span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    z-index: 100;
}

.menu-trigger {
    position: relative;
    position: fixed;
    width: 32px;
    height: 16px;
}

.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}

.menu-trigger span:nth-of-type(1) {
    top: 0;
}

.menu-trigger span:nth-of-type(2) {
    top: 7px;
}

.menu-trigger span:nth-of-type(3) {
    bottom: 0;
}

.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(7px) rotate(-45deg);
    transform: translateY(7px) rotate(-45deg);
}

.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}

.menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-7px) rotate(45deg);
    transform: translateY(-7px) rotate(45deg);
}

#spbatsu {
    width: 32px;
    position: absolute;
    top: 20px;
    left: 15px;
}

.menu-trigger2,
.menu-trigger2 span {
    display: inline-block;
    transition: all .4s;
    box-sizing: border-box;
    z-index: 100;
}

.menu-trigger2 {
    position: relative;
    position: fixed;
    width: 32px;
    height: 16px;
}

.menu-trigger2 span {
    position: absolute;
    left: 0;
    width: 100%;
    height:...

JavaScript

$(function(){
	
  $(".menu-trigger").click(function() {
    $("#panel").slideToggle(350);
    $(".menu-trigger").toggleClass('active');
    $(".menu-trigger2").removeClass('active');
    $("#panel2").slideUp(350);
    return false;
  });
  
	$(".spmenuin_li a").click(function(){
  	$(this).next("ul").slideToggle();
  	$(this).toggleClass("open");
	});

 $(".menu-trigger2").click(function() {
    $("#panel2").slideToggle(350);
    $(".menu-trigger2").toggleClass('active');
    $(".menu-trigger").removeClass('active');
    $("#panel").slideUp(350);
    return false;
  });
  
});