話題のWordPress用テーマ「Affinger」ですが、同じ作者の「Stinger」同様デフォルトでドロップダウンメニューに対応していません。
しかもそれまでのバージョンの「Stinger」や「Affinger」と同時リリースされた「Stinger6」とCSSの内容が微妙に違うので「Stinger」用のカスタマイズが使えなかったりします。
ということで、なるべくデフォルトのデザインの印象を壊さず「Affinger」のナビゲーションメニューをドロップダウン表示に対応させるCSSを作ってみたので公開します。
ドロップダウンメニュー表示用CSS
CSSを「Style.css」に追加することでドロップダウンメニューになります。
追加する場所は「Style.css」の1790行目あたり。
/*media Queries PCサイズ ----------------------------------------------------*/ @media only screen and (min-width: 781px) {
この下に以下のCSSをコピペして追加してください。
/* Drop Down Menu for Affinger2 */ .smanone .menu-item { display: inline-block; text-align: left; border: none; padding: 0px; } .smanone a { display: block; position: relative; border-left: 1px dotted #ccc; line-height: 1.3; } .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: 150px; z-index: 99; margin-top: 30px; } .smanone .menu > li:hover .sub-menu a, .smanone .sub-menu a { background: #f3f3f3; position: relative; width: 150px; } .smanone .menu-item:hover > .sub-menu { left: auto; opacity: 1; } .smanone a { padding: 7px 10px; } .smanone li:first-child a { border: none; padding: 7px 10px 7px 0; } .smanone .sub-menu li:first-child a { padding: 7px 10px; } .acordion_tree li { width: 100%; } nav { padding: 0; margin: 10px 0; } nav.smanone .sub-menu li a { border-top: 1px dotted #ccc; border-left: 1px dotted #ccc; border-right: 1px dotted #ccc; } nav.smanone .sub-menu li:last-child a { border-bottom: 1px dotted #ccc; }
これでメニューがドロップダウン表示されるようになるはずです。
デザインの変更などはお好みでどうぞ。
もし表示の乱れなどがありましたら、コメント欄で教えてください。
時間があるときに対応するかもしれません。
コメント