jQueryでボタンを押すと前面に広がるメニューの実装方法

jQueryでボタンを押すと前面に広がるメニューの実装方法
この記事は約8分で読めます。

スマホサイトでよく見るドロワーメニュー(三本線)を押すと前面に広がるメニューを実装してみようと思います。

HTMLとCSS

まずはメニューを出した状態で重なりを調節します。
今回は、「 header 」が一番上でその下にメニューが来て、さらに下にメインコンテンツが来ます。
コンテンツの重なりは「 z-index 」の数字が大きいほど前面に来ます。

See the Pen
前面に広がるメニュー
by endebataro (@endebataro)
on CodePen.

開閉アニメーションを設定

次に、アニメーションの設定を行います。
右上の「 三 」を押したらどのような動きでメニューを表示するか決めます。
上からスルッと出てくるアニメーションをつけてみようと思います。
閉じる時には逆に上にスルッと戻る感じにしようと思います。

See the Pen
前面に広がるメニュー2
by endebataro (@endebataro)
on CodePen.

動かす方法は「 #menu 」にtransitionでアニメーションの設定をして、「 .suru 」のクラスを付けたり外したりしています。
「 .suru 」を付けると、メニューが上がって見えなくなります。逆に外すと下がってきてメニューが表示されます。
「 .suru 」には、transformが記述してあり、上にマイナス100移動します。( translateY(-100%) )

メニューを非表示にする

「 #menu 」に「 .suru 」を付け、非表示にします。

See the Pen
前面に広がるメニュー3
by endebataro (@endebataro)
on CodePen.

「 三 」を押したら「 三 」を「 ✖ 」にする

jQueryで「 三 」を押したらテキストを変更し「 ✖ 」にしよう。
そして「 ✖ 」を押したら「 三 」に戻そう。

See the Pen
前面に広がるメニュー4
by endebataro (@endebataro)
on CodePen.

jQueryのif文を使います。
「 if($(this).text() == “三”) 」
もし、「 header span 」のテキストが、「 三 」だったらという意味です。
「 $(this).text(“×”); 」
「 header span 」のテキストを「 ✖ 」にする。
「 else 」
それ以外のテキストが入っていたらという意味です。
「 $(this).text(“三”); 」
「 header span 」のテキストを「 三 」にする。

出来たif文に「 #menu 」の表示・非表示を追加しよう

上で作成したif文に「 #menu 」の表示・非表示を追加します。
「 header span 」のテキストが「 ✖ 」の時は、「 #menu 」を表示し、
「 header span 」のテキストが「 三 」の時は、「 #menu 」を非表示にします。

See the Pen
前面に広がるメニュー5
by endebataro (@endebataro)
on CodePen.

【HTML】
  <header>
    <img src="https://hajimete.org/wp-content/uploads/2019/06/title.png" alt="logo" />
  <span>三</span>
  </header>
  <main>
    <div id="top_contents">
      <div class="top_inner">
        <h1>我々は宇宙人だ。</h1>
        <p>
          世界征服には、どうしたってUFOは欠かせない代物である。<br />
          我々のUFOを紹介しよう!
        </p>
      </div>
    </div>
  </main>
<div id="menu" class="suru">
  <div class="menu_inner">
    <h2>MENU</h2>
    <ul>
      <li>UFOについて</li>
      <li>UFOとは?</li>
      <li>謎の飛行物体「UFO」</li>
      <li>UFOと未確認飛行物体</li>
      <li>ユーフォメーション(UFO)</li>
    </ul>
  </div>
</div>
【CSS】
  body {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none;
      color: rgb(13, 199, 143);
      display: block;
    }
    header {
      position: fixed;
      z-index: 10;
      top:0;
      left:0;
      width: 100%;
      height: 60px;
      background: #fff;
      box-shadow: 0 2px 30px -20px rgba(0,0,0,.4);
    }
    header img {
      position: absolute;
      top: 50%;
      left: 20px;
      height: 45%;
      display:block;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
    }
header span {
  position: absolute;
  top: 50%;
  right: 20px;
  height: 45%;
  display:block;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  cursor: pointer;
}
    #top_contents {
      position: relative;
      width: 100%;
      height: 800px;
      text-align: center;
      display: block;
    }
    .top_inner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform:translate(-50%, -50%);
      -webkit-transform:translate(-50%, -50%);
    }
    .top_inner a {
      display: block;
      padding: 8px 20px;
      margin-top: 30px;
      border: 1px solid rgb(13, 199, 143);
      border-radius: 12px;
      min-width: 240px;
    }
#menu {
  position: fixed;
  z-index: 9;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.95);
  display: block;
  color: #fff;
  transition: .6s ease-in-out;
  -webkit-transition: .6s ease-in-out;
}
.menu_inner {
  position: absolute;
  top:50%;
  left: 50%;
  transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  display:block;
  width: 280px;
  padding-top: 60px;
  text-align: center;
}
.menu_inner h2 {
  margin-bottom: 20px;
}
.menu_inner ul {
  padding:0;
}
.menu_inner li {
  width: 100%;
  display: block;
  margin-top:20px;
  padding: 12px 0;
  border-bottom: 1px solid #fff;
}
.suru {
  transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
}
【jQuery】
  $(function() {
  $("header span").on("click", function() {
    if($(this).text() == "三") {
      $(this).text("×");
      $("#menu").removeClass("suru");
    } else {
      $(this).text("三");
      $("#menu").addClass("suru");
    }
  });
});
javascriptjQuery

フロントエンドエンジニアとして10年目のキャリアを積んでおり、figma、Illustrator、Photoshop、WordPress、HTML、今は亡きXHTML、CSS(scss)、JavaScript(jQuery)、PHPなど使って日々仕事をしています。

仕事で検索する手間を省くためフロントエンド技術に関するブログを書いています。

制作のご依頼やお問い合わせはこちらから連絡お願いします。

エンデ・バタローをフォローする
シェアする
初めてのブログ

コメント

タイトルとURLをコピーしました