【jQuery】meanmenuの表示がおかしい時はここを確認する。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

簡単に階層構造のレスポンシブメニューを作れることで有名な meanmenuですが、ちょっと嵌ったのでメモ

 

20160920_1

本来こうなるのが

 

20160920_2

こんな感じになってしまっている時。

 

JSやCSSのパスが正しく通っているのに表示がおかしいパターンですね。

 

で、原因はというと・・・

<nav>
    <ul>
        <a href=”#”>
            <li>
                メニュー1
            </li>
        </a>
        <a href=”#”>
            <li>
                メニュー2
            </li>
        </a>
        <a href=”#”>
            <li>
                メニュー3
            </li>
        </a>
    </ul>
</nav>

 

こうなってました。

 

正しくは

<nav>
    <ul>
        <li>
            <a href=”#”>
                メニュー1
            </a>
        </li>
        <li>
            <a href=”#”>
                メニュー2
            </a>
        </li>
        <li>
            <a href=”#”>
                メニュー3
            </a>
        </li>
    </ul>
</nav>

 

こうです。liタグ と aタグの入れ子構造が誤っていました。

 

CSSを見て気付いたのですが、

nav > ul > li > a

という入れ子構造でないと、CSSが適切に反映されません。

nav > ul > a > li

NG です。

メニューを作る際など、aタグでついついliを囲ってしまいがちですが、注意しましょう。

といっても本来であれば、aタグでliを囲むという事はあまりしないと思いますが、、、

自分は基本的にSEO的に大きく問題にならなそうな範囲であれば、不適切なタグの使い方も動けば良い精神でやってしまうタイプなので嵌ってしまいました笑

 

ちなみにhtmlタグを修正せずともCSSをカスタマイズすれば適切に表示されます。

meanmenu.css

.mean-container .mean-nav ul li a

.mean-container .mean-nav ul li li a

…他何個か

この辺の li > a  という入れ子構造になってるセレクタを

.mean-container .mean-nav ul a li

.mean-container .mean-nav ul a li li

みたいな感じで、 a > li という入れ子構造のセレクタに修正してあげれば直ります。

 

が・・・

 

1階層ならともかく、多階層のメニューの場合、面倒なことになると思うので、

やはりhtmlを修正することをおすすめしておきます笑

 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。