オレンジメニューでサブメニューを出したかった Simplicity カスタマイズ

Simplicityはテーマに最初から用意されてる数種類の「スキン」を適用させるだけで、サイトの外観をガラッと変えることができます。そんな中でも特に人気の「オレンジメニュー」を僕も使ってみたのですが、問題が発生しました。

オレンジメニューが人気の理由
サブメニューが出せない
サブメニューへの道のり
まとめ

オレンジメニューが人気の理由

けっこうブログに適用している方が多いこのスキン。理由は、やはりグローバルメニュー（サイト上部に表示されるメニュー）にポインタを合わせた際に、下線がビャっと出てくるアニメーションではないでしょうか。インパクト大だし、思わず押したくなるギミックです。

サブメニューが出せない

スキンの横に（サブメニューなし）と書いてある通り、このスキンを適用した場合にはサブメニューが出なくなります。しかし、僕はどうしてもサブメニューを出したくて、かつ「オレンジメニュー」のスキンも使いたい。そこで解決法を探ってみました。

サブメニューへの道のり

スキンのcssを編集

まずは親テーマの「skins」フォルダにあるオレンジメニューを直接編集して解決しようとしてみました。「orange-menu」というフォルダを子テーマにコピーし、そのフォルダ内のstyle.cssを眺めてみます。すると、該当するっぽい部分を見つけました。

#navi ul.sub-menu,
#navi ul.children{
  display:none !important;
}

明らかにサブメニューを表示させないようにしているこの記述。とりあえずこれを消してみました。

すると…確かにサブメニューが表示されるようになったんですが、なんか崩れてます。サブメニューにまで下線のアニメーションが出るし。ちょっと思ってたのと違うので、このやり方は却下。

テーマのcssを編集

発想を変えて、要はグローバルメニューのホバー時下線がシュッと出る動きが欲しいだけなので、普通にサブメニューが出るスキンを適用して、テーマのstyle.css（外観＞テーマの編集から弄れるやつ）にその記述をしてしまえばいいのです。まず最初にそこに気付けよという話ですが、初心者なのですみません。

ということで、テキトーにサブメニューが使える「シック」というスキンを適用します。そして、テーマのstyle.cssに、オレンジメニュースキンのstyle.cssからメニューに下線が出る指定をしている以下の記述をコピペします。

#navi ul li a:hover {
  color: #333333;
}
#navi ul li a:hover:before {
  width: 100%;
}
#navi ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#navi ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #333333;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}

とりあえずこの部分をコピペしたらサブメニューを出しつつオレンジメニューのような下線アニメーションも使うことができました。あとは、サブメニューには下線が出る動きはいらないので、以下の記述をして出ないようにしておきます。

#navi ul.sub-menu a:hover::after,  #navi .sub-menu li a:hover::after {
  width: 0;
	}
#navi ul.sub-menu a::after,  #navi .sub-menu li a::after{
		  height: 0;
	}