javascript ハンバーガーメニュー：全画面，横からスライド

Posted 2021-05-03

<div class="sp_header">
            <p class="sp_header_logo"><img src="images/logo_header.png" alt="文花堂"></p>
            <p><span data-action="call" data-tel="0667280087"><span class="fas fa-phone fa-flip-horizontal"></span></p>
            <div id="nav-toggle">
                <div>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div id="gloval-nav">
                <nav>
                    <ul class="flex_box flex_between flex_wrap">
                        <li><a href="../store/">店舗案内</a></li>
                        <li><a href="../celebration/">スタンド花（生花）</a></li>
                        <li><a href="../celebration/hanawa.html">花輪（造花）</a></li>
                        <li><a href="../celebration/kochoran.html">胡蝶蘭</a></li>
                        <li><a href="../gift/">フラワーアレンジ</a></li>
                        <li><a href="../celebration/event.html">各種イベント</a></li>
                        <li><a href="../gift/hanataba.html">花束</a></li>
                        <li><a href="../gift/kanyo.html">観葉植物</a></li>
                        <li><a href="../gift/bridal.html">ブライダル</a></li>
                        <li><a href="../gift/osonae.html">お供花</a></li>
                        <li><a href="../contact/index.php">お問い合せ</a></li>
                        <li><a href="../link/">リンク</a></li>
                        <li><a href="../privacy/">プライバシーポリシー</a></li>
                    </ul>
                </nav>
            </div>
        </div>

/*---------- ヘッダー ----------*/
#header {
    padding: 0;
}

.pc_header {
    display: none
}

.sp_header {
    width: 100%;
    position: fixed;
    top: 0;
    background: #623e10;
    padding: 15px;
}

.sp_header_logo img {
    width: 40%;
}

.sp_header .fa-phone {
    color: #ffffff;
    font-size: 2.7rem;
    position: absolute;
    top: 25px;
    right: 80px;
}

/*---------- ハンバーガーメニュー ----------*/
#nav-toggle {
    position: fixed;
    top: 25px;
    right: 25px;
    height: 32px;
    cursor: pointer;
}
#nav-toggle > div {
    position: relative;
    width: 36px;
}
#nav-toggle span {
    width: 100%;
    height: 2px;
    left: 0;
    display: block;
    background: #ffffff;
    position: absolute;
    transition: top .5s ease, -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out, top .5s ease;
    transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 4px;
}
#nav-toggle span:nth-child(2) {
    top: 14px;
}
#nav-toggle span:nth-child(3) {
    top: 23px;
}
#nav-toggle:hover span:nth-child(1) {
    top: 4px;
}
#nav-toggle:hover span:nth-child(3) {
    top: 23px;
}
.open #nav-toggle span {
    background: #fff;
}
.open #nav-toggle span:nth-child(1) {
    top: 15px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
    top: 15px;
    width: 0;
    left: 50%;
}
.open #nav-toggle span:nth-child(3) {
    top: 15px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* z-index */
#nav-toggle {
    z-index: 1000;
}

#container {
    z-index: 900;
}

#gloval-nav {
    background: rgba(98,62,16,0.9);
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 990;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 29px;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
    padding: 30px;
}

#gloval-nav a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 0 10px 20px;
    transition: color .6s ease;
}
#gloval-nav a:hover {
    color: #666;
}
#gloval-nav ul {
    list-style: none;
}
#gloval-nav ul li {
    font-size: 1.6rem;
    width: 48%;
    position: relative;
    opacity: 0;
    -webkit-transform: translateX(200px);
    transform: translateX(100px);
    transition: opacity .2s ease, -webkit-transform .6s ease;
    transition: transform .6s ease, opacity .2s ease;
    transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
}
#gloval-nav ul li:nth-child(odd) {
    transition-delay: .15s;
}
#gloval-nav ul li:nth-child(even) {
    transition-delay: .3s;
}
#gloval-nav ul li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content:"\f054";
    color: #ffffff;
    position: absolute;
    top: 10px;
    left: 0;
}

/* open */
.open {
    overflow: hidden;
}
.open #gloval-nav {
    visibility: visible;
    opacity: 1;
}
.open #gloval-nav li {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: opacity .9s ease, -webkit-transform 1s ease;
    transition: transform 1s ease, opacity .9s ease;
    transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}

(function ($) {
   $(function () {
      $('#nav-toggle').on('click', function () {
         $('body').toggleClass('open');
      });
   });
})(jQuery);