jQuery 弹出菜单。将元素从其父元素中分离出来

Question

我正在开发一个 Shopify 项目。我不是设计师。我需要为商店制作一个弹出菜单。问题有两个方面。首先，弹出窗口需要延伸到视口的底部。其次，我想在 Navigation Div 中将所有内容捆绑在一起，但我需要弄清楚如何将元素从其父元素中分离出来，然后在其余内容上“分层”而不移动它。

我想我只是用 CSS 隐藏菜单，然后使用 jQuery 在翻转时取消隐藏它。我不认为这会奏效。我不知道如何定位弹出按钮，所以它不会影响周围的一切。

现在是这个网站： https://hodkiewicz-zieme-and-hirthe180.myshopify.com/

它应该是这样的：http://tinypic.com/r/35hnyox/6

这是当前导航栏中的内容。我可能会改变结构。

<div id="navbar" class="green">
    <ul id="navigation">
    {% for link in linklists.main-menu.links %}
        <li><a class="green" href="{{ link.url }}">{{ link.title }}</a></li>
    {% endfor %}
        <li><a class="green" href="#">{{ linklists.packard.title }}</a>
            <ul class="sub-menu">
                    <li><a class="green" href="#">-1930 Speedster</a></li>
                    <li><a class="green" href="#">-1929-31 Super 8</a></li>
                    <li><a class="green" href="#">-Late 1931-32 Super 8</a></li>
                    <li><a class="green" href="#">-1929-31 Standard 8</a></li>
                    <li><a class="green" href="#">-Late 1931-32 Standard 8</a></li>
                    <li><a class="green" href="#">-Rare Parts</a></li>
                    <li><a class="green" href="#">-745 Parts</a></li>
            </ul>
        </li>
        <li><a class="green" href="#">{{ linklists.cadillac.title }}</a>
            <ul class="sub-menu">
                <li><a class="green" href="#">-1932-33 V12 &amp; V16</a></li>
                <li><a class="green" href="#">-1934-37 V12 &amp; V16</a></li>
            </ul>
        </li>

        <li><a class="green" href="/cart">Cart</a></li>
        <li><a class="green" href="/checkout">Check Out</a></li>
    </ul><!--Navigation--><!--Navigation-->

    <ul class="sub-navs">
        <ul class-"sub-nav">
            <li>Carburetor</li>
            <li>Parts</li>
            <li>Manifolds</li>
            <li>Accessories</li>
            <li>Sculpture</li>
        </ul>
    </ul>

    <img id="#navbar-logo" src="{{'logo.png' | asset_url}}">
    <p id="nav-phone" class="black center bold">775.842.4282</p>
    <p class="black center nav-small bold">packardcarbs@gmail.com</p>
    <p class="black ce

nter nav-small bold">Sparks, NV USA</p>
</div><!--Navbar-->

Answer 1

这是所需的输出，具有相关所需的确切功能。

代码见小提琴：http://jsfiddle.net/NNfUb/2/

演示： http://jsfiddle.net/NNfUb/2/embedded/result

CSS：

#content
{
    position:relative;
}

#flyout_container
{
    position:absolute;
    width:175px;
    top:0;
    left:0;
    background:#107042;
    display:none;
}

.sub-nav
{
    padding:0;
    margin:0;
    display:none;
}

.sub-nav li
{
    padding:5px 5px 5px 10px;
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:bold;
}

jQuery：

$(document).ready(function(){
        var container = $("<div id='flyout_container'>");
        container.appendTo($("#content"));
        var contentHeight = $("#content").height();
        container.css({"height": (contentHeight + 10) + "px"});

        $("a#show_sub_nav_1").mouseover(function(){
            $("#sub_nav_1").appendTo(container).show();
            container.toggle();
            //container.show();
            var fromTop = parseInt($(this).offset().top);
            $("#sub_nav_1").css({"margin-top": (fromTop - 205) + "px"});
        });

        $("#flyout_container").mouseleave(function(){
            $("#flyout_container").hide();
        });

    });

我通过从您的网页复制您的源代码并进行处理来创建上述小提琴。我已经创建了完整的高度功能，该功能将高度提升到内容高度，并根据屏幕截图中提供的所需设计显示子链接。如果您需要任何更改或增强，您需要对 css 或代码进行 tweek 处理。它适用于每个视口。

注意：如果有任何问题，请告诉我。我希望这能解决您的问题，因为我使用了不同的方法。

Answer 2

position: absolute 使位置相对于最近的非静态定位祖先。因此，如果您将导航 ul 更改为 position: relative，并将弹出菜单更改为 position: absolute，您将能够设置弹出菜单的位置相对于主导航。这意味着即使您调整页面大小，浮出控件仍会位于正确的位置。

#navigation {
  position: relative;
}

.flyout {
  position: absolute;
  top: 0;
  left: 100%;
}

（您也可以将#navbar 或#navigation > li 改为position: relative。）

您仍然需要稍微调整一下定位和其他样式，但希望这能让您走上正确的道路。

Answer 3

将元素的位置更改为绝对位置可以让您在不中断文档流的情况下准确定位它。

.flyout {
    position: fixed;
    left: 0px; (number of pixels from the left edge of the document)
    top: 0px;  (number of pixels from the top edge of the document)
}