Wordpress

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

  1. HOME >
  2. Wordpress >

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

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

ハンバーガーメニューを作成

  • オリジナルのハンバーガーメニューボタンを作りたい。
  • メニュー開閉時に、アイコンに動きをつけたい。
  • HTMLとCSSで作れるものにしたい。

ココがポイント

結論:
「::before」「::after」の擬似要素を使うことで、ハンバーガーボタンの三本線から、閉じるボタンのバッテンに変化をつけられる。また、input要素の「チェックボックス」を使用することで、クリックアクションに対して、メニューウィンドウの開閉が行える。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、Webページを作成していると、ハンバーガーボタンを作成してメニューを開閉できるアイコンにしたいと思ったことはございませんか?

今回は、ウィンドウの左上に固定されたハンバーガーメニューボタンを作成。メニューウィンドウを開閉できるHTMLとCSSをご紹介します。JavaScriptを使わなくても、ユーザーのクリックアクションに対して、画面表示を変更できるので、お好みのカスタマイズをしやすい作りになっております。

 

1.画面と一緒にスクロールするハンバーガーメニュー

See the Pen
slide_menu
by 三好雄介 (@yusuke5028198)
on CodePen.

ウィンドウの左上に固定されたメニューボタンを作成しています。OPENとCLOSEボタンもメニューウィンドウについて移動してくれるので、なかなかアニメーションとして面白いと思います。

参考

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);
}

 

2.ハンバーガーメニューボタンにアクションをつける

ハンバーガーメニューボタンのアクションについて、HTMLとCSSで簡単につくれるものをご紹介しています。参考までにどうぞ。

 

もっと詳しく

 

まとめ

お疲れ様でした。

今回は、JavaScriptを使用しなくても、スライドメニューが作成できるので紹介いたしました。

画面スクロールに合わせて移動できるスライドメニューは、利便性がよく是非Webページに追加しておきたいですね。「ハンバーガーメニューボタン」もCSSスタイルを使用することで、アクションのあるデザインにできるので、お好みのスタイルを自作してみても面白いと思います。

最後まで、ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.