ホーム >

WordPress >

WordPress スマホ用のメニュー

公開日: 2016/06/22        0    0    0    1       

WordPressのサイトのスマホ用のメニュー
ヘッダーに追加してみました

こんな感じです

忘れないように書いておきます

Font Awesomeを使用しています
例) <i class=”fa fa-twitter” aria-hidden=”true”></i>

使用していない場合はテキストか好きな画像に変更してください

<ul id="normal" class="dropmenu">
  <li class="menu1"><a href="#"><i class="fa fa-home" aria-hidden="true"></i></a>
  </li>
  <li class="menu2"><a href="#">カテゴリー</a>
    <ul>
	<li><a href="#">カテゴリー</a></li>
	<li><a href="#">カテゴリー</a></li>
	<li><a href="#">カテゴリー</a></li>
	<li><a href="#">カテゴリー</a></li>
	<li><a href="#">カテゴリー</a></li>
	<li><a href="#">カテゴリー</a></li>
    </ul>
  </li>
  <li class="menu3"><a href="#">SNS</a>
    <ul>
      <li><a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="#"><i class="fa fa-google-plus fa-2x" aria-hidden="true"></i></a></li>
        <li><a href="#"><i class="fa fa-pinterest-p fa-2x" aria-hidden="true"></i></a></li>
	<li><a href="#"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>

    </ul>
  </li>
  <li class="menu4"><a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
  </li>
  <li class="menu5"><a href="#">その他</a>
  </li>

</ul>

<style>
.dropmenu{
  *zoom: 1;
  list-style-type: none;
  width: 100%;
  margin: 5px auto 5px;
  padding: 0;
}
.dropmenu:before, .dropmenu:after{
  content: "";
  display: table;
}
.dropmenu:after{
  clear: both;
}
.dropmenu li{
  position: relative;
  /*width: 20%;　すべて同じ幅の場合はこれ*/
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  background: #9b9fa9;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
.dropmenu li ul{
  list-style: none;
  position: absolute;
  z-index: 9999;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 0;
}
.dropmenu li ul li{
  width: 100%;
}
.dropmenu li ul li a{
  padding: 13px 15px;
  border-top: 1px solid #676767;
  background: #9b9fa9;
  text-align: left;
}
.dropmenu li:hover > a{
  background: #9b9fa9;
}
.dropmenu li a:hover{
  background: #676767;
}
#normal li ul{
  display: none;
}
#normal li:hover ul{
  display: block;
}
.dropmenu li.menu1{width: 16%;}
.dropmenu li.menu2{width: 40%;}
.dropmenu li.menu3{width: 18%;}
.dropmenu li.menu4{width: 16%;}
.dropmenu li.menu5{width: 10%;}


</style>

おまけ
サイドバーにリンクしたい時は、サイドバーのIDを
<a href=”#サイドバーのID”>とすればOK