• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[GELOEST] Inhalt unter Bürger Menü nach unten verschieben

HTim

Neues Mitglied
Hallo,
der Inhalt meiner aktuellen Seite wird derzeit einfach von dem sich öffnendem Bürger Menü überlappt. Wie kann ich den Inhalt nach unten verschieben, wenn sich das Bürger Menü öffnet. Danke im Voraus für alle sinnvollen Antworten.

Code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a2c993e8e8.js" crossorigin="anonymous"></script>
</head>
<body>
    <a class="cart" href="#"><i class="fa-regular fa-cart-shopping"></i><span>0</span></a>
    <header class="navbar">
        <a class="logo" href="#">FloraCarCare</a>
        <nav>
            <ul class="nav__links">
                <li class="nav-item"><a href="#" class="nav-link"></a>Start</li>
                <li class="nav-item"><a href="#" class="nav-link"></a>Produkte</li>
                <li class="nav-item"><a href="#" class="nav-link"></a>ÜberUns</li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>
    <div class="main">
    <br>
    <br>
    <h2 style="text-align: center;" class="title">Produkte</h2>
    <br>
    <section class="container">
        <div class="card">
            <a href="#">
            <div class="card-image car-1"></div>
            <h3>Sprühwax FloraCarCare 15.99€</h3>
            <p>Optimalen Reinigung und Pflege aller glatten und lackierten Hartflächen</p>
            </a>
        </div>
        <div class="card">
            <a href="#">
            <div class="card-image car-2"></div>
            <h3>Felgenglanz FloraCarCare 14.99€</h3>
            <p>Problemlose Reinigung von Alu- und Stahlfelgen sowie Radkappen aus Kunststoff</p>
            </a>
        </div>
        <div class="card">
            <a href="#">
            <div class="card-image car-3"></div>
            <h3>Scheibenreiniger FloraCarCare 15.99€</h3>
            <p>Reiniger für Scheiben aus Glas und Kunststoff, ohne bildung jeglicher Schlieren</p>
            </a>
        </div>
        <div class="card">
            <a href="#">
            <div class="card-image car-4"></div>
            <h3>Kunststoffpflege FloraCarCare 15.99€</h3>
            <p>Zur Pflege und Farbauffrischung von Gummi- und Kunststoffteilen im Innenraum</p>
            </a>
        </div>
    </section>
    <br>
    <a href="#" class="gradient-button">Alle Produkte</a>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>
</body>
</html>

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    header {
        background-color: #dedede;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 18px 0.75%;
        position: relative;
    }
    .logo {
        cursor: pointer;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
        text-decoration: none;
        background-color: transparent;
        font-size: 19px;
        padding-right: 2%;
    }
    .navbar {
        min-height: 60px;
        display: flex;
        justify-content: flex-start;
        padding: 0 10px;
    }
    .nav__links {
        list-style: none;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #7f7f7f;
        text-decoration: none;
        background-color: transparent;
        cursor: pointer;
        word-spacing: 15px;
        display: flex;
        justify-content: flex-start;
        gap: 20px;
    }
    .nav__links li {
        display: inline-block;
    }
    .nav__links li {
        transition: all 0.3s ease 0s;
    }
    .nav__links li:hover {
        color: #1e90ff;
    }
    .cart {
        position: fixed;
        right: 2%;
        background-color: transparent;
        overflow: hidden;
        background-repeat: no-repeat;
        border: none;
        outline: none;
        margin-top: 23px;
        color: #1e90ff;
        font-size: 16px;
    }
    .hamburger {
        display: none;
        cursor: pointer;
    }
    .bar {
        display: block;
        width: 25px;
        height: 2px;
        margin: 7px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #1e90ff;
    }
    @media(max-width:768px){
        .hamburger{
            display: block;
        }
        .hamburger.active .bar:nth-child(2){
            opacity: 0;
        }
        .hamburger.active .bar:nth-child(1){
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger.active .bar:nth-child(1){
            transform: translateY(-8px) rotate(-45deg);
        }
        .nav__links {
            position: fixed;
            left: -100%;
            top: 50px;
            gap: 0;
            flex-direction: column;
            width: 100%;
            text-align: left;
            padding-left: 2%;
            transition: 0.2s;

            background-color: #dedede;
        }
        .nav-item {
            margin: 16px 0;
        }
        .nav__links.active {
            left: 0;
        }
    }
    .title {
        font-family: Helvetica;
        font-size: 2rem;
        font-weight: normal;
    }
    .container  {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .card {
        background-color: #ffffff;
        height: 480px;
        width: 280px;
        margin: 15px;
        border-radius: 5px;
        border-color: #dedede;
        box-shadow: 10px 20px 5px 5px #dedede;
    }
    .card-image {
        height: 270px;
        background-size: cover;
        border-radius: 5px 5px 0 0;
    }
    .car-1 {
        background-image: url(Pflegereiniger.png);
    }
    .car-2 {
        background-image: url(Felgenreiniger.png);
    }
    .car-3 {
        background-image: url(Glasreiniger.png);
    }
    .car-4 {
        background-image: url(Kunstoff\ Reiniger.png);
    }
    .card h3 {
        padding: 10px;
        text-align: center;
        font-weight: normal;
    }
    .card p {
        padding: 10px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
    }
    .card a {
        padding: 15px;
        text-decoration: none;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
    }
    .card:hover {
        cursor: pointer;
        transform: scale(1.075);
        transition: all 0.5s ease;
    }
    .gradient-button {
        cursor: pointer;
        background-color: transparent;
        color: #000000;
        float: right;
        margin-right: 5%;
        height: 60px;
        width: 300px;
        line-height: 60px;
        overflow: hidden;
        letter-spacing: 5px;
        color: #000000;
        border: solid 2px #000000;
        text-decoration: none;
        text-align: center;
        position: relative;
        background: -webkit-gradient(0deg, transparent 50%, #55a445 50%);
        background-size: 200px 160px;
        border: 2px solid;
        font-family: Arial, Helvetica, sans-serif;
    }
    .gradient-button::before {
        content: '';
        position: absolute;
        top: 0%;
        left: 0%;
        width: 0%;
        height: 100%;
        background-color: #dedede;
        transition: all 0.5s;
        z-index: -1;
        text-decoration: none;
    }
    .gradient-button:hover::before {
        width: 100%;
    }
</style>
<script>
    const hamburger = document.querySelector(".hamburger");
    const nav__links = document.querySelector(".nav__links");
    const main = document.querySelector
    hamburger.addEventListener("click", () => {
        hamburger.classList.toggle("active");
        nav__links.classList.toggle("active");
    })
    document.querySelectorAll(".nav__links").forEach(n => n.
    addEventListener("click", () => {
        hamburger.classList.remove("active");
        nav__links.classList.remove("active");
    }))

</script>

PS: Kein Plan, wie man den Code in so nem Textfeld einfügt, ich bin des erste mal hier im Forum.
 
Zuletzt bearbeitet von einem Moderator:

basti1012

Senior HTML'ler
Du könntest es so machen.
Beim click auf den Hamburger gibst du dein main ein margin-top von 100px oder so , das du mit toggleclass machst , genauso wie du es mit dem Menü auch machst, halt nur mit den main.
Den z-index solltest du von der Navigation auch erhöhen , weil beim hovern der cards , werden diese über das Menü geholt.
 

HTim

Neues Mitglied
Du könntest es so machen.
Beim click auf den Hamburger gibst du dein main ein margin-top von 100px oder so , das du mit toggleclass machst , genauso wie du es mit dem Menü auch machst, halt nur mit den main.
Den z-index solltest du von der Navigation auch erhöhen , weil beim hovern der cards , werden diese über das Menü geholt.
Danke, der Body. geht jetzt. beim Klick auf die Bürger Bar runter. Die Navbar nur leider auch. Die verschiebt sich komplett. Wie definiere ich es so, dass nur die main Klasse verschoben wird? Folgende Zeilen habe ich ergänzt:

CSS im @Media Part:

.hamburger.main.active {
margin-top: 120px
}


Javascript:

im addEventListener:

main.classList.toggle("active");


im querySelectorAll:

main.classList.remove("active");



Es geht auch alles wieder hoch, wenn ich erneut auf den Burger drücke. Nur die Navbar wird halt irgendwie verzerrt und verschoben.

Mit freundlichen Grüßen
 

Sempervivum

Senior HTML'ler
Also bei mir funktioniert es einwandfrei wenn ich das ".hamburger" weg lasse:
Code:
        .main {
            transition: margin-top 0.2s;
        }

        .main.active {
            margin-top: 120px
        }

Ich finde es jedoch immer unbefriedigend, in solch einem Fall ein festes Maß zu verwenden. Besser das Margin automatisch an die Höhe der Navigation anpassen lassen:
Javascript:
        const hamburger = document.querySelector(".hamburger");
        const nav__links = document.querySelector(".nav__links");
        const main = document.querySelector('.main');
        const menuBox = nav__links.getBoundingClientRect();
        const root = document.documentElement;
        root.style.setProperty('--margin-top', menuBox.height + 'px');
        hamburger.addEventListener("click", () => {
            hamburger.classList.toggle("active");
            nav__links.classList.toggle("active");
            main.classList.toggle("active");
        });
        document.querySelectorAll(".nav__links").forEach(n => {
            n.addEventListener("click", () => {
                hamburger.classList.remove("active");
                nav__links.classList.remove("active");
                main.classList.remove("active");
            });
        });
CSS:
        .main {
            transition: margin-top 0.2s;
        }

        .main.active {
            margin-top: var(--margin-top);
        }

Kein Plan, wie man den Code in so nem Textfeld einfügt, ich bin des erste mal hier im Forum.
Auf das kleine Menüsymbol rechts von dem Landschaftssymbol klicken und dann </>.
 

HTim

Neues Mitglied
Danke für die ausführlichen Antworten. Leider funktioniert es immer noch nicht ganz. Ich habe jetzt aber den Rat mit der Variable von @Sempervivum eingebaut. Ich denke ich habe einfach noch einen weiteren Fehler eingebaut. Bildschirmfoto 2022-11-30 um 06.19.33.png
So sieht es aktuell aus, wenn ich das Menü öffne. Zum einen die Verschiebung der Bürger Bar und zum andern geht der Rest unter der Navbar zu weit runter. Jetzt frage ich nochmal nach Rat.
Hier ist nochmal der Code:

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/a2c993e8e8.js" crossorigin="anonymous"></script>
</head>

<body>
    <a class="cart" href="#"><i class="fa-regular fa-cart-shopping"></i><span>0</span></a>
    <header class="navbar">
        <a class="logo" href="#">FloraCarCare</a>
        <nav>
            <ul class="nav__links">
                <li class="nav-item"><a href="#" class="nav-link"></a>Start</li>
                <li class="nav-item"><a href="#" class="nav-link"></a>Produkte</li>
                <li class="nav-item"><a href="#" class="nav-link"></a>ÜberUns</li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>
    <br>
    <br>
    <div class="main">
    <h2 style="text-align: center;" class="title">Produkte</h2>
    <br>
    <section class="container">
        <div class="card">
            <a href="#">
            <div class="card-image car-1"></div>
            <h3>Sprühwax FloraCarCare 15.99€</h3>
            <p>Optimalen Reinigung und Pflege aller glatten und lackierten Hartflächen</p>
            </a>
        </div>
        <div class="card">
            <a href="#">
            <div class="card-image car-2"></div>
            <h3>Felgenglanz FloraCarCare 14.99€</h3>
            <p>Problemlose Reinigung von Alu- und Stahlfelgen sowie Radkappen aus Kunststoff</p>
            </a>
        </div>
        <div class="card">
            <a href="#">
            <div class="card-image car-3"></div>
            <h3>Scheibenreiniger FloraCarCare 15.99€</h3>
            <p>Reiniger für Scheiben aus Glas und Kunststoff, ohne bildung jeglicher Schlieren</p>
            </a>
        </div>
        <div class="card">
            <a href="#">
            <div class="card-image car-4"></div>
            <h3>Kunststoffpflege FloraCarCare 15.99€</h3>
            <p>Zur Pflege und Farbauffrischung von Gummi- und Kunststoffteilen im Innenraum</p>
            </a>
        </div>
    </section>
    <br>
    <a href="#" class="gradient-button">Alle Produkte</a>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </div>
</body>
</html>

CSS:
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    header {
        background-color: #dedede;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 18px 0.75%;
    }
    .logo {
        cursor: pointer;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
        text-decoration: none;
        background-color: transparent;
        font-size: 19px;
        padding-right: 2%;
    }
    .navbar {
        min-height: 60px;
        display: flex;
        justify-content: flex-start;
        padding: 0 10px;
    }
    .nav__links {
        list-style: none;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 500;
        font-size: 16px;
        color: #7f7f7f;
        text-decoration: none;
        background-color: transparent;
        cursor: pointer;
        word-spacing: 15px;
        display: flex;
        justify-content: flex-start;
        gap: 20px;
    }
    .nav__links li {
        display: inline-block;
    }
    .nav__links li {
        transition: all 0.3s ease 0s;
    }
    .nav__links li:hover {
        color: #1e90ff;
    }
    .cart {
        position: fixed;
        right: 2%;
        background-color: transparent;
        overflow: hidden;
        background-repeat: no-repeat;
        border: none;
        outline: none;
        margin-top: 23px;
        color: #1e90ff;
        font-size: 16px;
    }
    .hamburger {
        display: none;
        cursor: pointer;
    }
    .bar {
        display: block;
        width: 25px;
        height: 2px;
        margin: 7px auto;
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        background-color: #1e90ff;
    }
    @media(max-width:768px){
        .hamburger{
            display: block;
        }
        .hamburger.active .bar:nth-child(2){
            opacity: 0;
        }
        .hamburger.active .bar:nth-child(1){
            transform: translateY(8px) rotate(45deg);
        }
        .hamburger.active .bar:nth-child(1){
            transform: translateY(-8px) rotate(-45deg);
        }
        .hamburger.active {
                margin-top: 160px;
        }
        .nav__links {
            position: fixed;
            left: -100%;
            top: 50px;
            gap: 0;
            flex-direction: column;
            width: 100%;
            text-align: left;
            padding-left: 2%;
            transition: 0.2s;
            background-color: #dedede;
        }
        .nav-item {
            margin: 16px 0;
        }
        .nav__links.active {
            left: 0;
        }
        .main {
            transition: margin-top 0.2s;
        }
        .main.active {
            margin-top: var(--margin-top);
        }
    }
    .title {
        font-family: Helvetica;
        font-size: 2rem;
        font-weight: normal;
    }
    .container  {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .card {
        background-color: #ffffff;
        height: 480px;
        width: 280px;
        margin: 15px;
        border-radius: 5px;
        border-color: #dedede;
        box-shadow: 10px 20px 5px 5px #dedede;
    }
    .card-image {
        height: 270px;
        background-size: cover;
        border-radius: 5px 5px 0 0;
    }
    .car-1 {
        background-image: url(Pflegereiniger.png);
    }
    .car-2 {
        background-image: url(Felgenreiniger.png);
    }
    .car-3 {
        background-image: url(Glasreiniger.png);
    }
    .car-4 {
        background-image: url(Kunstoff\ Reiniger.png);
    }
    .card h3 {
        padding: 10px;
        text-align: center;
        font-weight: normal;
    }
    .card p {
        padding: 10px;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
    }
    .card a {
        padding: 15px;
        text-decoration: none;
        color: #000000;
        font-family: Arial, Helvetica, sans-serif;
    }
    .card:hover {
        cursor: pointer;
        transform: scale(1.075);
        transition: all 0.5s ease;
    }
    .gradient-button {
        cursor: pointer;
        background-color: transparent;
        color: #000000;
        float: right;
        margin-right: 5%;
        height: 60px;
        width: 300px;
        line-height: 60px;
        overflow: hidden;
        letter-spacing: 5px;
        color: #000000;
        border: solid 2px #000000;
        text-decoration: none;
        text-align: center; 
        position: relative;
        background: -webkit-gradient(0deg, transparent 50%, #55a445 50%);
        background-size: 200px 160px;
        border: 2px solid;
        font-family: Arial, Helvetica, sans-serif;
    }
    .gradient-button::before {
        content: '';
        position: absolute;
        top: 0%;
        left: 0%;
        width: 0%;
        height: 100%;
        background-color: #dedede;
        transition: all 0.5s;
        z-index: -1;
        text-decoration: none;
    }
    .gradient-button:hover::before {
        width: 100%;
    }

Javascript:
const hamburger = document.querySelector(".hamburger");
    const nav__links = document.querySelector(".nav__links");
    const main = document.querySelector('.main');
    const menuBox = nav__links.getBoundingClientRect();
    const root = document.documentElement;
    root.style.setProperty('--margin-top', menuBox.height + 'px');

    hamburger.addEventListener("click", () => {
        hamburger.classList.toggle("active");
        nav__links.classList.toggle("active");
        main.classList.toggle("active");
    })

    document.querySelectorAll(".nav__links").forEach(n => {
        n.addEventListener("click", () => {
        hamburger.classList.remove("active");
        nav__links.classList.remove("active");
        main.classList.remove("active");
        });
    });

Mit freundlichen Grüßen
 
Werbung:
Oben