これはブログです。

3DCGとかWebとかカメラとか

2019/06/23

CSSでハンバーガーメニューっぽい機能を実装

当ブログのメニューが、モバイルで開くと中途半端に改行されてしまうので、ハンバーガーメニューっぽい機能を実装しました。

 

そういえば、CSSだけでonclick検知ができるんだっけ?と検索したらピッタリの記事を見つけました。onclick検知の実装そのものは一緒です。

 

WordPressではモバイル検知用に関数が用意されています。if文で条件分岐をさせてやれば切り替えが可能です。

 

 

今回はメディアクエリで切り替えることにしました。450-451pxを境界線に**-longと**-shortを切り替えます。

 

メニューはulタグで実装されているので、広いときは横に、狭いときは縦に並ぶようにします。labelの消し方がわからなかったので(「メニュー」をクリックすると消えるようにしたかった…)、表示される項目のbackground-colorを変えることで「これが項目だよ」とわかるようにしました。

 

 

 

 

 

カテゴリ: プログラミング / タグ: ,

まだコメントはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

%d人のブロガーが「いいね」をつけました。