サポート » 使い方全般 » カスタムメニューでの改行表示位置について

  • 解決済 midget_83jp

    (@midget_83jp)


    WordPress 3.3.1 を日本語環境にて使用です。
    環境はMac OS10.7.2でおもにGoogleChromeを使用してます。

    http://www.joudan.net/
    現在上記サイトを製作中ですが、カスタムメニューの部分で質問があり
    投稿させて頂きました。

    ブラウザ幅を狭めて行ったときに、li要素が改行されてメニューが二段構成となります。

    メニューはロールオーバーすると少し浮き上がる仕組みにCSSを使用して
    なっているのですが、この動作が原因で改行された一番左のメニューが
    一番右側のメニューをロールーバーしたときにの浮いた隙間に戻ってきてしまいます。

    メニューが改行された場合、
    タグが自動で入る設定が出来れば
    上記のトラブルも解決しそうなのですが、
    どなたかわかる方はいらっしゃいますでしょうか?

    CSSでの動き部分

    #fly-menu li, #fly-glow-menu li {
    		-webkit-transition: .3s ease-in-out;
      		-moz-transition: .3s ease-in-out;
      		-o-transition: .3s ease-in-out;
    	}
    #fly-glow-menu li:hover {
    		margin-top: -0.5em;
    	}

    カスタムメニュー使用の為のfunction記述部分
    add_theme_support('menus');

    header.phpでのカスタムメニュー記述部分

    <?php wp_nav_menu(array(
    'menu' => 'main_menu',
    'container' => 'ul',
    'theme_location' => 'primary',
    'menu_class' => '',
    'menu_id' => 'fly-glow-menu'
    )); ?>

    以上になります。どうぞよろしくお願い致します。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • 通常時とhover時で、li要素の上下のマージン値を逆方向に同じだけ変えれば良いです。

    #fly-menu li, #fly-glow-menu li { margin: .5em 0 0; }
    #fly-glow-menu li:hover { margin: -.5em 0 1em; }

    hoverで
    margin-topを-1emしてるので
    margin-bottomを+1emしました。

    トピック投稿者 midget_83jp

    (@midget_83jp)

    kz様
    ご返答ありがとうございます。
    おっしゃる通り私もそう思い、以前試してみましたが、
    ロールオーバー時に一瞬左側のメニューが動いてしまいます。

    念のためご返信頂いた内容をCSSに反映させてみました。
    http://www.joudan.net/

    どうぞよろしくお願い致します。

    トピック投稿者 midget_83jp

    (@midget_83jp)

    kz様 皆様

    kz様のコメントでやはりっこで質問するようなことでは
    無かったのかなと、もういちどcssを見直してみたところ、
    cssのみで対応出来ました。

    どうもお騒がせ致しました。
    この質問は解決済みとさせて頂きます。

    ありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「カスタムメニューでの改行表示位置について」には新たに返信することはできません。