Why isn’t Navbar showing up?

Asked

Viewed 75 times

0

I’m doing a navbar from scratch, but I’m not succeeding when it comes to triggering as the ul element as a block. I was wondering why. On the console it appears that the class is being added and removed, but has no effect.

My code

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-family: sans-serif;
        }
        nav{
            width: 100%;
            background: #00316b;
        }
        ul{
            width: 80%;
            margin: 0 auto;
            padding: 0; 
        }
        ul li{
            list-style: none;
            display: inline-block;
            padding: 20px;
        }
        ul li:hover{
            background: #e91e63;
        }
        ul li a{
            color: #fff;
            text-decoration: none;
        }
        .toggle{
            width: 100%;
            padding: 10px 20px;
            background: #001f44;
            box-sizing: border-box;
            text-align: right;
            color: #fff;
            font-size: 20px;
            display: none;
        }
        #menu{
            transition: 1s;
        }
        .d-block{
            display: block;
        }
        @media screen and (max-width: 768px) {
            .toggle{
                display: block;
            }
            #menu{
                width: 100%;
                display: none;
            }
            ul li{
                display: block;
                text-align: center;
            }
        }

    </style>
</head>
<body>
    <nav>
        <div class="toggle">
            <button onclick="clique()">Clique</button>
        </div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </nav>

    <script type="text/javascript">
        let div = document.getElementById('menu');

        function clique(){
            if (div.className.indexOf('d-block')<0) {
                div.classList.add('d-block');
                console.log('elemento block');
            }else{
                div.classList.remove('d-block');
                console.log('elemento none');
            }
        }
    </script>
</body>
</html>
javascript css

1 answer

2


Face your problem is not even the JS is not with CSS.

Look at your code, notice that you put display: none using the ID

@media screen and (max-width: 768px)
#menu {
    width: 100%;
    display: none; /* esse None tem mais força que o Block da d-block, pois o estilo do ID sobrescreve o estilo da Classe*/
}

And then you try to pull this one out display making a .classList.add('d-block') and .classList.remove('d-block') by JS, but this will never work, because the CSS styles of ID #menu, will always prevail over class styles .d-block.

inserir a descrição da imagem aqui

Now that you already know why it didn’t work, you can fix it by simply putting a !important in class 

   .d-block{
        display: block !important;
    }

Or you can not put the display: none in the ID and put in ul, like ul {display: none}. In case I used the !important to make it easier and move as little as possible in your code.

let div = document.getElementById('menu');

function clique(){
    if (div.className.indexOf('d-block')<0) {
        div.classList.add('d-block');
        console.log('elemento block');
    }else{
        div.classList.remove('d-block');
        console.log('elemento none');
    }
}
*{
    margin: 0;
    padding: 0;
}
body{
    font-family: sans-serif;
}
nav{
    width: 100%;
    background: #00316b;
}
ul{
    width: 80%;
    margin: 0 auto;
    padding: 0; 
}
ul li{
    list-style: none;
    display: inline-block;
    padding: 20px;
}
ul li:hover{
    background: #e91e63;
}
ul li a{
    color: #fff;
    text-decoration: none;
}
.toggle{
    width: 100%;
    padding: 10px 20px;
    background: #001f44;
    box-sizing: border-box;
    text-align: right;
    color: #fff;
    font-size: 20px;
    display: none;
}
#menu{
    transition: 1s;
}
.d-block{
    display: block !important;
}
@media screen and (max-width: 768px) {
    .toggle{
        display: block;
    }
    #menu{
        width: 100%;
        display: none;
    }
    ul li{
        display: block;
        text-align: center;
    }
}
<nav>
    <div class="toggle">
        <button onclick="clique()">Clique</button>
    </div>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
</nav>

  • Thank you @Ugo.

  • @Diogosouza no problem my dear, study tbm the CSS selectors will help you with these problems in the future

Browser other questions tagged javascript css

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