1

画面幅の 100% の「ドロップダウン」メニューを作成しようとしていますが、position:relative で制約されているヘッダー内のリンクによってトリガーされます。ヘッダーを設定しています

  • このような要素:

    <nav>
<ul>
    <li class="cell-logo"><a href="/">logo</a></li>
    <li><a href="#" class="link01">link01</a></li>
    <li><a href="#" class="link02">link02</a></li>
    <li><a href="#" class="link03">link03</a></li>
</ul>
</nav>

    したがって、Link01 をクリックすると、別の div から次のようなメニューが表示されます。

    <div class="menu-frame">
<section>
    <ul>
        <li><strong>header</strong></li>
        <li><a href="#">link01</a></li>
        <li><a href="#">link02</a></li>
        <li><a href="#">link03</a></li>
        <li><a href="#">link04</a></li>
    </ul><!-- ./  list -->
    <ul>
        <li><strong>header</strong></li>
        <li><a href="#">link01</a></li>
        <li><a href="#">link02</a></li>
        <li><a href="#">link03</a></li>
        <li><a href="#">link04</a></li>
    </ul><!-- ./  list -->
    <ul>
        <li><strong>header</strong></li>
        <li><a href="#">link01</a></li>
        <li><a href="#">link02</a></li>
        <li><a href="#">link03</a></li>
        <li><a href="#">link04</a></li>
    </ul><!-- ./ list -->
</section>
</div><!-- ./ menu-frame -->

    私が遭遇する問題は、css を使用してそれを表示する必要があることです。それを nav タグのコンテナー内に配置する必要があり、ネストされた位置に基づいて幅を制限します。CSS。

    JS を使用すると、表示されるようになりますが、リンクのオン状態がマウスアウトで消え、メニューも消えます。

    以下は、メニューの現在のCSSです。

    position: absolute;
top: 72px;
left: 0;
width: 100%;
min-height: 297px;
border-top: 5px solid #cccccc;
-moz-box-shadow:    0 5px 10px 0 #e8e8e8;
-webkit-box-shadow: 0 5px 10px 0 #e8e8e8;
box-shadow: 0 5px 10px 0 #e8e8e8;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
z-index: 100;

    CSSを使おうとすると、左：0が左：-99999に設定され、JSを使用しようとすると、表示がなしに設定されました。

    私はどんな解決策にもオープンであるため、どんな助けも大歓迎です。さらに情報が必要な場合はお知らせください。

    • 4

    1 に答える 1

    0

    わかりましたので、offset.left を使用して要素と画面の左側との間の距離を設定することで、この問題を解決しました。次に、CSS の left 要素が "-"+offset.left+"px" に設定されます。

    JS Fiddle は次のとおりです。

    /* wide menu dropdown */
$(document).ready(function () {
    $("li.nav1").hover(function () {
        var pos = $(this).offset();
        $(".menu-frame").width($(window).width());
        $(".menu-frame").css("left", "-" + pos.left + "px", "top", "40px")
        $("li.nav1 a.link01").addClass("highlight");
        $(".menu-frame").slideToggle(300, "linear");
    }, function () {
        $(".menu-frame").slideToggle(300, "linear");
        $("li.nav1 a.link01").removeClass("highlight");
    });
});

    http://jsfiddle.net/p6ubX/1/

    ここからやりたいことは、この JS を nav インスタンスごとに再度記述するのではなく、より自動化することと、マウス アウトした場合に div のクローズをトリガーする際に何らかの遅延を持たせることだけです。ドロップダウンの超高速で消えません。しかし、それらはおそらく別のトピックのためのものです。

    ありがとう！

    于 2013-07-02T19:02:49.883 に答える