代码之家 › 专栏 › 技术社区 › lalofee

移动菜单下拉菜单下推主要内容

responsive dropdown mobile css jquery

lalofee · 技术社区 · 6 年前

我使用了一个简单的响应式下拉菜单和一个小jquery。代码本身工作正常。但当我将其添加到页面内容时,它会在移动视图中向下推主内容。在桌面视图中,下拉列表会按其应有的方式显示在主要内容的“上方”。我试图给ul-li一个职位:亲戚;正如我在一些建议中读到的,但这也不起作用。问题可能是jquery代码吗? 我也使用一些flexbox设计,但我不认为这是问题所在?

HTML结构:

    <body>
<div class="wrapper">
    <header class="full-width flex-container">
        <div class="logo-wrap">
            <img src="img/logo.png" alt="" id="logo">
        </div>
        <div class="nav-wrap">
            <nav>
                <div>
                    <i class="fa fa-bars"></i>
                </div>
                <ul>
                    <li><a href="#"><b>Item1</b></a></li>
                    <li><a href="#"><b>Item2</b></a></li>
                    <li><a href="#"><b>Item3</b></a>
                        <ul>
                            <li><a href="#">Sub-Item1</a></li>
                            <li><a href="#">Sub-Item2</a></li>
                            <li><a href="#" class="active">Sub-Item3</a></li>
                            <li><a href="#">Sub-Item4</a></li>
                            <li><a href="#">Sub-Item5</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><b>Item4</b></a></li>
                    <li><a href="#"><b>Item5</b></a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main>
        <div class="wrap">
            <article>
                <h1>Bilanz</h1>
                <hr id="top-hr">
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua...............</p>

    </article>
    </div>
     </main>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}
html,
body {
    overflow-x: hidden;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #e6e6e6;
}
.wrapper {
    max-width: 90%;
    margin: 0 auto;
    border: 1px solid red;
}
.full-width {
    position: relative;
    /* child absolute */
    margin: 0 -9999rem;
    /* add back section padding value */
    padding: .25rem 9999rem;
}
.flex-container {
    display: flex;
    justify-content: space-between;
}
.nav-wrap {
    align-self: flex-end;
}
.main-wrap {
    display: flex;
}
header {
    background-color: #ffffff;
}
#logo {
    max-width: 100%;
}
main {
    background-color: #ffffff;
}
article {
    margin-top: 3em;
    padding: 2em;
}
aside {
    border: 1px solid grey;
    padding: 2em;
    margin-bottom: 3em;
}
h1 {
    color: #97C227;
}
h1,
h2,
p {
    padding: 0.8em 0;
}
#top-hr {
    height: 4px;
    color: #d9d9d9;
    background: #d9d9d9;
    border-style: none;
}
/*###############-------navigation-------############*/
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: white;
}
ul li {
    display: inline-block;
    position: relative;
}
ul li a {
    display: block;
    color: grey;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
}
ul li a:hover {
    color: #97C227;
}
ul li a.active {
    color: #97C227;
    text-decoration: underline;
}
ul ul {
    position: absolute;
    min-width: 200px;
    background: lightgrey;
    display: none;
}
ul ul li {
    display: block;
    background-color: lightblue;
}
ul li:hover ul {
    display: block;
}
nav div {
    background-color: pink;
    color: #292929;
    font-size: 24px;
    padding: 0.6em;
    cursor: pointer;
    display: none;
}
/*###########   media queries   ##############*/
@media(max-width: 768px) {
    nav div {
        display: block;
    }
    ul {
        display: none;
        position: static;
        background: #e3e3e3;
    }
    ul li {
        display: block;
    }
    ul ul {
        position: static;
        background: #e3e3e3;
    }
}

jquery:

<script type="text/javascript">
$("nav div").click(function() {
    $("ul").slideToggle();
    $("ul ul").css("display", "none");
});

$("ul li").click(function() {
    $("ul ul").slideUp();
    $(this).find('ul').slideToggle();
});

$(window).resize(function() {
    if ($(window).width() > 768) {
        $("ul").removeAttr('style')
    }
})
</script>

1 回复 | 直到 6 年前

NightPorter 6 年前

您需要在下拉列表中使用绝对位置,以便忽略其他页面元素。

您的媒体查询会将某些元素的位置更改为静态-如果在添加该规则之前,它在桌面上运行正常,请尝试删除该行css