【JavaScript】コピペOK!! ダブで切り替え・メニューの作り方

こんにちは今回はタブで切り替わるメニューをJavaScriptとCSSで実装していきます。
以前にカレー屋さんのHPを作成させていただいた際に実装したものですのでとても実用的かと思います。ぜひ参考にしてみてください！

メニュー

870円

メニュー

870円

メニュー

870円

メニュー

870円

セットメニュー

570円

セットメニュー

570円

セットメニュー

570円

セットメニュー

570円

ドリンク

170円

ドリンク

170円

ドリンク

170円

ドリンク

170円

ドリンク

170円

その他

70円

その他

70円

その他

70円

その他

70円

その他

70円

完成図

切り替え可能なメニューバー
メニューリストを作る

切り替え可能なメニューバー

HTMLでコンテンツを作る

まずはHTMLでコンテンツを作ります。今回HTMLファイルはかなり長くなってしまったのでgitページにて共有させていただきます。メニューの少ないバージョンで載せていますがメニューがたくさん欲しい場合はgitからダウンロードしてください。

<section class="menu">
  <div class="container">
    <div class="pagemenu-block">
      <a href="##" class="pmd_1 active">Grand menu</a>
    </div>
    <div class="pagemenu-block">
      <a href="##" class="pmd_2">Set menu</a>
    </div>
    <div class="pagemenu-block">
      <a href="##" class="pmd_3">Drink menu</a>
    </div>
    <div class="pagemenu-block">
      <a href="##" class="pmd_4">Other</a>
    </div>
    <div class="clear"></div>
  </div>
</section>
<section class="border"></section>
<section class="menu">
  <div class="container2">
    <div class="area_1 active">
      <!-- これをふやす -->
      <article>
        <div class="photo"><img src="img/menu/no_image.png" alt=""></div>
        <div class="text">
          <h2>カレー</h2>
          <p>670円</p>
        </div>
      </article>
      <!-- =========== -->
    </div>
    <div class="area_2">
      <!-- これをふやす -->
      <article>
        <div class="photo"><img src="img/menu/no_image.png" alt=""></div>
        <div class="text">
          <h2>カレー</h2>
          <p>670円</p>
        </div>
      </article>
      <!-- =========== -->
    </div>
    <div class="area_3">
      <!-- これをふやす -->
      <article>
        <div class="photo"><img src="img/menu/no_image.png" alt=""></div>
        <div class="text">
          <h2>カレー</h2>
          <p>670円</p>
        </div>
      </article>
      <!-- =========== -->
    </div>
    <div class="area_4">
      <!-- これをふやす -->
      <article>
        <div class="photo"><img src="img/menu/no_image.png" alt=""></div>
        <div class="text">
          <h2>カレー</h2>
          <p>670円</p>
        </div>
      </article>
      <!-- =========== -->
    </div>
  </div>
</section>

HTMLの解説をしていきます。

まずはメニューバーを作ります。

<section class="menu">
  <div class="container">
    <div class="pagemenu-block">
      <a href="##" class="pmd_1 active">Grand menu</a>
    </div>
    <div class="pagemenu-block">
      <a href="##" class="pmd_2">Set menu</a>
    </div>
    <div class="pagemenu-block">
      <a href="##" class="pmd_3">Drink menu</a>
    </div>
    <div class="pagemenu-block">
      <a href="##" class="pmd_4">Other</a>
    </div>
  </div>
</section>

今回は4つの項目で作成しています。各項目ごとに<a>でボタンを作り<div class=”pagemenu-block”>で囲みます。それをcontainerでまとめ完成です。次はcssです。

CSSでデザインを整える

.menu .container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px; /*横幅に合わせてください*/
  margin: 0 auto;
}

.pagemenu-block {
  display: block;
  margin-right: 30px;
  font-size: 20px; /*文字の大きさを調整してください*/
  line-height: 35px;
}

@media(max-width:768px) {
  .pagemenu-block {
    margin-right: 20px;
    font-size: 15px;
    line-height: 25px;
  }
}

.pmd_1,
.pmd_2,
.pmd_3,
.pmd_4 {
  color: #a6a4a6;
  align-items: center;
  transition: 0.5s;/*アニメーションの速度*/
}

.pmd_1:hover,
.pmd_2:hover,
.pmd_3:hover,
.pmd_4:hover {
  color: #37352b;
}/*hoverした時に色を変えます*/

<div class=”pagemenu-block”>に対してflexをかけて横並びにします。

＊わかりやすいように背景色を入れています。

＊class=”pmd_1″については後解説します。

表示されている項目を濃くしてアイコンをつける

class=”active”がついた時、色とアイコンが隣に出るようにします。まずはactiveがついた時の色を指定します。そしてactiveがついた時にアイコンが出るようにbeforeを使って表示させます。

.active {
  display: flex;
  flex-wrap: wrap;
  color: #37352b;
}

.container .pagemenu-block .active::before {
  content: "";
  background-image: url(https://yotamatsumaru.jp/blog/wp-content/uploads/2021/02/menu_icon.png);
  background-position: center;
  background-size: cover;
  height: 20px;
  width: 20px;
}

classにactiveと入れたメニュー項目だけ色が濃くなりアイコンが出ました。

JavaScriptでactiveを付け替える

次にボタンを押すとアイコンが出るようにします。classで識別してメニューを変えるJavaScriptを作ります。

$(document).ready(function () {
  $('.pmd_1').click(function (e) {
    $('.pmd_1').addClass("active");
    $('.pmd_2').removeClass("active");
    $('.pmd_3').removeClass("active");
    $('.pmd_4').removeClass("active");
  });
  $('.pmd_2').click(function (e) {
    $('.pmd_1').removeClass("active");
    $('.pmd_2').addClass("active");
    $('.pmd_3').removeClass("active");
    $('.pmd_4').removeClass("active");
  });
  $('.pmd_3').click(function (e) {
    $('.pmd_1').removeClass("active");
    $('.pmd_2').removeClass("active");
    $('.pmd_3').addClass("active");
    $('.pmd_4').removeClass("active");
  });
  $('.pmd_4').click(function (e) {
    $('.pmd_1').removeClass("active");
    $('.pmd_2').removeClass("active");
    $('.pmd_3').removeClass("active");
    $('.pmd_4').addClass("active");
  });
});

$(‘.pmd_1’).click(function (e) {
$(‘.pmd_1’).addClass(“active”);
$(‘.pmd_2’).removeClass(“active”);
$(‘.pmd_3’).removeClass(“active”);
$(‘.pmd_4’).removeClass(“active”);
});

これの意味を解説すると

$(‘メニュー項目をクリックした時‘).click(function (e) {
$(‘.クリックしたメニュー項目にactiveをつける’).addClass(“active”);
$(‘それ以外はactiveを外す‘).removeClass(“active”);
$(‘それ以外はactiveを外す‘).removeClass(“active”);
$(‘それ以外はactiveを外す‘).removeClass(“active”);
});

ということです。つまりボタンを押したクラスにactiveをつけて(addClass)、それ以外のclassにはactiveを外す(removeClass) という処理です。

これによりactiveを付け替えることができました！

メニューリストを作る

メニューバーは作り終えたので次はメニューリストを作ります

<section class="menu">
  <div class="container2">
    <div class="area_1 active">
      <!-- これをふやす -->
      <article>
        <div class="photo"><img src="https://yotamatsumaru.jp/blog/wp-content/uploads/2021/02/食事アイコン.jpeg" alt=""></div>
        <div class="text">
          <h2>カレー</h2>
          <p>670円</p>
        </div>
      </article>
      <!-- =========== -->
    </div>
    <div class="area_2">
      <!-- これをふやす -->
      <article>
        <div class="photo"><img src="https://yotamatsumaru.jp/blog/wp-content/uploads/2021/02/食事アイコン.jpeg" alt=""></div>
        <div class="text">
          <h2>カレー</h2>
          <p>670円</p>
        </div>
      </article>
      <!-- =========== -->
    </div>
    <div class="area_3">
      <!-- これをふやす -->
      <article>
        <div class="photo"><img src="https://yotamatsumaru.jp/blog/wp-content/uploads/2021/02/食事アイコン.jpeg" alt=""></div>
        <div class="text">
          <h2>カレー</h2>
          <p>670円</p>
        </div>
      </article>
      <!-- =========== -->
    </div>
    <div class="area_4">
      <!-- これをふやす -->
      <article>
        <div class="photo"><img src="https://yotamatsumaru.jp/blog/wp-content/uploads/2021/02/食事アイコン.jpeg" alt=""></div>
        <div class="text">
          <h2>カレー</h2>
          <p>670円</p>
        </div>
      </article>
      <!-- =========== -->
    </div>
  </div>
</section>

<div class=”area_1″>の中に<article>が入っています。この<article>を増やすことによってメニューが増えます。今回は短縮のため１つしか記載していませんがコードを写す際は複数追加してください。

そしてこれらに対してcssでデザインを整えます。

.menu .container2 {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}

.area_1,
.area_2,
.area_3,
.area_4 {
  display: none;/*常に見えなくする*/
  width: 100%;
}

.area_1 img,
.area_2 img,
.area_3 img,
.area_4 img {
  width: 150px;
  padding: 5px;
}

.area_1 article,
.area_2 article,
.area_3 article,
.area_4 article {
  display: flex;
  width: 33%;
  align-items: center;
  line-height: 25px;
}
@media(max-width:768px) {
  .area_1 article,
  .area_2 article,
  .area_3 article,
  .area_4 article {
    width: 50%;
    font-size: 10px;
    line-height: 15px;
  }

  .area_1 img,
  .area_2 img,
  .area_3 img,
  .area_4 img {
    width: 50px;
    padding: 5px;
  }
}

メニュー

870円

メニュー

870円

メニュー

870円

メニュー

870円

セットメニュー

570円

セットメニュー

570円

セットメニュー

570円

セットメニュー

570円

ドリンク

170円

ドリンク

170円

ドリンク

170円

ドリンク

170円

ドリンク

170円

その他

70円

その他

70円

その他

70円

その他

70円

その他

70円

このように横並びになります。

activeがつくと先ほど設置した、

.active {
display: flex;
flex-wrap: wrap;
color: #37352b;
}

が適用されコンテンツがnoneからflexに変わります。

メニューリストも同様メニュー項目を押された時に対応したメニューリストが表示されなければいけないのでJavaScriptを追加します。

$(document).ready(function () {
  $('.pmd_1').click(function (e) {
    $('.pmd_1').addClass("active");
    $('.area_1').addClass("active");
    $('.pmd_2').removeClass("active");
    $('.area_2').removeClass("active");
    $('.pmd_3').removeClass("active");
    $('.area_3').removeClass("active");
    $('.pmd_4').removeClass("active");
    $('.area_4').removeClass("active");
  });
  $('.pmd_2').click(function (e) {
    $('.pmd_1').removeClass("active");
    $('.area_1').removeClass("active");
    $('.pmd_2').addClass("active");
    $('.area_2').addClass("active");
    $('.pmd_3').removeClass("active");
    $('.area_3').removeClass("active");
    $('.pmd_4').removeClass("active");
    $('.area_4').removeClass("active");
  });
  $('.pmd_3').click(function (e) {
    $('.pmd_1').removeClass("active");
    $('.area_1').removeClass("active");
    $('.pmd_2').removeClass("active");
    $('.area_2').removeClass("active");
    $('.pmd_3').addClass("active");
    $('.area_3').addClass("active");
    $('.pmd_4').removeClass("active");
    $('.area_4').removeClass("active");
  });
  $('.pmd_4').click(function (e) {
    $('.pmd_1').removeClass("active");
    $('.area_1').removeClass("active");
    $('.pmd_2').removeClass("active");
    $('.area_2').removeClass("active");
    $('.pmd_3').removeClass("active");
    $('.area_3').removeClass("active");
    $('.pmd_4').addClass("active");
    $('.area_4').addClass("active");
  });
});

先ほどのJavaScriptに$(‘.area_1’).addClass(“active”);をたします。pmd_1が押された時にarea_1が表示される。そしてそれ以外のareaはactiveを除外される。そのように書きます。以上で出来上がりです。

メニュー

870円

メニュー

870円

メニュー

870円

メニュー

870円

セットメニュー

570円

セットメニュー

570円

セットメニュー

570円

セットメニュー

570円

ドリンク

170円

ドリンク

170円

ドリンク

170円

ドリンク

170円

ドリンク

170円

その他

70円

その他

70円

その他

70円

その他

70円

その他

70円