オレンジメニューでサブメニューを出したかった

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



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

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

サブメニューが出せない

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

スポンサーリンク

サブメニューへの道のり

スキンのcssを編集

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

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

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

テーマのcssを編集

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

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

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

スポンサーリンク

まとめ

何とか意図したカスタマイズができました。オレンジメニューを使いつつサブメニューを出したいと思っている方の参考になれば嬉しいです。

トップへ戻る