[Stinger5]ナビメニューをボックス型にしてドロップダウンメニューにする

2015/05/25 2015/05/25

ナビ4

今回はStinger5の上部のナビゲーションメニューをボックス型にして、ドロップダウンメニューにした時の備忘録です。

デフォルトのナビゲーションメニューもシンプルでいいのですが、企業サイト風にしてみたかったのでカスタマイズしました。

ボックス型のメニューを選択すると下にドロップダウンメニューが表示されますしています。

また、マウスオーバーした際ゆっくり色が変わるようにしてあります。

※カスタマイズは自己責任で行い、必ずバックアップをとっておくようにお願いします。

今回は下記のサイト様を参考にさせていただきました。ありがとうございます。

stinger5サブメニュー付きナビケーションメニューをカスタマイズ | 日本の最新ニュースや話題を届ける情報ステーション

style.cssにコードを記述

スタイルシートにコードを記述しますので【外観】→【テーマの編集】からstyle.cssを選択します。

style.cssの一番下に下記コードをコピペします。

.menu li {
  float: left;
  width: 153px;
  height: 40px;
  padding: 0;
}
 
.menu li a {
  text-align: center;
  display: block;
  padding: 10px 0;
  width: 100%;
  background: #444444;
  color: white !important;
}
 
.menu li:hover > a {
 background: #000000;
-webkit-transition: all .5s;
transition: all .5s;

}
 
.menu li ul li {
  overflow: hidden;
  height: 0;
  padding: 0;
}
 
.menu li ul li a {
  background: 444444;
  padding: 10px 0;
}
 
.menu li:hover ul li {
  overflow: visible;
  height: 30px;
  z-index: 1;
 background: #000000;
-webkit-transition: all .5s;
transition: all .5s;
}