少し乗り遅れた感がありますが、物は試しという事でハンバーガーメニューを実装してみました。

画面右上にハンバーガーメニューを配置。

開くとこんな感じです。

モバイルだとこれが、

こうなります。

WordPressにはレスポンシブメニューやハンバーガーメニューを実装出来るプラグインが沢山あって、色々と試して見たのですが、設定と見た目のカスタマイズが億劫だったので、今回はjQueryやJavaScriptを利用せず、HTMLとCSSのみで実装しました。
input要素のcheckboxとCSSで実現しています。
ハンバーガーメニューの中には取り合えず主要なリンクを入れています。
細かい事すれば他にも色々と出来そう。

参考

こちらのサイトのソースを活用させて頂きました。
checkboxを使ってCSSだけでハンバーガーメニュー|q-Az

コメントを投稿する

* が付いている項目は必須です。
メールアドレスが公開されることはありません。