当ブログのメニューが、モバイルで開くと中途半端に改行されてしまうので、ハンバーガーメニューっぽい機能を実装しました。
そういえば、CSSだけでonclick検知ができるんだっけ？と検索したらピッタリの記事を見つけました。onclick検知の実装そのものは一緒です。
WordPressではモバイル検知用に関数が用意されています。if文で条件分岐をさせてやれば切り替えが可能です。
<?php if ( wp_is_mobile() ) : ?>
//…
<?php else: ?>
//…
<?php endif; ?>
今回はメディアクエリで切り替えることにしました。450-451pxを境界線に–longと-shortを切り替えます。
@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を変えることで「これが項目だよ」とわかるようにしました。
<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>
#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;
}
}
}
}
コメントを残す