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でつくれます

関連記事

初心者でもcssとhtmlを使ったスライダーでスライドショーを作れます！
「align-items:center;」「vertical-align:middle;」line-heightで要素を上下中央に配置するcssの方法
WordPressのファイルやデータをアップロードしてインターネットに公開しましょう！
階層ナビ
ナビを階層にして、cssとhoverを使って必要なナビを表示する
Gerd_Altmann
「リンクエラーを検出しました」というメールが来た時のワードプレスでの確認方法と対処方法
swiper.jsの使い方：高機能なスライダーの使い方を解説します【初心者用】
ボタンをaタグ,button要素,input要素で使うヒント！type属性がbutton,submitの違いまとめ
2021年：CSS リセットすることでブラウザ独自のCSSを思いどおりのWebSiteデザインにコーディングする書き方