カテゴリ一覧から記事を探す

CSSコピペで完了!ハンバーガーメニューの作り方!

CSSコピペで完了!ハンバーガーメニューの作り方!

ハンバーガーメニューの作り方、なかなか難しいですよね。

今回は、コピペで基本的にOKとなるハンバーガーメニューの作り方と、ハンバーガーメニューの中にカテゴリを入れていく方法を解説していきたいと思います!

この記事を読めば、誰でも簡単に作るのが難しいハンバーガーメニューを簡単に作れますよ!

私の使用しているテーマはStinger8ですので、それに基準を合わせて説明していきますが、他のテーマでも書き方が多少違うだけで基本的な考え方は同じですので、参考にしてみてください。

1.ハンバーガーメニューの完成品

ハンバーガーメニューの完成品

スマホ画面の時だけ出てきます。左上の三本線を押すと

ハンバーガーメニューの完成品

このように横からカテゴリを詰め込んだメニューが出てくるものですね。

この中にサイト内検索フォームを置いたり、直接記事に飛ばすようなオススメ記事を挿入する人もいたりと、使い方は様々です。

右側の黒い部分か、上側のバツをクリックすると元に戻ります。

こちらのバージョンでは、jQueryを使用して全面にメニューが出てくる形式で作成しています。

2.ハンバーガーメニューのHTML

サルワカさんのを大枠として拝借してきています。

中身の部分まで書ききったものが以下のものになります。

HTML
<nav id="s-navi" class="pcnone">
  <dl class="acordion">
    <dt class="trigger"></dt>
    <div id="nav-drawer">
      <input id="nav-input" type="checkbox" class="nav-unshown">
      <label id="nav-open" for="nav-input"><span></span></label>
      <label class="nav-unshown" id="nav-close" for="nav-input"></label>
      <div id="nav-content">
        <!--中身-->
        <div class="hamburger-top"><label class="cancel" for="nav-input"></label></div>
        <div class="category">CATEGORY</div>
        <?php
			if ( has_nav_menu( 'smartphone-menu' ) ) : 
				$defaults = array(
					'theme_location' => 'smartphone-menu',
				);
			else : 
				$defaults = array(
					'theme_location' => 'primary-menu',
				);
			endif;?>
          <?php wp_nav_menu( $defaults ); ?>
      </div>
    </div>
    <!--中身ここまで-->
  </dl>
</nav>

5行目からが拝借してきた部分+中身ですね。

1~4行目については、Stinger8にもともと書かれていたものだったので、他のテーマの方も同じように組み合わせるとできるかなと思います。

編集する箇所
外観
テーマの編集
st-accordion-menu.php

これを(Stinger8なら)上記の場所に貼り付ければHTMLは完成です。

他テーマでも、同じような名称の部分があると思いますので、そちらに貼り付けてください。

サイト内検索のための検索フォームをハンバーガーメニュー内に設置したい場合は、以下の記事を参考にしつつ、途中でHTMLに加えてください!

上記のコード内に検索窓を表示するコードを挿入するだけで設置できます。

3.ハンバーガーメニューのCSS

次に、デザインを整えるCSSについてです。

CSS
#nav-drawer {
  position: relative;
  margin-left: 18px;
  margin-top: -27px;
}


/*チェックボックス等は非表示に*/
.nav-unshown {
  display: none;
}


/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}


/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #ff69b4;
  display: block;
  content: '';
  cursor: pointer;
}

#nav-open span:before {
  bottom: -8px;
}

#nav-open span:after {
  bottom: -16px;
}


/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}


/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/
  max-width: 330px;/*最大幅(調整してください)*/
  height: 100%;
  background: #fff;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}


/*チェックが入ったらもろもろ表示*/
#nav-input:checked~#nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked~#nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示(右へスライド)*/
  box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
  z-index: 9998;
}

.hamburger-top {
  height: 40px;
  margin-top: 5px;
}

.menu-hamburger-menu-container li {
  float: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  list-style: none;
  text-align: left;
  border-bottom: dashed 1px #fedbf1;
}

.menu-hamburger-menu-container li:last-child {
  border: none;
}

.menu-hamburger-menu-container li a {
  text-decoration: none;
  color: #000;
}

.menu-hamburger-menu-container a:before {
  font-family: FontAwesome;
  content: "\f07b";
  color: #00bb80;/*アイコン色*/
  margin-right: 5px;
}

.menu-hamburger-menu-container .menu-item-499 a:before,
.menu-hamburger-menu-container .menu-item-500 a:before,
.menu-hamburger-menu-container .menu-item-501 a:before,
.menu-hamburger-menu-container .menu-item-504 a:before,
.menu-hamburger-menu-container .menu-item-828 a:before {
  font-family: FontAwesome;
  content: "\f061";
  color: #00bb80;
  margin-right: 5px;
}

.cancel {
  display: inline-block;
  position: relative;
  margin: 0 0 0 250px;
  padding: 0;
  width: 5px;
  height: 30px;
  background: #ff69b4;
  transform: rotate(45deg);
  z-index: 99
}

.cancel:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 31px;
  height: 5px;
  margin-top: -3px;
  background: #ff69b4;
}

.category {
  background-color: #fedbf1;
  padding: 15px 0;
  font-size: 23px;
  color: #ff69b4;
  font-weight: bold;
}

やたらめったら長いので、順に説明していきます。

一旦コピペして、なにかおかしい部分があったらどこを直すべきか探ってみてください。

カテゴリの内容の、アイコンの部分が確実に崩壊しますので、その部分(カテゴリの内容)だけは説明を読んで各自で修正してください。

ハンバーガーメニューの大枠の部分

.hamburger-topまでが大枠の部分です。これも参考にしています。

クリックしたら黒い背景を出現させるのもこの中にありますね。

もし説明が必要なら、詳しい説明はサルワカさんのページまで。

ハンバーガーメニューの上側の✖印

hamburger-topが✖印を入れるためのボックスというイメージです。

CSSの以下の部分で✖印を作成。二つの棒を交差させています。

CSS
.cancel {
  display: inline-block;
  position: relative;
  margin: 0 0 0 250px;
  padding: 0;
  width: 5px;
  height: 30px;
  background: #ff69b4;
  transform: rotate(45deg);
  z-index: 99
}

.cancel:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 31px;
  height: 5px;
  margin-top: -3px;
  background: #ff69b4;
}

Categoryの文字の部分

最後にある.categoryの部分で作成しています。

背景色はbackground-colorの部分、文字色はcolorの部分で設定していますので、自由に変更してください。

ハンバーガーメニュー内のカテゴリの内容

ここは各自で異なる場所です。

以下のCSSでFontAwesomeでアイコンを取得し、ファイルのアイコンを一旦すべてのカテゴリにつけていきます。

CSS
.menu-hamburger-menu-container a:before {
  font-family: FontAwesome;/*アイコン取得先*/
  content: "\f07b";/*アイコンコード*/
  color: #00bb80;/*アイコン色*/
  margin-right: 5px;/*アイコンと文字の間隔*/
}

その後、以下の部分で、副カテゴリとなる部分を指定して、矢印アイコンにしています。

CSS
.menu-hamburger-menu-container .menu-item-499 a:before,
.menu-hamburger-menu-container .menu-item-500 a:before,
.menu-hamburger-menu-container .menu-item-501 a:before,
.menu-hamburger-menu-container .menu-item-504 a:before,
.menu-hamburger-menu-container .menu-item-828 a:before{
  font-family: FontAwesome;/*アイコン取得先*/
  content: "\f061";/*アイコンコード*/
  color: #00bb80;/*アイコン色*/
  margin-right: 5px;/*アイコンと文字の間隔*/
}

副カテゴリとなる部分のmenu-itemの番号が各自で違うので、各自で番号を設定する必要があります。

デベロッパーツールを開き、副カテゴリとなる部分がどのような名前で指定されているかを見ます。

デベロッパーツールを開き、下の画像の部分をクリックして副カテゴリにもっていけば分かります。

デベロッパーツールの開き方が分からない人・スマホで閲覧している画面を表示する方法が分からない人は、以下の記事で説明していますので確認してください。

デベロッパーツールを開いて確認

スマホ表示にするとハンバーガーメニューが現れますので、メニューを開いて、①の部分をクリックして、②の部分にカーソルを持っていくと、該当のHTMLを見ることができます。

③の部分を見ると、副カテゴリ「本」の部分は、menu-item-499ということがわかりますね。

CSS
.menu-hamburger-menu-container .menu-item-499 a:before,
.menu-hamburger-menu-container .menu-item-500 a:before,
.menu-hamburger-menu-container .menu-item-501 a:before,
.menu-hamburger-menu-container .menu-item-504 a:before,
.menu-hamburger-menu-container .menu-item-828 a:before{
  font-family: FontAwesome;/*アイコン取得先*/
  content: "\f061";/*アイコンコード*/
  color: #00bb80;/*アイコン色*/
  margin-right: 5px;/*アイコンと文字の間隔*/
}

上記のコードは子カテゴリ部分についての抜粋です。
menu-item-499が子カテゴリとしてあったので、このコードの1行目にmenu-item-499を入れ込んでいます。

あとは各自で、副カテゴリがある分だけ地道に設定していきます。
私は副カテゴリが5つありましたので、5行分menu-item-○○○を入れ込んでいます。

これ何してるの?という話なのですが、menu-item-499の部分にはファイルアイコンではなく矢印アイコンを設定しています。

気を付けなければならないのが、カテゴリは以下の場所で作成していないと表示されません。

カテゴリーの作成方法
外観
メニュー
スマートフォンメニュー

これを忘れているとなにも表示されないと思いますので、ご注意を。

今回の方法では、カテゴリはすべて親カテゴリとして並べています。それを、デザインによって副カテゴリのように見せているだけです。

副カテゴリへ設定する

画像のようにドラッグで副カテゴリにすることもできます。

そのようにすれば、入れ子の状態になりますが、、二回もクリックする必要性が出てきてユーザにとって面倒なのでやっていません。

 入れ子の状態にすると、ハンバーガーメニュー内で1回タップすることで子カテゴリが出現し、もう一回タップすることで子カテゴリページへジャンプすることになります。カテゴリ数が多い人は入れ子の状態の方がいいかも。

ハンバーガーメニュー内のカテゴリの下線

以下のCSSで指定しています。

CSS
.menu-hamburger-menu-container li {
  float: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  list-style: none;
  text-align: left;
  border-bottom: dashed 1px #fedbf1;
}

.menu-hamburger-menu-container li:last-child {
  border: none;
}

最後のカテゴリ部分については下線がつかないようにしています。

線の色を変えるときや、線はつけない!という人はこの部分をいじってください。

4.まとめ

うまくできたでしょうか?

かなりドギツイ色をしていますので、各自で色の変更は必須となりますが・・・。

また、色々なサイトのハンバーガーメニューを見てみるのも面白いですよ。かなり凝っているものもあり、面白いです。

jQueryを使用したバージョンも見てみる

また、アレンジしたいけどCSSがわけわからないという人はHTMLとCSSの基礎についてまとめているページを確認してみてください。