【STINGER5】ドロップダウンメニューをお洒落にカスタマイズ！［PC スマホタブレット対応］

どうも、ジョニーです。

当ブログで使用しているテーマ（STINGER5）のカスタマイズした箇所の備忘録です。
（ちょいちょい書いていきます）

同じ箇所でも、サイトによって様々なカスタマイズ方法がありますよね。一概にどれが良いとは言い切れない。

これは当ブログでのカスタマイズなので、ご自身のやり方に合ったものを参考にしてくださいね！

使用するにしても、カスタマイズするにしても、自己責任でお願いします。

では、いってみよう！

カスタマイズする理由
カスタマイズスタート
1. 「CSSコード」をいじる。PC表示編
2. 「CSSコード」をいじる。スマホ＆タブレット表示編
まとめ（感想）

カスタマイズする理由

デフォルトでもよいのですが、よりサイトに合ったデザインにしたかったのでカスタマイズします。

当ブログはこんな感じにしています。
パソコン表示ではこんな感じ。（オンマウス）

スマホ表示ではこんな感じ。

カスタマイズスタート

「CSSコード」をいじる。PC表示編

「style.css」に下記のコードを追記または書き換えます。
　※当ブログの場合は子テーマに追記しています。

/*ナビゲーションメニューのカスタマイズ PC表示編 開始*/
.smanone .menu-item {
  display: inline-block;
  text-align: left;
  padding: 0px 5px 0px 0px;
}

.smanone a {
  display: block;
  padding: 15px;
  border: 3px solid #dcf1f9;
  position: relative;
  line-height: 1.3;
  padding: 3px 8px;
  margin-bottom: 5px;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
}

.smanone .sub-menu {
  left: -9999px;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -ms-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  width: 200px;
  z-index: 99;
  margin-top: 41px;
}

.smanone .menu > li:hover .sub-menu a, .smanone .sub-menu a {
  background: #fff;
  color: #000;
  position: relative;
  width: 150px;
  border: 3px solid #dcf1f9;
  box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
  -webkit-box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
  -moz-box-shadow: rgba(113, 135, 164, 0.098) 0px 0px 6px 3px;
}

nav.smanone .sub-menu li a {
  border-top: none;
}

.smanone .menu-item:hover > .sub-menu {
  left: auto;
  opacity: 1;
}

.smanone .sub-menu .sub-menu {
  margin: 0px 0 0 230px;
}

.smanone .menu > li:hover .sub-menu a:hover, .smanone .sub-menu a:hover {
  background: #00aaf9;
}

.smanone a {
  padding: 7px 7px 7px 7px;
}

.acordion_tree li {
  width: 100%;
}

nav {
  padding: 0;
  margin: 10px 0;
}

nav.smanone li {
  border: none;
}

nav.smanone a {
  color: #000;
}

nav.smanone li a:hover {
  background: #00aaf9 !important;
  text-decoration: none !important;
  color: #fff !important;
}

nav.smanone .sub-menu li a {
  border-top: none;
}
/*ナビゲーションメニューのカスタマイズ PC表示編 終了*/

色やサイズはお好きなように
カスタマイズしてください。

「CSSコード」をいじる。スマホ＆タブレット表示編

先ほどの［PC表示編］の直後に下記のコードを追記または書き換えます。
　※当ブログの場合は子テーマに追記しています。

/*ナビゲーションメニューのカスタマイズ スマホ＆タブレット表示編 開始*/
@media only screen and (max-width: 780px) {
  .acordion_tree li {
    font-size: 12px;
    font-weight: bold;
    border: 2px solid #dcf1f9;
    margin-bottom: 2px;
    margin-left: -1px;
    padding: 0px;
    width: 100%;
    border-radius: 5px;
    color: #fff;
    background-color: #fff;
    line-height: 25px;
    text-align: center;
  }

  .acordion_tree li li {
    font-weight: normal !important;
    font-size: 10px;
    border: 2px solid #dcf1f9;
    margin-bottom: 5px;
    margin-left: 4px;
    padding: 0px;
    width: 30%;
    border-radius: 5px;
    color: #000;
    background-color: #fff;
    line-height: 20px;
    text-align: center;
  }

  .acordion_tree li a,
  .acordion_tree li li a {
    width: 100%;
  }

  .acordion_tree li a:hover,
  .acordion_tree li li a:hover {
    background-color: #00aaf9;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
  }
}
/*ナビゲーションメニューのカスタマイズ スマホ＆タブレット表示編  終了*/

色やサイズはお好きなように
カスタマイズしてください。

ざっくりですが、以上で完了！

上記を参考にお好きにカスタマイズどうぞ。

今回参考にした記事はこちら
「STINGER5のスマホとタブレットサイズ表示時のメニューバーをカスタマイズ」
「【Stinger5】ドロップダウンメニューのスタイリングをする方法【コピペでOK】」