1

我正在尝试创建一个“下拉”菜单，它是屏幕宽度的 100%，但由标题中的链接触发，该链接受位置：相对约束。我的标题设置为

  • 像这样的元素：

    <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 使其可见，我需要将它放在导航标签的容器中，并根据一些嵌套位置来限制宽度：relative; css。

    如果我使用 JS，我可以让它出现，但是链接的 on 状态会在 mouseout 时消失，菜单也会消失。

    以下是我当前的菜单 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左元素设置为“-”+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 更加自动化，而不是必须为每个导航实例再次编写它，并且在触发 div 的关闭时有某种延迟，这样如果我鼠标退出下拉超级快它不会消失。但这些可能是针对不同的主题。

    谢谢！

    于 2013-07-02T19:02:49.883 回答