hogawish.com

wish of hogawish
-自称クリエイターがクリエイターに至るまで-

blog STINGER PLUS Wordpress

【STINGER PLUS】ドロップダウンメニューがずれた時の対処法。

こんにちは!hogawishです!
新曲鋭意制作中です。完成をお楽しみに!

さて少しずつ記事を書きながらカテゴリを増やしていっているのですが、そうなるとナビゲーションメニューも親カテゴリー、子カテゴリーごとにわかりやすい対応をさせられると嬉しいですよね。

STINGERでは、「ダッシュボード>外観>メニュー」から、簡単にドロップダウンメニューを作成することができます。

2

上の図で言うと、blogの子カテゴリーにWordpress、music、gameがあり、music、gameの子カテゴリにそれぞれmy music、pokemon goがある状態ですね。 (メニューでは子カテゴリに当たるものをサブアイテムと呼びます。)

これでもうドロップダウンメニューの完成です。

3

「blog」にカーソルを合わせると、

4
「Wordpress」「music」「game」が開き、

5
6
「music」、「game」に合わせると、それぞれ「my music」「pokemon go」が開きます。

が……なんかずれててクリックできない。

メニューがずれる原因

こういう事が起こるときは、ほぼCSSが適切でなくレイアウト崩れを起こしてしまっていることが原因です。

なので、style.cssを修正してやればよろしい。

まず、該当の部分がどんな要素でマークアップされてるのか確認しましょう。

こんなときは、Google Chromeの要素の検証機能が便利です。ページを右クリックし、「検証」を選びましょう。

2016-07-24 (4)

そうすると、こんな画面が開きます。

左側のページ画面でカーソルを合わせると、右側のソース画面で該当要素が黒く表示されます。

拡大してみましょう

8

ちょっと見にくいですが、nav class="smanone" > ul > li > ul class="sub-menu" > liが該当のずれてしまったmy musicのリンクのようです。

ちょっと複雑ですが、クラス"smanone" "sub-menu"あたりをさがしてやれば見つかるのではないでしょうか。

それではstyle.cssをのぞいてみましょう

STINGERのドロップダウンの仕組み

おそらく該当であろうか箇所はすぐ見つかりました

9

2843行目、メニューとコメントアウトされたあたりです。
適用先がかなり複雑ですが、たぶんこのあたりでしょう。

ずれ方から、margin、paddingあたりが原因かととりあえず修正してみるも効果なし。

そういえば、と思い出します。メニューの余白が長かったから、widthを修正したような…

10

たしか、もともと160pxくらいあったはずです。

そして、ついに犯人を見つけました

11

どうもSTINGERでは、サブアイテムの要素を絶対配置にしてメニューのul要素の長さの文だけ右にずらすことにより、サブアイテムのドロップダウンを実現しているようです。

というわけで、ここを130pxに修正

12

これで無事正しく表示されるようになりました。

13

-blog, STINGER PLUS, Wordpress
-, , ,