Как вывести sh вниз <div>ниже, когда появляются кнопки выпадающего меню? - PullRequest
Новая
       7

Как вывести sh вниз <div>ниже, когда появляются кнопки выпадающего меню?

0 голосов
/ 17 марта 2020

Я работаю над этим сайтом только для того, чтобы выучить HTML и CSS, без JS в первую очередь. Вот почему я ищу решение без JS здесь.

Когда страница меньше 1081px по ширине, кнопки меню вверху становятся меню бургера. При нажатии кнопки меню всплывают под панелью навигации - но - к сожалению, кнопки находятся прямо в верхней части полей ниже, которые я хочу нажать sh вниз при нажатии на меню бургера. Может кто-нибудь дать мне подсказку, как это сделать? Я не могу найти никакого решения онлайн без jscript.

HTML: 

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width-device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Rakete</title>
    </head>

    <body>
        <nav>
            <div id="navigation">
                <div class="wrapper">
                    <div id="logo"></div>
                    <label for="toggle">&#9776;</label>
                    <input type="checkbox" id="toggle"/>
                    <div id="menu">
                        <a href="#">Home</a>
                        <a href="#">About Us</a>
                        <a href="#">Contact</a>
                        <a href="#">Imprint</a>
                    </div>            
                </div>
            </div>
        </nav>

        <div id="main">
            <div class="wrapper">
               <div id="top-boxes">
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
                   <div class="box"></div>
               </div>

            <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. 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. 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. 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. 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. 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. 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. 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.

            </p>
         </div>
        </div>
    </body>
</html>

CSS: 

*
{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.wrapper
{
    margin: 0 auto;
    width: 70%;
}

/* Navigation */

#navigation
{
    width: 100%;
    height: 5em;
    line-height: 5em;
    background-color: darkgrey;
    top: 0;

}



#logo
{
    margin: 1em;
    width: 2.5em;
    height: 2.5em;
    background-size: 2.5em 2.5em;
    background-image: url("rocket.png");
    float: left;
}

/* ### Menu ### */


#menu
{   
     text-align: right;
     width: 100%;


}

#menu a
{
    margin: 0 1em;
    line-height: 5em;
    clear: right;
    color: black;
    font-family: sans-serif;
    font-style: normal;
    font-weight: 100;
}


label 
{
    margin: 1em;
    font-size: 1.5em;
    line-height: 1.25em;
    display: none;
    width: 1em;
    float: right;
}

#toggle 
{
    display: none;
}


@media only screen and (max-width: 1081px) 

{
    label 
    {
        display: block;
        cursor: pointer;
    }
    #menu 
    {
        text-align: center;
        width: 100%;
        display: none;
    }
    #menu a 
    {
        display: block;
        border-bottom: 1px solid black;
        margin: 0;

    }
    #toggle:checked + #menu 
    {
        display: block;
    }    
}

/* Content */

#main p
{
    margin: auto;
    margin-top: 2em; 
    clear: both;
}

#top-boxes
{
    text-align: center;

     display: inline-block;
}

.box
{
    width: 10em;
    height: 5em;
    padding: 1em;
    margin: 1em;
    margin-top: 3em;
    border: solid black 2px;
    box-sizing: border-box;
    background-color: gray;
    display: inline-block;

}

Вот мой код: https://codepen.io/andy4117/pen/NWqzqxo

Заранее спасибо!

1 Ответ

1 голос
/ 17 марта 2020

Используйте min-height вместо height для вашего #navigation стиля.

Старый 

#navigation {
    ...
    height: 5em;
    ...
}

Новый 

#navigation {
    ...
    min-height: 5em;
    ...
}

Примечание. Это решение относится только к вашему делу. Разная разметка может потребовать другого решения.

...