
Stinger5のメニューをドロップダウンにしたい…
ただそれだけなのに出来ない!!という方、必見です。
実際私も2時間ほど悩みましたよ。。![johnny-c]()

やっと解決したので参考にどうぞ。
ちなみにこの記事【スティンガーをスマホ対応ドロップダウンメニューにカスタマイズする方法(ソースコードあり)】を参考にさせていただきました。
- 完成イメージ
- カスタマイズスタート
- style.cssの下記の部分をコメントアウト(削除)します。 (メニューと書かれている部分です)
- style.cssの同じ場所に下記を追加します。 (上記の内容を下記の内容に書き直すってことです)
- style.cssの下記の部分をコメントアウト(削除)します。 (アコーディオンと書かれている部分です)
- style.cssの同じ場所に下記を追加します。 (上記の内容を下記の内容に書き直すってことです)
- 続きまして、header.phpの変更です。
- まず、header.phpの下記の部分をコメントアウト(削除)します。 (一番下の方です)
- header.phpの同じ場所に下記を追加します。 (上記の内容を下記の内容に書き直すってことです)
- まとめ(感想)
完成イメージ
カスタマイズスタート
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;
}
私はアコーディオンで苦戦しました。![johnny-c]()

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とスマホ対応って楽チンでいいですよね!
楽チンって..死語か?(笑)