I can’t click the menu link

Asked

Viewed 55 times

0

In the side menu I’m not able to click on it, I’ve done everything but nothing of the right HELP...

*{
    padding: 0;
    margin: 0;
}
body{
    overflow: hidden;
}
a{
    text-decoration: none;
    color: black;
    margin-left: 20px;
}
ul{
    list-style: none;
}
.imagemMenu{
    width: 20px;
    height: 20px;
    padding-left: 10px;
    padding-top: 8px;
}
input[type="checkbox"]{
    display: none;
}
ul{
    top: 50px;
    position: absolute;
    width: 100%;
}
nav{
    background-color: rgba(16, 16, 16, .5);
    width: 250px;
    height: 100%;
    left: -250px;
    position: absolute;
    transition: all 1s ease-in-out;

}
input[type="checkbox"]:checked ~ nav{
    transform: translateX(250px);

}
.Amenu{
    display: block;
    padding: 15px 5px;
    color: white;
    font-size: 13px;
}
.Amenu:hover{
    background-color: rgb(176,224,230);
}
label{
    padding: 15px;
    position: absolute;
    z-index: 1;
}

.Hunters{
    color: #ffffff;
    margin-left: 4%;
    margin-top: 1.1%;
    position: absolute;
}
.animation-area{
    background: linear-gradient(to left, #303030, #000000e7);
    width: 100%;
    height: 100vh;
    z-index: 9999;
}
.box-area{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.box-area li{
    position: absolute;
    display: block;
    list-style: none;
    width: 25px;
    height: 25px;
    background: rgba(255,255,255, 0.2);
    animation: animete 20s linear infinite;
    bottom: -150px;
}
.box-area li:nth-child(1){
    left: 86%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.box-area li:nth-child(2){
    left: 12%;
    width: 30px;
    height: 30px;
    animation-delay: 1.5s;
    animation-duration: 7s;
}
.box-area li:nth-child(3){
    left:  70%;
    width: 100px;
    height: 100px;
    animation-delay: 5.5s;
}
.box-area li:nth-child(4){
    left:  42%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 15s;
}
.box-area li:nth-child(5){
    left:  65%;
    width: 40px;
    height: 40px;
    animation-delay: 0s;
}
.box-area li:nth-child(6){
    left:  15%;
    width: 110px;
    height: 110px;
    animation-delay: 3.5s;
}
.box-area li:nth-child(7){
    left:  30%;
    width: 22px;
    height: 22px;
    animation-delay: 3.5s;
}
.box-area li:nth-child(8){
    left:  79%;
    width: 90px;
    height: 80px;
    animation-delay: 3.5s;
}
.box-area li:nth-child(9){
    left:  95%;
    width: 50px;
    height: 50px;
    animation-delay: 3.5s;
}

@keyframes animete{
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(-800px) rotate(360deg);
        opacity: 0;
    }
}
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Hunters Developers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/index.css">
</head>
<body class="body-page">
    <div class="topo">
        <input type="checkbox" id="chec">
        <div class="cab">
            <label for="chec">
                <img class="imagemMenu" src="img/206-2069918_menu-icon-png-menu-icon-white-png.png">
            </label>
        </div>

        <nav>
            <ul>
                <li><a class="Amenu" href="index.html">Home</a></li>
                <li><a class="Amenu" href="contato.html">Contato</a></li>
                <li><a class="Amenu" href="MeusTrabalhos.html">Trabalhos</a></li>
                <li><a class="Amenu" href="contato.html">Contrate</a></li>
                <li><a class="Amenu" href="Mensagem.html">Enviar mensagem</a></li>
            </ul>
        </nav>
        <h3 class="Hunters">Hunters Developers</h3>
    </div>
    <div class="animation-area">
        <ul class="box-area">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

css html5

1 answer

2

You can’t because the menu is under the div where you have this animation, which is the div.animation-area, who owns a z-index of 9999, standing on top of everything.

You will resolve by changing the z-index for -1 and adding the property position: relative, for the z-index only works on elements with position, relative, absolute, fixed or sticky.

Behold:

*{
    padding: 0;
    margin: 0;
}
body{
    overflow: hidden;
}
a{
    text-decoration: none;
    color: black;
    margin-left: 20px;
}
ul{
    list-style: none;
}
.imagemMenu{
    width: 20px;
    height: 20px;
    padding-left: 10px;
    padding-top: 8px;
}
input[type="checkbox"]{
    display: none;
}
ul{
    top: 50px;
    position: absolute;
    width: 100%;
}
nav{
    background-color: rgba(16, 16, 16, .5);
    width: 250px;
    height: 100%;
    left: -250px;
    position: absolute;
    transition: all 1s ease-in-out;

}
input[type="checkbox"]:checked ~ nav{
    transform: translateX(250px);

}
.Amenu{
    display: block;
    padding: 15px 5px;
    color: white;
    font-size: 13px;
}
.Amenu:hover{
    background-color: rgb(176,224,230);
}
label{
    padding: 15px;
    position: absolute;
    z-index: 1;
}

.Hunters{
    color: #ffffff;
    margin-left: 4%;
    margin-top: 1.1%;
    position: absolute;
}
.animation-area{
    background: linear-gradient(to left, #303030, #000000e7);
    width: 100%;
    height: 100vh;
    z-index: -1;
    position: relative;
}
.box-area{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.box-area li{
    position: absolute;
    display: block;
    list-style: none;
    width: 25px;
    height: 25px;
    background: rgba(255,255,255, 0.2);
    animation: animete 20s linear infinite;
    bottom: -150px;
}
.box-area li:nth-child(1){
    left: 86%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.box-area li:nth-child(2){
    left: 12%;
    width: 30px;
    height: 30px;
    animation-delay: 1.5s;
    animation-duration: 7s;
}
.box-area li:nth-child(3){
    left:  70%;
    width: 100px;
    height: 100px;
    animation-delay: 5.5s;
}
.box-area li:nth-child(4){
    left:  42%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 15s;
}
.box-area li:nth-child(5){
    left:  65%;
    width: 40px;
    height: 40px;
    animation-delay: 0s;
}
.box-area li:nth-child(6){
    left:  15%;
    width: 110px;
    height: 110px;
    animation-delay: 3.5s;
}
.box-area li:nth-child(7){
    left:  30%;
    width: 22px;
    height: 22px;
    animation-delay: 3.5s;
}
.box-area li:nth-child(8){
    left:  79%;
    width: 90px;
    height: 80px;
    animation-delay: 3.5s;
}
.box-area li:nth-child(9){
    left:  95%;
    width: 50px;
    height: 50px;
    animation-delay: 3.5s;
}

@keyframes animete{
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100%{
        transform: translateY(-800px) rotate(360deg);
        opacity: 0;
    }
}
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Hunters Developers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/index.css">
</head>
<body class="body-page">
    <div class="topo">
        <input type="checkbox" id="chec">
        <div class="cab">
            <label for="chec">
                <img class="imagemMenu" src="img/206-2069918_menu-icon-png-menu-icon-white-png.png">
            </label>
        </div>

        <nav>
            <ul>
                <li><a class="Amenu" href="index.html">Home</a></li>
                <li><a class="Amenu" href="contato.html">Contato</a></li>
                <li><a class="Amenu" href="MeusTrabalhos.html">Trabalhos</a></li>
                <li><a class="Amenu" href="contato.html">Contrate</a></li>
                <li><a class="Amenu" href="Mensagem.html">Enviar mensagem</a></li>
            </ul>
        </nav>
        <h3 class="Hunters">Hunters Developers</h3>
    </div>
    <div class="animation-area">
        <ul class="box-area">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

  • guy worked out, thank you so much!! saved me

  • Just mark the answer with ✔.

  • had a problem dude, when I put the z-index: -1; and the position: relative; it really works I can interact with the menu but when I give F5 on the page the site already carries half buggy, being the bug : the background ta kind of broken in stripes and the site as soon as the page loads gets a white strip right in the footer of the page there passes some 10s the page goes up and back to normal knows how I can solve this?

  • Puts display: flex; in the .animation-area and align-self: stretch; in the .box-area.

  • didn’t work out dude, every time I give F5 the white strip at the bottom of the page is of a different size, then with a time for example 10 sec I run the scroll of the mouse it goes disappearing as if the page had gone up, is it possible to attach an image here :? for me to show you, I’m new here in the stack. not to mention that the background is all striped as if it were divided

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.