シェアする

  • このエントリーをはてなブックマークに追加

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

シェアする

  • このエントリーをはてなブックマークに追加
  • 17
stinger5-dropdown-menu-00


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

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

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

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

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

完成イメージ

stinger5-dropdown-menu-01

stinger5-dropdown-menu-02

カスタマイズスタート

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>


以上で全て完了です!!

まとめ(感想)

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

johnny-tubuyaki

PCとスマホ対応って楽チンでいいですよね!
楽チンって..死語か?(笑)
【Stinger5】PCとスマホ対応のドロップダウンメニューにカスタマイズする方法(決定版)
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク