Question

我正在尝试创建一个“下拉”菜单，该菜单是屏幕宽度的100％，但是由标题中的一个链接触发，该链接受位置约束：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标签的容器内，并根据一些嵌套位置约束宽度：relative; 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时，我将显示设置为无。

我对任何解决方案都持开放态度，所以任何帮助都将不胜感激。如果您需要更多信息，请与我们联系！

Answer 1

好的，所以我通过使用offset.left来设置元素和屏幕左侧之间的距离来解决这个问题。然后，css left元素设置为＆＃34; - ＆＃34; + offset.left +＆＃34; px＆＃34;。

这是JS小提琴：

/* 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更加自动化，而不是必须为每个导航实例再次编写它，并且在触发div的关闭时有一些延迟，这样如果我快速地将鼠标移出下拉，它不会消失。但这些可能是针对不同的话题。

谢谢！

JQuery宽菜单下拉与外部div

1 个答案: