これはブログです。

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

この記事は更新されてから1年以上経過しています。

2019/06/23

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

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

 

そういえば、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;
      }
    }
  }
}

 

 

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

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

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

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