画面スクロールについてくるハンバーガーメニューボタンを作成【WordPress】【CSS】

開閉ボタンボックスのCSSスタイル

.nav-button{
  position: absolute;
  top: 0;
  right: -50px;
  width: 50px;
  height: 50px;
  background: #689EFB;/*ボックス背景色*/
  color:#fff;/*文字色*/
  text-align: center;
}

2行目の「position: absolute;」で絶対的な位置にボックスを配置しています。今回は親要素となる<div id="nav-drawer">が「position: relative;」とpositionプロパティの値がstatic以外なので親枠の左上が絶対的な位置の基準となります。

ボックスのサイズを5～6行目で幅50px（ピクセル）・高さ50pxにし、3～4行目で親要素からの位置を上と右から-50pxに指定することで、スライドメニューウィンドウの右上にくっついた状態にしています。

開閉ボタンのopenとcloseの切り替え

.nav-button:after{
  position: relative;
  bottom: 4px;/*テキスト下からの位置*/
  content: "open";
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-menu .nav-button:after{
  content: "close";
}

擬似要素「:after」を使用することで、JavaScriptの「text()」メソッドを使わずにテキストの入替を行っています。

CSSで文字列「open」を表示させているので、7行目のinput要素にchecked属性が付与された場合のセレクタを使用することで、「close」に文字列を表示変更できるようにしています。

開閉ボタンのハンバーガーメニューボタンのスタイルとアクション

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: relative;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;/*アイコン色*/
  display: block;
  content: '';
  transition: all 0.5s ease-in-out;/*アニメーションの速さ*/
}
#nav-open span:before{
  top: -10px;
}
#nav-open span:after{
  top: 7px;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-menu .nav-button #nav-open span:before{
  top: 0;
  transform: rotateZ(45deg) scale(4);
}
#nav-input:checked ~ #nav-menu .nav-button #nav-open span{
  transform: scale(0.25) rotateY(360deg);
}
#nav-input:checked ~ #nav-menu .nav-button #nav-open span:after{
  top: -3px;
  transform: rotateZ(-45deg) scale(4);
}

このセレクタ部分で、三本線の「ハンバーガーメニューボタン」のスタイルを指定しています。

「2.ハンバーガーメニューボタンにアクションをつける」で紹介している記事の「ハンバーガーメニューボタンのアクション」とはセレクタがことなっております。ただし、「span」「span:before」「span:after」のそれぞれの役割は同じなので、対応するCSSスタイルを入れ替えると、ご紹介しているアクションに変更することができます。

x軸方向に回転の場合

#nav-input:checked ~ #nav-menu .nav-button #nav-open span{
  transform: scale(0.25) rotateX(360deg);
}

y軸方向に回転の場合

#nav-input:checked ~ #nav-menu .nav-button #nav-open span{
  transform: scale(0.25) rotateY(360deg);
}

z軸方向に回転の場合

#nav-input:checked ~ #nav-menu .nav-button #nav-open span{
  transform: scale(0.25) rotateZ(360deg);
}

色変更の場合

#nav-open span, #nav-open span:before, #nav-open span:after {
  top: 10px;
  position: relative;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;/*アイコン色*/
  display: block;
  content: '';
  transition: all 0.5s ease-in-out;/*アニメーションの速さ*/
}
#nav-open span:before{
 top: -20px;
}
#nav-open span:after{
  top: -13px;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-menu .nav-button #nav-open span:before{
  background:#00FF00;/*変化後の色_緑*/
  top: 0;
  transform: rotateZ(-90deg);
}
#nav-input:checked ~ #nav-menu .nav-button #nav-open span{
  background: #FF0000;/*変化後の色_赤*/
  top: 0;
  transform: rotateZ(45deg);
}
#nav-input:checked ~ #nav-menu .nav-button #nav-open span:after{
  top: 0;
  transform: rotateZ(-45deg) scale(0);
}