当ブログのメニューが、モバイルで開くと中途半端に改行されてしまうので、ハンバーガーメニューっぽい機能を実装しました。
そういえば、CSSだけでonclick検知ができるんだっけ？と検索したらピッタリの記事を見つけました。onclick検知の実装そのものは一緒です。
WordPressではモバイル検知用に関数が用意されています。if文で条件分岐をさせてやれば切り替えが可能です。
1 2 3 4 5 | <?php if ( wp_is_mobile() ) : ?>//…<?php else: ?>//…<?php endif; ?> |
今回はメディアクエリで切り替えることにしました。450-451pxを境界線に–longと-shortを切り替えます。
1 2 3 4 5 6 7 8 | @media screen and (max-width:450px){ #wp-menu-long{display: none} #wp-menu-short{display: block}}@media screen and (min-width:451px){ #wp-menu-long{display: block} #wp-menu-short{display: none}} |
メニューはulタグで実装されているので、広いときは横に、狭いときは縦に並ぶようにします。labelの消し方がわからなかったので（「メニュー」をクリックすると消えるようにしたかった…）、表示される項目のbackground-colorを変えることで「これが項目だよ」とわかるようにしました。
1 2 3 4 5 6 7 8 9 10 11 12 | <nav id="wp-menu-area"> <div id="wp-menu-inner"> <div id="wp-menu-long"> <?php wp_nav_menu(); ?> </div> <div id = "wp-menu-short"> <label for="toggle">メニュー<?/label> <input type="checkbox" id="toggle"> <div><?php wp_nav_menu(); ?></div> </div> </div><?/nav> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | #wp-menu-area{ width: 100%; height: 50px; display: table; background-color: #0084ad; margin-bottom: 5px; box-shadow: 1px 1px 5px #555555; #wp-menu-inner{ @include wp-inner; display: table-cell; vertical-align: middle; #wp-menu-long{ a{ color: #ffffff; } ul{ list-style-type: none; padding: 0; margin: 0; text-align: center; } li{ width: 100px; display: inline-block; } } #wp-menu-short{ text-align: center; a{ color: #ffffff; } ul{ list-style-type: none; padding: 0; margin: 0; text-align: center; background-color: #46abca; } li{ border-bottom: #ffffff solid 1px; } label{ color: #ffffff; } input{ display: none; } input+div{ display: none; } input:checked+div{ display: block; height: auto; padding-bottom: 15px; } } }} |
コメントを残す