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

jQueryでボタンを押すと前面に広がるメニューの実装方法 CSS
この記事は約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");
    }
  });
});
SNSフォローボタン
エンデ・バタローをフォローする
CSSHTMLjavascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

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

コメント

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