Контент показывается при прокрутке вниз с помощью burgermenu (адаптивное меню) - PullRequest
Новая
       0

Контент показывается при прокрутке вниз с помощью burgermenu (адаптивное меню)

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

У меня проблема с моим отзывчивым меню. Пока я открываю бургермену, я могу прокрутить вниз и увидеть содержимое страницы. Единственное содержимое, которое я вижу, это те три коробки, и я не знаю почему! Я опущу код для этих ящиков и, может быть, вы можете сказать, почему. Если что-то неясно, пожалуйста, дайте мне знать, чтобы я мог выполнить ваши запросы. PS Я загружаю GIF, который показывает, что происходит. enter image description here

const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('open');
    links.forEach(link => {
        link.classList.toggle("fade");
    });
});
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    /*background-color: #ffffff;
    background-color: #d8e7ff;
    /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23d8e7ff'/%3E%3Cstop offset='1' stop-color='%23ffffff'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.02'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;*/
}

button {
    font-family: 'Poppins', sans-serif;
}

header {
    display: flex;
    width: 100%;
    margin: auto;
    align-items: center;
}

.logo-container, .nav-links {
    display: flex;
}

.logo-container {
    flex: 1;
    height: 10vh;
}

.logo {
    font-weight: 400;
    margin: 5px;
}

nav {
    flex: 1;
    height: 10vh;
    background: #3C3664;
}

.nav-links li a {
    color: white;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    list-style: none;
    align-items: center;
    width: 50%;
    height: 100%;
    margin-left: auto;
}

.nav-link {
    color: #5f5f79;
    font-size: 18px;;
}

/* Removing the underline of navigation bar */
.nav-links a {
    text-decoration: none;
}

.presentation {
    display: flex;
    width: 90%;
    margin: auto;
    min-height: 80vh;
    align-items: center;
}

.introduction {
    flex: 1;
    animation: drop 0.5s ease;
}

.welcometext h1 {
    font-size: 17px;
    margin-top: 5px;
    color: #3C3664;
    font-weight: 300;
    letter-spacing: 8px;
}

.intro-text h1 {
    font-size: 44px;
    font-weight: 700;
    background: linear-gradient(to right, #3C3664, #6f6f89);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.intro-text p {
    font-size: 18px;
    margin-top: 5px;
    color: #3C3664;
}

.cta {
    padding: 50px 0px 0px 0px;
}

.cta-tmm {
    background-color: #3C3664;
    width: 150px;
    height: 50px;
    cursor: pointer;
    font-size: 16px;
    color: white;
    border: none;
}

.cover {
    flex: 1;
    display: flex;
    justify-content: center;
    height: 55vh;
}

.cover img {
    height: 100%;
    animation: drop 0.5s ease;
}

.text {
    display: block;
    width: 90%;
    margin: auto;
    margin-top: 70px;
    min-height: 10vh;
    align-items: center;
    text-align: center;
}

.text h1 {
    font-size: 20px;
    letter-spacing: 8px;
    font-weight: 300;
    color: #3C3664;
}

.text p {
    font-size: 25px;
    font-weight: 600;
    color: #3C3664;
}

.text img {
    width: 250px;
}
.services {
    display: flex;
    height: 60vh;
    width: 100%;
    margin: auto;
    align-items: center;
    text-align: center;
    flex-direction: row;
    justify-content: space-around;
    position: absolute; 

    /* centering the parent div
    left: 50%;
    transform: translateX(-50%);
     */ 
}

.qm:hover img {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

/* If icon color is not black or white, then we just set the brightness to 0 which sets
    the color of img to black and then we just invert it to 0 which basically means
    that whatever the actual color is just make it the total opposite of that */
.qm:hover img {
    filter: brightness(0) invert(1);
}
.qm:hover {
    background-color: #3C3664;
    cursor: pointer;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.8);
    height: 63%;
    width: 18;
}

.qm:hover h1 {
    color: white;
}

.qm:hover p {
    color: white;
}

.audit:hover img {
    filter: brightness(0) invert(1);
}
.audit:hover {
    background-color: #3C3664;
    cursor: pointer;
    box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
    height: 63%;
    width: 18;
}

.audit:hover h1 {
    color: white;
}

.audit:hover p {
    color: white;
}

.pm:hover img {
    filter: brightness(0) invert(1);
}
.pm:hover {
    background-color: #3C3664;
    cursor: pointer;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.8);
    height: 63%;
    width: 18;
}

.pm:hover h1 {
    color: white;
}

.pm:hover p {
    color: white;
}

.qm {
    height: 60%;
    background: #fcfcfc;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 15%;
    min-width: 10%;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.audit {
    height: 60%;
    background: #fcfcfc;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 15%;
    position: relative;
    overflow: hidden;
}

.pm {
    height: 60%;
    background: #fcfcfc;
    box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    padding: 0 1rem;
    width: 15%;
    position: relative;
    overflow: hidden;
}

.qmheading {
    width: 100%;
    height: 30%;
    color: #3C3664;
}

.auditheading {
    width: 100%;
    height: 30%;
    color: #3C3664;
}

.pmheading {
    width: 100%;
    height: 30%;
    color: #3C3664;
}

.qmimage {
    width: 100%;
    height: 40%;
}

.auditimage {
    width: 100%;
    height: 40%;
}

.pmimage {
    width: 100%;
    height: 40%;
}

.qmimage img {
    width: 100%;
    height: 100%;
    width: 85px;
}

.auditimage img {
    width: 100%;
    height: 100%;
    width: 85px;
}

.pmimage img {
    width: 100%;
    height: 100%;
    width: 70px;
}

.qmparagraph {
    width: 100%;
    height: 30%;
    text-align: left;
}

.auditparagraph {
    width: 100%;
    height: 30%;
    text-align: left;
}

.pmparagraph {
    width: 100%;
    height: 30%;
    text-align: left;
}

.qm h1, .audit h1, .pm h1 {
    font-weight: 600;
    font-size: 22px;
}

.audit h1 {
    padding-top: 20px;
}

.qm p, .audit p, .pm p {
    padding-top: 20px;
    font-weight: 600;
    color: #3C3664;
    font-size: 13px;
}

@keyframes drop {
    0%{
        opacity: 0;
        transform: translateY(-50px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

@media screen and (max-width: 768px) {

    .line {
        width: 30px;
        height: 3px;
        background: white;
        margin: 5px;
    }

    nav {
        position: relative;
    }

    .hamburger {
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%, -50%);
        z-index: 2;
    }

     .services {
        z-index: 0;
     }

    .nav-links {
        position: fixed;
        background: #3C3664;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(100px at 90% -10%);
        -webkit-clip-path: circle(100px at 90% -10%);
        transition: all 1s ease-out;
        pointer-events: none;
    }

    .nav-links.open {
        clip-path: circle(1200px at 90% -10%);
        -webkit-clip-path: circle(1200px at 90% -10%);
        pointer-events: all;
    }
    /* Changing the color from violet to white after the burgermenu shows up */
    .nav-links li a {
        color: white;
    }

    .nav-links li {
        opacity: 0;
    }

    .nav-links li a {
        font-size: 20px;
    }

    .nav-links li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }

    .nav-links li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }

    .nav-links li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }

    .nav-links li:nth-child(4){
        transition: all 0.5s ease 0.8s;
    }

    li.fade {
        opacity: 1;
    }

    .presentation {
        flex-direction: column;
    }

    .services {
        flex-direction: column;
    }

    .introduction {
        margin-top: 5vh;
        text-align: center;
    }

    .text h1 {
        font-size: 20px;
    }

    .text p {
        font-size: 25px;
    }
    
    .intro-text img {
        width: 30%;
    }

    .qm {
        height: 200vh;
        background: #fcfcfc;
        box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        padding: 0 1rem;
        width: 55%;
        position: relative;
        overflow: hidden;
        margin-top: 5%;
    }

    .audit {
        height: 200vh;
        background: #fcfcfc;
        box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        padding: 0 1rem;
        width: 55%;
        position: relative;
        overflow: hidden;
        margin-top: 5%;
    }

    .pm {
        height: 200vh;
        background: #fcfcfc;
        box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.2);
        border-radius: 20px;
        padding: 0 1rem;
        width: 55%;
        position: relative;
        overflow: hidden;
        margin-top: 5%;
    }
    
    .audit h1 {
        font-size: 17px;
    }

    .intro-text h1 {
        font-size: 25px;
    }
    
    .intro-text p {
        font-size: 14px;
    }

    .cta {
        padding: 10px 0px 0px 0px;
    }

    .cover img {
        height: 60%;
    }
}
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css" />
    <title>QM-SÜD GmbH Qualitätsmanagement</title>
</head>

<body>
    <header>
        <!-- 
        <div class="logo-container">
            <img src="./img/logo.svg" alt="logo">
            <h4 class="logo"> QM SÜD</h4>
        </div>
        -->
        <nav>
            <div class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </div>
            <ul class="nav-links">
                <li><a class="nav=link" href="index.html">Home</a></li>
                <li><a class="nav=link" href="services.html">Services</a></li>
                <li><a class="nav=link" href="#">About Us</a></li>
                <li><a class="nav=link" href="#">Credentials</a></li>
            </ul>
        </nav>
    </header>

    <!-- Actaul Content -->
    <main>
        <section class="presentation">
            <div class="introduction">
                <div class="welcometext">
                    <h1>
                        WELLCOME
                    </h1>
                </div>
                <div class="intro-text">
                    <h1>Optimal Solution for Your Products</h1>
                    <img src="./img/line.png" alt="" class="lineimage">
                    <p>
                        Ensuring optimal solution for your
                        Quality Management.
                    </p>
                </div>
                <div class="cta">
                    <!-- cta-tmm stands for call to action - tell me more -->
                    <button class="cta-tmm">Tell me more</button>
                </div>
            </div>
            <div class="cover">
                <img src="./img/homeimg.svg" alt="homepageimg">
            </div>
        </section>

        <div class="text">
            <h1>
                SERVICES
            </h1>
            <div class="line">
                <!-- <img src="./img/line.png" alt="line"> -->
            </div>
            <p>
                We have specialized <br>in the following areas
            </p>
            <img src="./img/line.png" alt="">
        </div>

        <div class="services">
            <!-- Quality Management -->
            <div class="qm">
                <div class="qmheading">
                    <h1>
                        Quality Management
                    </h1>
                </div>
                <div class="qmimage">
                    <img src="./img/qmimage.svg" alt="" class="qmimage1">
                </div>
                <div class="qmparagraph">
                    <p>
                        ISO 9001 2015, <br>
                        ISO 17025 & ISO 13485
                    </p>
                </div>
            </div>
            <!-- Auditing -->
            <div class="audit">

                <div class="auditheading">
                    <h1>
                        Auditing
                    </h1>
                </div>

                <div class="auditimage">
                    <img src="./img/auditimage.svg" alt="">
                </div>

                <div class="auditparagraph">
                    <p>
                        INTERNAL AUDITING &
                        EXTERNAL AUDITING,
                        LEAD AUDITOR
                    </p>
                </div>
            </div>
            <!-- Project Management -->
            <div class="pm">
                <div class="pmheading">
                    <h1>
                        Project Management
                    </h1>
                </div>
                <div class="pmimage">
                    <img src="./img/pmimage.svg" alt="">
                </div>
                <div class="pmparagraph">
                    <p>
                        QUALITY MANAGEMENT &
                        CONTROLLING
                    </p>
                </div>
            </div>
        </div>

        <script src="app.js">

        </script>
    </main>
</body>

</html>

1 Ответ

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

Глядя на предоставленный (частичный) код, я считаю, что добавление следующих стилей решит проблему: 

.hamburger {
   z-index: 2
}.services {
   z-index: 0
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...