【Stinger5】PCとスマホ対応のドロップダウンメニューにカスタマイズする方法（決定版）

 
Stinger5のメニューをドロップダウンにしたい…

ただそれだけなのに出来ない！！という方、必見です。

実際私も2時間ほど悩みましたよ。。

やっと解決したので参考にどうぞ。

ちなみにこの記事【スティンガーをスマホ対応ドロップダウンメニューにカスタマイズする方法（ソースコードあり）】を参考にさせていただきました。

完成イメージ

カスタマイズスタート

style.cssの下記の部分をコメントアウト(削除)します。
（メニューと書かれている部分です）

nav li {
position: relative;
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
}
nav li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
float: left;
color: #333;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
nav li a:hover {
text-decoration: underline;
}
nav li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
border: none;
}
nav li a {
float: left;
color: #333;
text-decoration: none;
}
.menu-navigation-container {
overflow: hidden;
}
nav li a:hover {
text-decoration: underline;
}

style.cssの同じ場所に下記を追加します。
（上記の内容を下記の内容に書き直すってことです）

#main-navigation {
float: left;
border-right: 1px dotted #ccc;
}
#main-navigation li {
list-style: none;
font-size: 13px;
border-left: 1px dotted #ccc;
float: left;
display: inline;
position: relative;
}
#main-navigation li a {
padding: 5px 10px;
display: block;
color: #1a1a1a;
text-align: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#main-navigation li a:hover {
color: #b22222;
text-decoration: underline;
}
#main-navigation li a span {
font-size: 10px;
font-weight: normal;
display: block;
}
#main-navigation li ul {
display: none;
background: #f8f8f8;
font-size: 11px;
border-top: 1px dotted #ccc;
border-left: 1px dotted #ccc;
border-right: 1px dotted #ccc;
padding: 0;
position: absolute;
top: 100%;
left: 0;
margin: 0 0 0 -1px;
z-index: 999;
}
#main-navigation li ul li {
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
}
#main-navigation li ul li a {
width: 120px;
padding: 5px 30px;
border-bottom: 1px dotted #ccc;
}
#main-navigation li ul li ul {
top: 0;
left: 100%;
margin: 0;
}

style.cssの下記の部分をコメントアウト(削除)します。
（アコーディオンと書かれている部分です）

#s-navi dd.acordion_tree {
padding: 0px 10px;
display:none;
overflow: hidden;
}
.acordion_tree li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #CCC;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.acordion_tree li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border: 0px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.acordion_tree li a {
float: left;
color: #333;
text-decoration: none;
}

style.cssの同じ場所に下記を追加します。
（上記の内容を下記の内容に書き直すってことです）

#s-navi dd.acordion_tree {
display: none;
width: 100%;
border-top: 2px solid #333;
background: #fff;
left: 0;
}
.acordion_tree li {
line-height: 30px;
}
.acordion_tree li li {
font-size: 80%;
padding: 0 24px;
}
.acordion_tree li a {
font-size: 14px;
display: block;
padding-top: 5px;
padding-bottom: 5px;
padding-left:15px;
background: #fff;
border-bottom: 1px solid #ddd;
text-decoration: none;
position: relative;
}

私はアコーディオンで苦戦しました。

style.cssはこれで完了！

続きまして、header.phpの変更です。

まず、header.phpの下記の部分をコメントアウト(削除)します。
（一番下の方です）

<nav class="smanone clearfix">
<?php wp_nav_menu(
    array(
        'container' => false ,
        'items_wrap' => '<ul id="menu">%3$s</ul>'
    )
); ?>
  </nav>

header.phpの同じ場所に下記を追加します。
（上記の内容を下記の内容に書き直すってことです）

<nav id="main-navigation" class="smanone clearfix">
<?php
$defaults = array(
'theme_location' => 'navbar',
);
wp_nav_menu( $defaults );
?>
</nav>
<script type='text/javascript'>
jQuery(function(){
jQuery("#main-navigation li").hover(
function(){
jQuery(">ul:not(:animated)",this).slideDown(120);
},
function(){
jQuery(">ul",this).slideUp(120);
});
});
jQuery(function(){
jQuery("#xs-menu-btn").on("click", function() {
jQuery("#xs-navigation").slideToggle();
});
});
</script>

 
以上で全て完了です！！
 

まとめ（感想）

いかがでしたか？今回のカスタマイズは、私と同じ箇所で断念した人も結構多いはず。
そんな方にこそ、この記事がお役に立てれば嬉しいです。

PCとスマホ対応って楽チンでいいですよね！
楽チンって..死語か？（笑）