Une animation css fait beuger mon menu déroulant par latisss - page 1

Bonjour,

j'ai un problème au niveau du header. J'ai fait une animation css avec de la pluie qui tombe. Mais depuis que j'ai mis cette animation, mon menu déroulant ne veut plus s'ouvrir (il y a juste les 3 barres pour normalement ouvrir le menu déroulant):

Donc voila l'animation marche bien mais quand je vais sur les 3 barres rien ne s'ouvre.

Pouvez vous m'aider voici mon code de cette partie:

code html:

<!DOCTYPE html>
<html lang="fr">
   <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
       <meta charset="UTF-8">
       <link rel="stylesheet" href="style.css"/>
       <title>Assistance pour un collecteur d'eau de pluie</title>
       <style media="screen">
       </style>
  </head>
  <header>
    <div class="rain">
        <h1><span class="baniere3">R</span><span class="baniere2">ain</span><span class="baniere1">W</span><span class="baniere2">ater</span> <span class="baniere1">C</span><span class="baniere2">ollector</span> <span class="baniere1">A</span><span class="baniere2">ssistance</span></h1></div>
      </br></br>
        <div id="mySidenav" class="sidenav">
         <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
         <a href="index.html">Accueil</a></br></br>
         <a href="#Qu-es-ce-que-c'est">Qu'es ce que c'est</a>
         <a href="#respecter">Que devons-nous respecter</a>
         <a href="#but">Le but de l'amélioration</a>
         <a href="#marche">Comment ça marche</a>
         <a href="index1.html">Un projet étudiant</a>
         <a href="index1.html">Va-t il être mis en vente</a>
         <a href="index1.html">Quel est le but</a>
       </div>
        <span style="font-size:40px;cursor:pointer;color:white;margin-left:1%; margin-top:1px" onclick="openNav()">&#9776;</span>
  </header>
  <section>
       <h2><i>"Un collecteur d'eau qui vous facilite la vie"</i></h2>
     <div class="body parallax">
        <h3 style="text-align:center; padding-left: 3%;"><img src="assets/img/rwca.png"></h1>
    </div>
  </section>

code css:

@font-face {
    font-family: 'madisonsquareincised';
    src: url('assets/police/madisi/madisonsquare_incised_macroman/MADISI__-webfont.eot');
    src: url('assets/police/madisi/madisonsquare_incised_macroman/MADISI__-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/police/madisi/madisonsquare_incised_macroman/MADISI__-webfont.woff2') format('woff2'),
         url('assets/police/madisi/MADISI__-webfont.woff') format('woff'),
         url('assets/police/madisi/madisonsquare_incised_macroman/MADISI__-webfont.ttf') format('truetype'),
         url('assets/police/madisi/madisonsquare_incised_macroman/MADISI__-webfont.svg#madisonsquareincised') format('svg');
        font-weight: normal;
        font-style: normal;}

@font-face {
        font-family: 'mutlu_ornamental';
        src: url('assets/police/multi/Mutlu__Ornamental-webfont.eot');
        src: url('assets/police/multi/Mutlu__Ornamental-webfont.eot?#iefix') format('embedded-opentype'),
             url('assets/police/multi/Mutlu__Ornamental-webfont.woff2') format('woff2'),
             url('assets/police/multi/Mutlu__Ornamental-webfont.woff') format('woff'),
             url('assets/police/multi/Mutlu__Ornamental-webfont.ttf') format('truetype'),
             url('assets/police/multi/Mutlu__Ornamental-webfont.svg#mutlu_ornamental') format('svg');
        font-weight: normal;
        font-style: normal;}

.img1{
      margin: -8px -8px;
      padding: 0px;
      width: 101%;
      height: 937px;
      max-width: auto;}

.parallax {
        background-image: url("assets/img/jardin.jpg");
        height: 100vh;
        margin: -8px -8px;
        padding: 10px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;}


header{
      background-color: #585858;
      margin: -8px -8px;
      padding: 10px;
      height: 100px;
      max-width: auto;
      border-bottom: 4px solid #424242;
      text-shadow: 2px 6px 10px black;}

.baniere1{
          font-family: 'madisonsquareincised';
          color: white;
          text-align:justify;
          font-size: 200%;
          font-style: italic;
          font-weight: bolder;}

.baniere2{
          color: white;
          font-style: italic;
          text-align: justify;
          font-weight: lighter;
          font-size: 150%;}

.baniere3{
        color: white;
        font-family: 'madisonsquareincised';
        text-align: justify;
        font-size: 200%;
        font-style: italic;
        font-weight: bolder;}

.sidenav {
          height: 100%;
          width: 0px;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: #293133;
          overflow-x: hidden;
          transition: 0.5s;
          padding-top: 60px;}

.sidenav a {
          padding: 8px 8px 8px 32px;
          text-decoration: none;
          font-size: 25px;
          color: #818181;
          display: block;
          transition: 0.3s;}

.sidenav a:hover {
          color: #f1f1f1;}

.sidenav .closebtn {
          position: absolute;
          top: 0;
          right: 25px;
          font-size: 36px;
          margin-left: 50px;}

h1{
  text-align: center;}

h2{
  text-align: center;
  color: black;
  font-size: 300%}

h3{
  font-size: 700%;}

body{
  position: relative;
  overflow-x: hidden;
  overflow-y:scroll;
  background-color: lightgrey;}

.rain{
  background-image: url(assets/img/pluie.png);
  margin: -30px;
  padding: -15px;
  height: 16vh;
  animation: rain 5s linear infinite;
}

.rain:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0%;
}

@keyframes rain {
  0%{
    background-position: 20% 100%;
  }
  100%{
    background-position: 0% 0%;
  }
}

latisss

14 mars 2020 à 10:10:44

Lartak

14 mars 2020 à 11:46:01

Bonjour.

La balise que tu utilises à la ligne 15 n'existe pas en HTML.

Le mieux étant quand même d'utiliser le CSS pour faire un espacement entre des éléments.

Sinon, le fait que ton menu déroulant ne s'ouvre plus, c'est plutôt vague comme explication.

As-tu vérifié si l'action de l'affichage du menu ne s'effectue vraiment pas ?

Peut-être aussi un problème de JavaScript.

Tu pourrais au passage, transférer tout ce qui se trouve dans l'attribut style dans une règle de ton fichier CSS.

-
Edité par Lartak 14 mars 2020 à 11:50:18

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

Une animation css fait beuger mon menu déroulant

Une animation css fait beuger mon menu déroulant

Supprimer

Modérer

Signaler le message aux modérateurs