Раскрывающееся меню мобильных устройств сдвигает основной контент - PullRequest
Новая
       9

Раскрывающееся меню мобильных устройств сдвигает основной контент

0 голосов
/ 30 мая 2018

Я использую простое адаптивное выпадающее меню с небольшим количеством jquery.сам код работает правильно.но когда я добавляю его к содержимому страницы, он перемещается вниз по основному контенту в режиме просмотра с мобильных устройств.в режиме рабочего стола выпадающий список отображается поверх основного содержимого, как и должно быть.я пытался дать ul li позицию: родственник;как я читал в некоторых советах, но это тоже не работает.проблема может быть в коде jquery?я также использую дизайн флексбокса, но я не думаю, что это проблема?

структура 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;
    }
}

Вопрос: 

<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 Ответ

0 голосов
/ 30 мая 2018

Вам нужно использовать абсолютное положение в раскрывающемся списке, чтобы игнорировать другие элементы страницы.

Ваши медиазапросы меняют положение некоторых элементов на статическое - если на рабочем столе он работал нормальнодобавьте это правило, затем попробуйте удалить эту строку css

...