0最近フロントばっかりやっているので、すっかりフロント脳になってます。サーバサイドやるとポンコツになっているのがよく分かりますね。以前プラグインを使ったバーガーメニューの実装について記事を書いたんですが、今回はHTML(PHP)+CSS+jQueryを使って、バーガーメニューを自作する方法について書いてみようと思います。自作できるとデザインや動きのカスタマイズの幅が一気に拡がりますし、意外と簡単にできるので、備忘録的に残しておこうと思います。WordPress専用って部分はほとんどないので、色々と使い回せると思います。今回作るのはこんな感じ↓↓のバーガーメニューです。サイズ感や色などにはあまり言及しないで進めていきます。長いですが、まずはスクリプトのサンプルから。});});ポイントと言えるのは、5つくらいでしょうか。1WordPressに登録したメニューを呼び出して描画HTMLの12〜21行目の部分です。wp_nav_menu()という関数を使って、mainという名前のメニューを呼び出しています。だいたい想像つくかもしれませんが、引数の意味はこんな感じです。1つ1つのメニューを出力するリストタグ(「%3&s」部分にメニューが出力されます)23本線メニューの正体2つ目はCSSの36〜59行目の部分。バーガーメニューではおなじみの3本線は本体、before、afterの3つを使って表現しています。知った時には「こんな作り方してたんだ...」って軽い衝撃でした。色をそれぞれ表しています。