1. >
  2. >
  3. HTMLとCSSだけでトグルを作るコピペ

HTMLとCSSだけでトグルを作るコピペ

メニューのイメージ

更新日:

ハンバーガーメニューをHTMLとCSSだけで作ってみる

WordPressのテーマ選びに失敗して、スマホサイズでメニューがない!とか、wp・テーマ更新したらメニューなくなったけど!という時に。簡単に後付けできるハンバーガーメニューを紹介します。

入れたいところに以下HTMLをコピペ

メニューに直で書き込む感じならこれをコピペ。

入れてすぐはcssが効いてないのでこんな感じになります。
HTMLだけ

phpに入れるなら、カテゴリー呼び出ししたほうが更新も楽!

やってることは同じだけど、カテゴリーとして設定したものをすべて呼び出してくれるので、のちのちカテゴリ名の変更や増減があっても、勝手に変えてくれます。おすすめ。

入れる場所はheader.php

テーマやサイトによって異なると思いますが、だいたいはヘッダーの中に入れればOK。
このサイトで入れるならこの辺です。
ダッシュボードの外観からheader.phpへ
ヘッダーに入れたイメージ

CSSで動くように調整

cssを入れたら、右上にトグルボタンが出てきます。
右はじに出てくる
左上にしたければ、.menubox #hamuiconのrightをleftに変更してください。

ボタンを押してみるとこんな感じで開きます。
メニュー開いたイメージ
右からにゅるっと出てきます。

メニューが全画面に出てくる応用編

さっきのCSSに以下を追加。全画面でメニューをセンターにもってきています。
文字サイズの調整やカラーなどの微調整は必要かも。
全画面のイメージ
以下を追加で入れてくださいね。

スマホサイズで出てくるようにしたい。

ブレイクポイントを決めてメディアクエリで設定しましょう。

このサイトだと、ブラウザを768px幅にしたときに、ナビゲーションメニューが消えてトグルになります。
そのタイミングがどこか探して、以下を追加。
必要になるまでは消えててくれて、必要なタイミング768px幅から出てきてねという指示を書いておきましょう。

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る