コピペ可 初めてでもできるハンバーガーメニュー後編【第21話】

WordPress学習記録

本記事は前話の続きでハンバーガーメニューの作り方についてご紹介しています。

前編は以下から読むことができます。

コピペ可 初めてでもできるハンバーガーメニュー前編【第20話】
コピペでプログラミング初心者でも簡単にハンバーガーメニューを実装できる!HTML+CSS+jQueryを使って実際にプログラミング初心者が初めてハンバーガーメニュー作りに挑戦した時の詳しいコーディング方法についてご紹介しています。

それでは早速ハンバーガーメニューの作り方についてみていきます。

ハンバーガーボタンのスタイリング

.header{
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  background-color: bisque;
  &__left{
   margin-left: 16px;
  h1{
   line-height: 70px;
   font-size: 1.8rem;
  }
 }
 &__right{
  &__hamburger{
   position: relative;
   width: 70px;
   height: 70px;
   right: 20px;   //right: 50%; 左右中央揃えにしたい場合   //transform: translateX(50%); 左右中央揃えにしたい場合
   background-color: rgba(255, 255, 255, 0.7); //あとでヘッダーの背景色と同じにする
   border: none;
   cursor: pointer; //マウスを近づけるとポインターマークになる
   &__line{
    position: absolute;
    right: 50%;    transform: translateX(50%);
    width: 30px;
    height: 2px;
    background-color: black;
    &:nth-of-type(1){
     top: 20px;
    }
    &:nth-of-type(2){
     top: 34px;
    }
    &:nth-of-type(3){
     top: 48px;
    }
   }  }}

かなり長くなりました。

1. ボタンタグ要素にposition:relative指定
2. ボタンタグ要素の大きさ指定
(ヘッダーの高さと同値の正方形がベスト)
3. right: XXpxで画面右端からXXpx離すように指定
4. border: noneで枠線を消去

この4ステップで線を作る枠は完成です。続いては線のスタイル指定です。

1. position: absoluteを指定
2. widthで横線の長さ、heightで線の太さを指定
3. rightプロパティで親要素の右端からどれだけ離すか指定
(親要素幅の中央揃えにしたい場合)
right: 50%, transform: translateX(50%)で指定する
4. background-colorで線の色を指定
↑colorプロパティでは反映されません!

ここまで指定するとこのようになります。

最後に3本線の位置を指定します。

:nth-of-type( )で同じクラスをつけている子要素の何番目という指定ができます。

Attention Required! | Cloudflare

ハンバーガーメニューをjQueryで動きづけ

&__menu {
 display: none; //追記
 position: absolute;
 top: 70px;
 left: 0;
 width: 100%;
}

サイトを開いていた際は隠しておきたいのでdisplay: noneを追記します。

$('.header__right__hamburger').click(function(){
  $(this).toggleClass('is-open');
  $('.header__right__menu').slideToggle(200);
});

slideToggleメソッドはクリックでslideDown/slideUpを繰り返すメソッドです。前のカッコ内に先ほどdisplay: noneを指定したクラスを入れ、後ろのカッコ内で速度を指定できます。

slideToggleの他にslideFadeというメソッドもあります。

Attention Required! | Cloudflare

これにてハンバーガーメニューが完成しました!

最後に

最後までお読みいただきありがとうございました。ハンバーガーメニューについてはいかがだったでしょうか?
初めて作る時、私は各サイトから集めてきた情報で何日もかかりながらハンバーガーメニューを作りました。

ハンバーガーメニューといってもいろんなカスタマイズができるので私の希望通りに作るのは初心者の私にはとても大変でした。

次回以降はどこかでカルーセル(スライダー)に挑戦した時の詳しい作り方についてご紹介していこうと思います。

デザインカンプからコーディング RaiseTech最終課題 【第22話】
RaiseTechの最終課題であるデザインカンプからのコーディングとWordPress化に取り掛かります!プログラミング未経験者が1ヶ月半でどれほどのレベルに達しているのかコードの内容を大公開しながらご紹介します。デザインカンプからのコーディングの方法についてもわかりやすくご紹介します。
スポンサーリンク

コメント

タイトルとURLをコピーしました