0

したがって、このナビゲーションで他の多くの問題を解決した後。最後に 2 つの小さな問題があります。

修正がより重要な 1 つ目は、ドロップダウンが落ちると、グリッドの一部である含まれている div によって切り取られることです。代わりに、このグリッドの外側と下のスライドショーの上に「浮かぶ」必要があります。これを行う方法がわからない。問題を参照してください http://lookseewatch.com/independentinsurance/

高さがない場合、または高さが自動に設定されている場合、ドロップダウンは表示されません。

これがコードスニペットです

<div class="row">
        <div class="grid_4">
            <img src="<?php bloginfo('template_directory'); ?>/images/logo.png">
        </div>
        <div class="grid_8">
            <?php wp_nav_menu( array('items_wrap' => '<ul class="%2$s">%3$s<div id="box"><div class="head"></div></div></ul>', 'container_class' => 'menu', 'menu_class' => 'nav', 'menu' => 'Header', 'walker' => new UL_Class_Walker )); ?>
        </div>
    </div>

2 つ目の問題は、ホバーした場所に続く青いバーです。原点は絶対位置

var dLeft = $('.current-menu-item a').offset().left+15;//setting default position of menu
var dWidth = $('.current-menu-item a').width();
var dTop = $('.current-menu-item a').offset().top;

そのため、Web ページが読み込まれると問題なく動作しますが、ウィンドウのサイズを変更すると、「マジック ライン」はナビゲーションと共に移動するのではなく、同じ場所にとどまります。他のリンクにカーソルを合わせると正しい場所に移動しますが、元の場所に戻ると、ブラウザのサイズがどれだけ変化したかによって完全にずれています。上記のリンクで問題を確認し、ブラウザの隅を引っ張ってください。

いずれかの CSS を投稿する必要がある場合はお知らせください。

ありがとう！

4

1 に答える 1

0

jQuery を使用しているため、window.resize をリッスンできます。dTop変更されるべきではないため、初期化してから、ブラウザのサイズが変更されたときに他の変数を設定できます。

var dLeft;
var dWidth;
var dTop = $('.current-menu-item a').offset().top;

$(function(){
    //listen to window.resize
    $(window).on("resize", function () {
        //update variables     
        dLeft = $('.current-menu-item a').offset().left+15;
        dWidth = $('.current-menu-item a').width();
    }).trigger("resize"); //sets variables when page loads
});

overflow:hidden非表示のドロップダウンに関しては、.grid-8css クラスで削除するだけです。

于 2012-12-07T15:51:56.950 に答える