レスポンシブメニュー実装

ハンバーガーメニュー

【超簡単！】コードコピペで完成。
トグルボタン(ハンバーガーボタン)が完成できたら、いよいよレスポンシブメニューを構築していきます。まずは、下記のUI仕様を事前に確認します。

横幅が狭いスマホ画面の場合、ナビメニューが4つ以上あると、横へ並べることが困難になることが予測されます。そこで、メニューを縦へ集約し一旦非表示にします。トグルボタンを配置し、クリックすることで非表示にしたメニューが出現する仕様を考えます。また、パソコンモニターの場合は、幅広ですので、十分にメニューを横へ配置することが可能となり、トグルボタンは不要のため、非表示にさせる仕様になります。

作成のコツは、モバイルファーストです。まずは、スマートフォン仕様を構築し、メニューを画面から外へ押し出してみましょう。コーディングサンプルを図解で解説しています。

See the Pen
xxbYpEN by nakatax (@cocohp)
on CodePen.

---

●HTMLコード

●CSSコード

@charset "UTF-8";

img{width:100%;}

/*ロゴの大きさを調整*/
#logo img {
  max-width:50%;
}

nav{
 width: 100%;
 height: 70px;
 position: relative;
 background: #F6F6F6;
}

.drawer{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 position: relative;
 height: 70px;
 padding: 0 1em;
}

/*ナビゲーション部分*/

.menu ul li a {
display:block;
  font-weight:bold;
padding: 2em;
border-bottom: 1px dotted #CCC;
  color:#333;
  text-decoration:none;
}


.menu ul li a:hover
{background-color:rgba(0,0,0,0.5);
color:orange;}


.menu{

  text-align:center;
  background-color:rgba(255,255,255,0.5);
  transition: 0.5s ease;/*滑らかに表示*/
  -webkit-transform: translateX(100%);/*画面より100%外へ押し出し非表示にさせる*/

/*  transform: translateX(-100%);/*右から出す場合は、マイナス100%としてください*/

}

/*OPEN時の動き*/
.menu.open {
 -webkit-transform: translateX(0%);
 transform: translateX(0%);/*メニューを元の位置へ戻す*/

}

/*トグルボタンのスタイルを指定*/
.Toggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    width: 42px;
    height: 42px;
    cursor: pointer;
    z-index: 3;
  right:15px;
}
 
.Toggle span {
    display: block;
    position: absolute;
    width: 50px;
    border-bottom: solid 4px #333;
    -webkit-transition: .35s ease-in-out;	/*変化の速度を指定*/
    -moz-transition: .35s ease-in-out;		/*変化の速度を指定*/
    transition: .35s ease-in-out;			/*変化の速度を指定*/
 
}
 /*各ボーダー少しずつずらす*/
.Toggle span:nth-child(1) {
    top:5px;
}
 .Toggle span:nth-child(2) {
    top: 18px;
}
 .Toggle span:nth-child(3) {
    top: 32px;
}
.Toggle.active span:nth-child(1) {
    top: 18px;
/* 1番目のspanをマイナス45度に */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
 
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*----------------------------------ここからPCモニターの記述-----------*/
@media screen and (min-width: 600px) {

/*ロゴの大きさを調整*/
#logo img{max-width:250px;}	
	
nav{
 display: flex;
}

.Toggle{
 display: none;
}
.menu{
width: 100%;
font-size:0.9em;
background-color: transparent;
margin:0 10px;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu ul{
 height: 70px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
 align-items: center;
}
.menu ul li a{
 padding: 0 1em;
 border-bottom: none;
}
.menu ul li a:hover{
background-color:transparent;
}
}

●jsの記述

/*CDNを忘れず記述する*/


/*----------HTML内へ記述する場合は、で、囲いましょう*/
$(function() {
　$('.Toggle').click(function() {
   $(this).toggleClass('active');
  $('.menu').toggleClass('open');
 });
});

仕上がりサンプル

See the Pen
xxbYpEN by nakatax (@cocohp)
on CodePen.

---

【補足】ベンダープレフィックス
最新版のブラウザだけを、対象にする場合は、全く考慮する必要はありませんが、
CSS3をサポートしていない古いバージョンのブラウザを考慮する場合、

-webkit-	Google Chrome, Sfari用
-moz-	Firefox用

など、各ブラウザ専用のベンダープレフィックスが必要になります。
記述の仕方は、セレクターの先頭に記述を追加して記述するだけです。
【例】-webkit-transform: translateX(0);
対応しているブラウザのバージョンをチェック
https://caniuse.com/