seilog-ger
[ URL:seilog.org ] Writtern by Seiji Nakamura

2023/5/4 (更新日:2023/10/30)

スマホに対応したハンバーガーメニューとクリックしたときに開くシンプルなナビメニューと少し洒落たナビメニューの作り方

Program

スマホで使うナビメニューけっこう面倒くさいですね！

シンプルなナビメニューと少し洒落たナビメニューを解説します。

使いこなせば、時間の節約になりますよ。

目次

  1. スマホに対応したハンバーガーメニューとシンプルなナビメニュー
  2. スマホに対応したハンバーガーメニューと少し洒落たナビメニュー
  3. まとめ

１．スマホに対応したハンバーガーメニューとシンプルなナビメニュー

by inspire-studio pixabay

1-1. 目標の動作

【初期状態】
ハンバーガーメニューをクリックすると、
ハンバーガーメニューは ✖ 印に変化し、
ナビメニューがハンバーガーメニューの下に現れる。

【ナビメニュー開状態】
ナビメニューが開いている状態で、
ハンバーガーメニューをクリックするか、
ナビメニューをクリックすると、
初期状態に戻る。

1-2. 結果

ハンバーガーメニューをクリックしてみてください。

＊画面上部の[HTML][CSS][JS][Result]をクリックすると、プログラミングコードおよび結果が表示されます。

See the Pen nav-menu1 by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊画面下部の［0.5×］をクリックすると見やすくなります。
[1×] [0.5×] [0.25×] を選択すると結果の表示倍率が変わります。

1-3. プログラム説明

HTML

HTML

<div id="global-container"> 
  <div id="container"> 
    <header class="header"> 
      <button class="mobile-menu__btn"> 
        <span></span> 
        <span></span> 
        <span></span> 
      </button> 
      <nav class="mobile-menu"> 
        <ul class="mobile-menu__main"> 
          <li class="mobile-menu__item"> 
            <a class="mobile-menu__link" href="#"> 
              <span class="main-title">メニュー１</span> 
            </a> 
          </li> 
          <li class="mobile-menu__item"> 
            <a class="mobile-menu__link" href="#"> 
              <span class="main-title">メニュー２</span> 
            </a> 
          </li> 
          <li class="mobile-menu__item"> 
           <a class="mobile-menu__link" href="#"> 
              <span class="main-title">メニュー３</span> 
            </a> 
          </li> 
        </ul> 
      </nav> 
    </header> 
  </div> 
 </div>

ハンバーガーメニュー

クラス .mobile-menu__btn に、
3個の spanタグ で制作

ナビメニュー

クラス .mobile-menu に、

<ul><li><a>タグでメニューを制作

SCSS

シンプルなスタイル例を作成します。
この例を参考に、自分にあうスタイル修正してください。

SCSS

.header { 
  height: 100px; 
  display: flex; 
  justify-content: flex-end; 
  align-items: center; 
  position: relative; 
} 
.mobile-menu{ 
  background-color: rgba(192, 192, 192, 0.3); 
  position: absolute; 
  top: 100px; 
  width: 100%; 
  opacity:0; 
  transition:all 0.7s ease; 
  &__btn { 
    background-color: unset; 
    border: none; 
    outline: none !important; 
    cursor: pointer; 
    &>span { 
      background-color: black; 
      width: 35px; 
      height: 2px; 
      display: block; 
      margin-bottom: 9px; 
      transition: transform 0.7s; 
      &:last-child { 
        margin-bottom: 0; 
      } 
    } 
  } 
 &__main {
  text-align: center;
  list-style: none;
  padding: 0;
  margin:0;
 }
 &__item {
  border-bottom: solid 1px #474747;
  border-left: solid 1px #474747;
  border-right: solid 1px #474747;
  &:first-child {
   border-top: solid 1px #474747;
  }
 }
 &__link {
  color: #000;
  font-weight: 700;
  text-decoration: none;
  display: block;
  padding: 24px 0;
  transition: 0.5s;
  &:hover{
   background: #333;
   color: #fff;
  }
 }
}
.menu-open{
 & .mobile-menu{
  opacity:1;
  &__btn {
   &>span {
    background-color: black;
    &:nth-child(1) {
     transform: translateY(11px) rotate(135deg);
    }
    &:nth-child(2) {
     transform: translateX(-18px) scaleX(0);
    }
    &:nth-child(3) {
     transform: translateY(-11px) rotate(-135deg);
    }
   }
  }
 }
}

前提

「ハンバーガーメニューをクリック」
=「.menu-openを#global-containerにつける」

ナビメニューが開いた状態で、
「ハンバーガーメニューをクリック
or ナビメニューをクリック」
=「.menu-openを消す」

⇒必ずしも#global-containerでなくても良い

ナビメニューのスタイル

「初期状態」

ナビメニュー：.mobile-menuは、
.header を基準にして、
上に100pxの空白を設け、
横幅100%表示します。
イニシャル状態は、
opacity:0;で透明状態にします。

基本のスタイルは、
.mobile-menu__main, .mobile-menu__item, .mobile-menu__linkで対応しています。

「.menu-open状態」

ナビメニュー：.mobile-menuは、
opacity:1;で表示状態にします。

transitionでアニメーションができます。

ハンバーガーメニューのスタイル

「初期状態」

.mobile-menu__btnの子要素のspanが、
ハンバーガーメニューの(2px × 35px)の3本です。

3本間にスキを設け、

.mobile-menu__btnの背景を設定します。

「.menu-open状態」

✖の表示にする場合

.mobile-menu__btnの子要素のspanの

1本目をrotateで135deg回転
2本目をscaleで消し
3本目をrotateで-135deg回転
して、translateで位置調整します。

transitionでアニメーションができます。

ｊｓ

ハンバーガーメニュー、ナビメニューをクリックする毎に、
#global-container に、 .menu-open クラスをつけたり消したりする。

ｊｓ

class MobileMenu{
  constructor() {
    this.DOM={};
    this.DOM.btn = document.querySelector('.mobile-menu__btn');
    this.DOM.item = document.querySelector('.mobile-menu__item');
    this.DOM.container = document.querySelector('#global-container');
    this.DOM.btn.addEventListener('click', this._toggle.bind(this));
    this.DOM.item.addEventListener('click', this._toggle.bind(this));
  }
  _toggle(){
    this.DOM.container.classList.toggle('menu-open');
    }
}

new MobileMenu();

MobileMenuクラスの定義

.mobile-menu__btn、.mobile-menu__item、#global-containerをDOMに読み込む。

ハンバーガーメニュー：mobile-menu__btn、
ナビメニュー：mobile-menu__itemを
クリックする毎に、

#global-containerに
menu-openを付けたり消したりします。

new MobileMenu();でインスタンス化

２．スマホに対応したハンバーガーメニューと少し洒落たナビメニュー

by Lumapoche pixabay

2-1. 目標の動作

【初期状態】
ハンバーガーメニューをクリックすると、
コンテンツを記入した領域全体が左にシフトし
ハンバーガーメニューも左にシフトすると同時に ✖ 印に変化。
ナビメニューは画面の右側・シフトした跡地に現れる。

【ナビメニュー開状態】
ナビメニューが表示された状態で、
ハンバーガーメニューを含むコンテンツを記入した領域のどこかをクリックすると、
初期状態に戻る。

2-2. 結果

ハンバーガーメニューをクリックしてみてください。

＊画面下部の［0.5×］をクリックすると見やすくなります。
[1×] [0.5×] [0.25×] を選択すると結果の表示倍率が変わります。

See the Pen nav-menu2 by Seiji Nakamura (@sjnkmr_777) on CodePen.

＊画面上部の[HTML][CSS][JS][Result]をクリックすると、プログラミングコードおよび結果が表示されます。

2-3. プログラム説明

HTML

HTML

<div id="global-container">
  <div id="container">
    <div class="mobile-menu__cover"></div>
    <header class="header">
      <button class="mobile-menu__btn">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </header>
  </div>
  <nav class="mobile-menu">
    <ul class="mobile-menu__main">
      <li class="mobile-menu__item">
        <a class="mobile-menu__link" href="#">
          <span class="main-title">メニュー１</span>
        </a>
      </li>
      <li class="mobile-menu__item">
        <a class="mobile-menu__link" href="#">
          <span class="main-title">メニュー２</span>
        </a>
      </li>
      <li class="mobile-menu__item">
        <a class="mobile-menu__link" href="#">
          <span class="main-title">メニュー３</span>
        </a>
      </li>
    </ul>
  </nav>
</div>

コンテンツを記入する領域

id #container の中に、
全てのコンテンツを記入します。

コンテンツを記入する領域全体をカバー

クラス .mobile-menu__cover で、
コンテンツを記入する領域：
#container 全体をおおうカバーを設定します。
目的は、どこをクリックしても、ナビメニューを閉じることです。

ハンバーガーメニュー

クラス .mobile-menu__btn に、
3個の spanタグ で制作

ナビメニュー

id #container とは別に、
クラス .mobile-menu を、
#container と同層に配置して
<ul><li><a>タグでメニューを制作

SCSS

少し洒落たスタイル例を紹介します。
コンテンツが横にずれて、ナビメニューが現れます。
スタイルを修正して活用してください。

SCSS

#container {
  position: relative;
  background-color: orange;
  height: 100vh;
  z-index: 2;
  transition: all 0.5s;
}
.header {
  background-color: white;
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  &__btn {
    background-color: unset;
    border: none;
    outline: none !important;
    cursor: pointer;
    &>span {
      background-color: black;
      width: 35px;
      height: 2px;
      display: block;
      margin-bottom: 9px;
      transition: transform 0.7s;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &__cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s;
    cursor: pointer;
  }

  &__main {
    padding-top: 30px;
  }
  &__item {
    list-style: none;
    display: block;
    transition: opacity 0.2s;
    opacity: 0;
  }
  &__link {
    display: block;
    margin-top: 50px;
    color: black;
    text-decoration: none;
  }
}

.menu-open {
  & #container {
    transform: translateX(-300px);
    box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.5);
  }

  & .mobile-menu {
    &__cover {
      opacity: 1;
      visibility: visible;
    }
    &__item {
      list-style: none;
      opacity: 1;
      @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
          // transition-delay: $i * 0.07s;
          transition-delay: $i * 0.2s;
        }
      }
    }
    &__btn {
      &>span {
        background-color: black;
        &:nth-child(1) {
          transition-delay: 70ms;
          transform: translateY(11px) rotate(135deg);
        }
        &:nth-child(2) {
          transition-delay: 0s;
          transform: translateX(-18px) scaleX(0);
        }
        &:nth-child(3) {
          transition-delay: 140ms;
          transform: translateY(-11px) rotate(-135deg);
        }
      }
    }
  }
}

前提

「ハンバーガーメニューをクリック」
=「.menu-openを#global-containerにつける」

ナビメニューが見えている状態で、
「ハンバーガーメニューをクリック
or コンテンツを記入する領域： #containerのどこかをクリック」
=「.menu-openを消す」

⇒#container と .mobile-menu の動作の影響がない #global-container で制御する。

ナビメニューのスタイル

「初期状態」

ナビメニュー：.mobile-menuは、
右上を基準に幅300pxのスマホ範囲に記入します。
イニシャル状態では、
ナビメニュー：.mobile-menu__item を
opacity:0;で透明状態にします。

基本のスタイルは、
.mobile-menu__main, .mobile-menu__item, .mobile-menu__linkで対応しています。

「.menu-open状態」

ナビメニュー：.mobile-menu__item は、
opacity:1;で表示状態にします。

transitionでアニメーションができます。

ハンバーガーメニューのスタイル

（シンプルなナビメニュー時と同じ）

「初期状態」

.mobile-menu__btnの子要素のspanが、
ハンバーガーメニューの(2px × 35px)の3本です。

3本間にスキを設け、

.mobile-menu__btnの背景を設定します。

「.menu-open状態」

✖の表示にする場合

.mobile-menu__btnの子要素のspanの

1本目をrotateで135deg回転
2本目をscaleで消し
3本目をrotateで-135deg回転
して、translateで位置調整します。

transitionでアニメーションができます。

コンテンツを記入する領域： #container

「初期状態」

#container が画面全体：100vh に表示される。
右上にハンバーメニューが表示される。

「.menu-open状態」
#container 全体が左にシフトする。
ハンバーガーメニューも .container 上で同期して左にシフトする。
.container の右側にナビメニューを表示するスペースが生じる。

ｊｓ

ハンバーガーメニュー、コンテンツを記入する領域をクリックする毎に、
#global-container に、 .menu-open クラスをつけたり消したりする。

ｊｓ

class MobileMenu{
  constructor() {

    this.DOM={};
    this.DOM.btn = document.querySelector('.mobile-menu__btn');
    this.DOM.cover = document.querySelector('.mobile-menu__cover');
    this.DOM.container = document.querySelector('#global-container');

    this.DOM.btn.addEventListener('click', this._toggle.bind(this));
    this.DOM.cover.addEventListener('click', this._toggle.bind(this));

  _toggle(){    this.DOM.container.classList.toggle('menu-open');
    }
}

new MobileMenu();

MobileMenuクラスの定義

.mobile-menu__btn、.mobile-menu__cover、#global-containerをDOMに読み込む。

ハンバーガーメニュー：mobile-menu__btn、
コンテンツを記入する領域全体：mobile-menu__coverを
クリックする毎に、

#global-containerに
menu-openを付けたり消したりします。

new MobileMenu();でインスタンス化

３．まとめ

by aalmeidah pixabay

ハンバーガーメニュとナビメニューを制作する方法を解説しました。

レスポンシブと組み合わせて見やすいホームページを作ることができるのでぜひ活用してください。

関係する記事も参照ください。

みんなが使うnavbarとちょっと洒落たnavbarをcssとhtmlでつくれます

＊最後まで読んでいただきありがとうございます。
　舌足らずで説明不足の所はお許しください。

　また、改良項目・修正項目がございましたらご指摘いただけたら幸いです。

Copyright – Seiji Nakamura, 2023 All Rights Reserved.

人気記事

サイト内検索の標準版とhtmlで自作するカスタマイズした検索窓

positionプロパティの使い方とposition:absoluteで高さがなくなる場合の対処方法

電気自動車の電磁波・ノイズの車内での実際の対策【インバータのシールドなど】

電気自動車の電磁波・ノイズで事故や健康被害を起さない為に、電磁波が発生する原理を理解してから対策を考えます

みんなが使うnavbarとちょっと洒落たnavbarをcssとhtmlでつくれます

関連記事

Gerd_Altmann
「リンクエラーを検出しました」というメールが来た時のワードプレスでの確認方法と対処方法
jmexclusives_pixabay
中央にあるbuttonを押した時、cssで影を消して凹むように見せます！
初心者がFTPソフトをダウンロードしてWordPressのバックアップを取る
ホームページのトップページの作り方を、失敗しないためのヒントをまじえて初心者にわかりやすく解説します。
みんなが使うnavbarとちょっと洒落たnavbarをcssとhtmlでつくれます
WordPressで作るブログの始め方【これからブログを始める初心者にわかる手順書】
positionプロパティとz-indexプロパティを使って思い通りのレイアウトを表示します。実際のコードを確認！
Transitionを使うとcssのみでアニメーションを手軽に作れます。便利で頻繁に使えるので解説していきます。