1486 sujets

Web Mobile et responsive web design

[Résolu] Faire redisparaître la div quand l'écran redevient grand

Comme cité dans le titre, j'aimerais faire redisparaître la div “hideorshow“ quand l'écran redevient grand.
Merci d'avance de vos réponses…
N'esitez pas a me dire si vous trouvez des améliorations. Smiley cligne 


 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>responsive navbar</title>
<link rel="stylesheet" type="text/css" href="resnavbar.css">
</head>
<body>
<nav>
  <div><a href="javascript:void(0);" onclick="myFunction()"><img src="lines.png" class="icon" id="y"/></a></div>
  <div><a href="#" style="margin:9px;float:left;font-size: 25px;margin-left: 20px;">#Responsive</a></div>
  <div class="containe">
    <a href="#" class="blocs">Lien1</a>
    <a href="#" class="blocs">Lien3</a>
    <a href="#" class="blocs">Lien4</a>
    <a href="#" class="blocs">Lien5</a>
  </div>
</nav>
<div class="hidden" id="hideorshow">
  <a href="#" class="blocs">Lien1</a><br>
  <a href="#" class="blocs">Lien3</a><br>
  <a href="#" class="blocs">Lien4</a><br>
  <a href="#" class="blocs">Lien5</a><br>
</div>
<script>
  let = 0;
  function myFunction() {
    var x = document.getElementById("hideorshow");
    if (x.className === "hidden") {
      x.className += "shone";
    } else {
      x.className = "hidden";
    }
  }
</script>
</body>
</html>




*{padding:0px;
    margin:0px;}
  @font-face {
      font-family: "policenav";
      src: url('coolvetica rg copie.ttf');
}
  
.containe{
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    transition: 0.4s;
    top:15px;
    left: 0px;
}
.blocs{
    width: 100px;
    text-align: center;
    margin-left:5%;
    margin-right: 5%; 
}
a{
    font-size: 20px;
    text-decoration: none;
    color: black;
    font-family:"policenav";
}
nav{
    background-image: linear-gradient(to right, red , yellow);
    height: 50px;
}
  
.icon{
    float:right;
    margin:8px;
    position: relative;
    height: 0px;
    transition:  0.4s;
    right: -45px;
    top:12px;
    border-radius: 3px;
    transition-timing-function: ease-in-out;}

.icon:hover{
background-color: #fff;
transition-duration: 0.05s;
}
@media screen and (max-width: 490px) {
    .icon{
        height: 35px;
        right: 10px;
        top:0px;}
    .containe{
        top:-50px;}
}
#hideorshow{
    float: right;
}
.hidden{
    display: none;
}
.shone{
    display: grid;
}

Modifié par TheHiddenDisplay (06 Oct 2020 - 11:44)
Modérateur
Bonjour,
TheHiddenDisplay a écrit :
Comme cité dans le titre, j'aimerais faire redisparaître la div “hideorshow“ quand l'écran redevient grand.
Merci d'avance de vos réponses…
N'esitez pas a me dire si vous trouvez des améliorations. Smiley cligne

En gardant la logique de ton code, il faudrait déplacer le css concernant .hidden et .shone dans le media-queries et les préfixer par #hideorshow (comme ça, elles n'auront un effet que si la fenêtre est étroite). Et en dehors du media-queries, il faut laisser #hideorshow toujours à display:none; C'est ça qui fera re-disparaître la div “hideorshow“ quand on élargira la fenêtre, même si elle a la classe "shone".

Le css devient par exemple :

#hideorshow{
    float: right;
    display: none;
}

@media screen and (max-width: 490px) {
    .icon{
        height: 35px;
        right: 10px;
        top:0px;}
    .containe{
        top:-50px;}
	#hideorshow.hidden{
    	display: none;
	}
	#hideorshow.shone{
    	display: grid;
	}
}

TheHiddenDisplay a écrit :
N'esitez pas a me dire si vous trouvez des améliorations. Smiley cligne

La ligne javascript x.className += "shone"; Il faut juste mettre x.className = "shone"; (car sinon, #hideorshow se retrouve à la fois avec la classe hidden et la classe shone ce qui n'est pas très logique). J'imagine que c'était une tentative pour garder la caractéristique de la classe "hidden" quand la fenêtre redevenait large.

Le reste du code est perfectible, mais bon, l'essentiel est qu'il marche pas trop mal.

Enfin, je ne vais pas "hésiter" à souligner que "esitez" s'écrit "hésitez" et "shone" s'écrit "shown" ! (si toutefois j'ai compris quelque chose à la question). Smiley cligne

Amicalement,
Meilleure solution
Merci, j'étais un peu septique quant à l'utilisation de forums... Smiley ohwell
Plus maintenant!!
Merci encore et désolé pour les faute d'orthographes Smiley cligne
Sujet clos
Aller à