テーマを「SANGO」に変更しました。

【STINGER5】スマホ表示のメニューをカスタマイズ

eyecatch_stinger5-menu-mobile

今回参考にしたサイトは、株式会社シスアナコムさんです。ありがとうございます!

カスタマイズ後のイメージ

stinger5-menu-mobile_01

メニューをクリックすると、画面下へ横幅いっぱいに展開します。  

 

jqueryの編集

STINGER5の親テーマにある「js」フォルダの中の「base.js」ファイル開きます。 wp-content/themes/stinger5verxxxxxxxx/js/base.js

/*---------------------------
ドロップダウン
---------------------------*/
/*
jQuery(document).ready(function(){
jQuery(".menu ul.children").hide();
jQuery("li.page_item").hover(function() {
jQuery("ul.children",this).slideDown("slow");
},
function() {
jQuery("ul.children",this).slideUp("slow");
});
});
*/

「/*」と「*/」でドロップダウンの記述を囲い、コメントアウトします。  

 

style.cssの編集

/* スマホメニュー */
.pcnone li {
width: 100%;
padding: 0;
margin: 0;
}

.pcnone li a {
display: block;
padding: 10px;
width: 100%;
background: #4682B4;
color: white !important;
border-bottom: 1px solid white;
}

.pcnone li:hover > a {
background: darkblue;
text-decoration: none;
}

.pcnone li ul li a {
padding-left: 30px;
}

.pcnone li ul li {
padding: 0;
margin: 0;
}

STINGER5のstyle.cssの「スマホメニュー」の項目を、上のコードに変更します。 これでスマホメニューの表示を変更完了。 ここからは個人的なデザインの調整。  

 

style.cssのアコーディオンの項目を編集

/*——————————–———–
アコーディオン
——————————————–*/
#s-navi dl.acordion p {
margin: 0;
}
#s-navi dl.acordion {
margin: 0px;
}
#s-navi dt.trigger {
text-align: left;
padding: 10px 0px;
cursor: pointer;
}
#s-navi dt.trigger .op {
font-size: 14px;
color: #333;
padding: 0px 0px 0px 7px;
}
#s-navi dd.acordion_tree {
padding: 0px;
display:none;
overflow: hidden;
}
.acordion_tree li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
border-left: none;
}
.acordion_tree li li {
float: left;
font-size: 13px;
padding-left: 10px;
display: inline;
padding-right: 10px;
border: none;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 10px;
}
.acordion_tree li a {
float: left;
color: #333;
text-decoration: none;
}

変更点はこちら

  • MENUの表示位置を右から左に移動
  • メニュー左側の区切り線を削除
  • バックグラウンドを画面の横幅いっぱいに表示

背景のカラー等はお好みで変更して下さい。  

 

さいごに

動作もスムーズな感じで良いです! 親テーマのbase.jsを編集したので、子テーマを使用しているとバージョンアップした際に、上書きされてしまうので注意してください。  

コメントを残す