Blog

HOME > Web > JQuery > 【jQuery CSS】メニューボタンを開閉に合わせて×と三本線にする方法

【jQuery CSS】メニューボタンを開閉に合わせて×と三本線にする方法

2017/09/01

JQuery css

備忘録です。

メニューボタンを開閉に合わせて×と三本線にする方法です。
参考サイト　3本線のメニューボタンをパネルの開閉にあわせてバツに変化させてみる

メニュークローズ

メニュークローズ

メニューオープン

メニューオープン

html ナビボタン 
<div class="navi_button">
    <div class="icon-animation">
        <span class="top"></span>
        <span class="middle"></span>
        <span class="bottom"></span>
    </div>
</div>
html プルダウンメニューはWordpressのウィジェットにしました。 
<nav class="gnavi">
    <div class="gnavi__header">MENU</div>
    <div class="gnavi__body">
        <?php wp_nav_menu( array('menu' => 'メニュー' )); ?>
    </div>
 </nav>
html プルダウンメニューサンプル 
<nav class="gnavi">
    <div class="gnavi__header">MENU</div>
    <div class="gnavi__body">
        <ul>
            <li>メニュー1</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
            <li>メニュー4</li>
        </ul>
    </div>
 </nav>
バーガーメニューのCSS 
.navi_button{
    display: none;
}
.icon-animation {
    width: 70px;
    height: 70px;
    display: block;
    cursor: pointer;
    float: right;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    background: #000;
}
.icon-animation span {
    width: 50px;
    height: 2px;
    display: block;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.icon-animation .top {
    -webkit-transform: translateY(-13px);
    -ms-transform: translateY(-13px);
    transform: translateY(-13px);
}
.icon-animation .bottom {
    -webkit-transform: translateY(13px);
    -ms-transform: translateY(13px);
    transform: translateY(13px);
}
.is-open .middle {
    background: rgba(51, 51, 51, 0);
}
.is-open .top {
    -webkit-transform: rotate(-45deg) translateY(0px);
    -ms-transform: rotate(-45deg) translateY(0px);
    transform: rotate(-45deg) translateY(0px);
}
.is-open .bottom {
    -webkit-transform: rotate(45deg) translateY(0px);
    -ms-transform: rotate(45deg) translateY(0px);
    transform: rotate(45deg) translateY(0px);
}

サイズは70pxにしていますが、サイトに合わせて変更してください。
またデバイスのサイズによって、60px、50pxと変えています。
ナビのCSSは割愛します。

jQuery 
//ナビボタン
$(function() {
      var gnav = $('.gnavi');
      gnav.css('display','none');
      $('.navi_button').on('click', function() {
        gnav.slideToggle(500);
        if ($(this).hasClass('is-open')) {
          $(this).removeClass('is-open');
        } else {
          $(this).addClass('is-open');
        }
    });
});



当サイトで実装していますので、興味のある方はスマホなどでご覧ください。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ