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

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

H

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:
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.
 
basti1012 schrieb:
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.
Zum Vergrößern anklicken....
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
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben