スライドメニュー【toggleClass()】

今回は【toggleClass()】を使用したスライドメニューをご紹介したいと思います。※ブログ上のデモで表示されてない場合は、pcバージョンでご覧下さい。すいません…

<デモ> アイコンをクリックしてみてね

<html>

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main>
      <div class="backgroundBox">
        <div class="Container">
          <div class="menuBox"><span class="menuBar"></span><span class="menuBar"></span><span class="menuBar"></span></div>
          <nav class="slide">
            <ul class="menulist">
              <li class="menuChild"><a class="menuChildItem" href="#">menu1</a></li>
              <li class="menuChild"><a class="menuChildItem" href="#">menu2</a></li>
              <li class="menuChild"><a class="menuChildItem" href="#">menu3</a></li>
              <li class="menuChild"><a class="menuChildItem" href="#">menu4</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer>
      <script src="js/jquery-2.0.0.min.js"></script>
      <script src="js/common.js"></script>
    </footer>
  </body>
</html>

<ポイント>

・menuBoxの中身はアイコン(ハンバーガーメニュー)

・slideの中身はメニュー

※始めにメニューが表示されている状態を作成する

・footerに以下二つを忘れない

①<script src=”js/jquery-2.0.0.min.js”></script>
②<script src=”js/common.js”></script>

①はjqueryを使用できるようにするファイル
②は使用するjqueryを記述するファイル

<css>

* {
  margin: 0;
  padding: 0;
}

.backgroundBox {
  background-color: whitesmoke;
}

.Container {
  margin: 0 10px 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

//ハンバーガーアイコン
.menuBox {
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
}

.menuBar {
  display: block;
  height: 2px;
  width: 30px;
  margin: 0 auto 10px;
  background-color: black;
  position: absolute;
}

.menuBar:nth-of-type(1) {
  position: absolute;
  top: calc(50% - 10px);
  left: 50%;
  transform: translate(-50%, -50%);
}

.menuBar:nth-of-type(2) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.menuBar:nth-of-type(3) {
  position: absolute;
  top: calc(50% + 10px);
  left: 50%;
  transform: translate(-50%, -50%);
}

//slidemenu

.slide {
  overflow-x: hidden;
}

.menuChild {
  background-color: #5526e6d1;
  width: 200px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: solid 1px #cbcbccd1;
  transition: 0.8s;
  transform: translateX(-300px);
}

.menuChildItem {
  display: block;
  text-decoration: none;
  color: white;
}

.menuChild:hover {
  transition: 0.5s;
  opacity: 0.5;
}

.menuChild.active {
  background-color: #5526e6d1;
  width: 200px;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: solid 1px #cbcbccd1;
  transform: translateX(0px);
}

<ポイント>

・アイコンについては説明省略

・.slideは範囲外に出た要素を非表示にするために、overflow-x: hidden;を指定

・.menuChild.activeはメニューが表示されているときのcss

※transform: translateX(0px);はメニューを表示するときの位置

※transition: 0.8s;は切り替わるスピードを指定している

・.menuChildはメニューが非表示のときのcss

※transform: translateX(-300px);はtransform: translateX(0px);と比較して、-x軸方向(x軸に-300pxの位置)に位置する

○スライドメニューは.menuChildのクラスを切り替えることで実現できる

<js>

$(function() {
    $('.menuBox').on('click', function() {
        $(".menuChild").toggleClass('active');
    });
});

<ポイント>

・toggleClassにより、.menuChildと.menuChild.active切り替えている

・.menuBox要素を押したとき、toggleClassが動く仕組み

いかがでしたでしょうか？

スライドメニューもtoggleClassを使用したクラスの切り替えで簡単に実装することができました。

webに動きが加わると面白いですよね。

以上。

jqueryとcommon.jsファイルを置く階層を間違えていて、jquery動かくなくて時間つぶしてました…とほほ