JS ne changera pas la propriété d'affichage nav-hidden de none à flex. J'ai essayé avec !important, cela semble fonctionner dans certains cas, mais j'aimerais savoir pourquoi cela ne fonctionne pas, afin de mieux comprendre. Lorsque j'appuie sur le bouton, une nouvelle classe est attribuée à l'élément, mais la propriété reste inchangée.

Ce que j'essayais de faire: nav-hidden n'apparaît que lorsque je clique sur le bouton sur tout l'écran lorsque l'écran est inférieur à 700px, et que la ligne de navigation est alignée avec le logo à l'intérieur lorsque l'écran est plus large que 700px.

function myFunction() {
    var fullnavigation = document.getElementById("nav-hidden");
    fullnavigation.classList.toggle("open-nav");
}
body{
    margin: 0;
    font-family: 'Roboto', sans-serif;
}
header{
    background-color: #009933;
    width:100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.logo img{
    display: block;
    height: 4em;
}
@media screen and (max-width:700px){
    .nav-line{
        display: none;
    }
    .open-nav{
        display: flex;    
    }
    .nav-hidden{
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #009933;
        flex-direction: column;
    }
    .nav-button{
        display: block;
        color: #ffffff;
        background-color: transparent;
        padding: 0px;
        border: 0px;
        cursor: pointer;
        font-size: 4em;
        z-index: 9999;
    }
}
<!DOCTYPE html>
<html lang="sl">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="slike\favicon\favicon.png" type="image/gif" size="128x128">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <script src="js\index.js"></script>
  <link rel="stylesheet" href="css\index.css">
</head>
<body>
    <header>
        <div class="logo"><img src="" alt="logo"></div>
        <button id="nav-button" onclick="myFunction()">☰</button>
        <nav id="nav-line" class="nav-line">
                <div class="nav-text"><a href="#">DOMOV</a></div>
                <div class="nav-text"><a href="#">O NAS</a></div>
                <div class="nav-text"><a href="#">KONTAKT</a></div>
                <div class="nav-text"><a href="#">POVPRAŠEVANJE</a></div>
        </nav>
    </header>
    <nav id="nav-hidden" class="nav-hidden">
        <div class="nav-text"><a href="#">DOMOV</a></div>
        <div class="nav-text"><a href="#">O NAS</a></div>
        <div class="nav-text"><a href="#">KONTAKT</a></div>
        <div class="nav-text"><a href="#">POVPRAŠEVANJE</a></div>
    </nav>
</body>
</html>
0
jan horuk 17 mars 2019 à 15:49

2 réponses

Meilleure réponse

Au fur et à mesure que CSS lit votre code successivement, la classe .open-nav a été interceptée par la suivante .nav-hidden. Le problème n'est pas dans votre code JS et si vous regardez ce JSFiddle cela fonctionne et js change bien votre classe. Mettez simplement .open-nav après .nav-hidden

@media screen and (max-width:700px){
    .nav-line{
        display: none;
    }
    .nav-hidden{
        display: none;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #009933;
        flex-direction: column;
    }

    .open-nav{
        display: flex;    
    }
}
1
Lab Lab 17 mars 2019 à 13:04

.classList.toggle('className') : lorsqu'un seul argument est présent : basculer la valeur de la classe ; c'est-à-dire que si la classe existe, supprimez-la et renvoyez false, sinon, ajoutez-la et renvoyez true.

Ainsi, votre JS ajoutera la classe "open-nav" mais ne supprimera pas le "hidden-nav". Je pense que l'erreur peut venir de là.

Dites-moi si vous avez besoin de plus d'aide après cela.

Source:

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

0
Marin Mouscadet 17 mars 2019 à 13:00