Frage tranistion-delay beim schließen des menüs

tim_058454512 · 17 Oktober 2024

Hi Leute, ich bin noch nicht so ganz mit HTML, CSS und JS vertraut. Ich bin grade dabei ein Website zu erstellen, aber habe folgendes Problem:

Ich habe es schon hinbekommen, dass wenn sich das Menü öffnet meine drei Boxen verschwinden. Ich will genau das auch anders herum machen, aber bekomme es einfach nicht hin. Ich habe schon probiert den transition-delay des Menüs einfach beim Container einzufügen, aber dann passiert das auch beim öffnen des Menüs.
Ich hoffe ihr könnt mir helfen und Danke im Voraus. Sorry falls die Formulierung etwas schwammig ist, aber vielleicht wird es ja mit dem Code veständlicher.

LG Tim

HTML-CODE

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <link href="../../Intranetseite/stylesheets/style_tools.css" rel="stylesheet">
    <link href="../../Intranetseite/stylesheets/style2.css" rel="stylesheet">
    </head>
 
    <body>
     
<!--NAVIGATIONSMENÜ-->  
     
    <input type="checkbox" id="active" onclick="myFunction()">
      <label for="active" class="menu-btn"><span></span></label>
      <label for="active" class="close"></label>
        <div class="wrapper">
            <ul>
                <li><a href="startseite.html">Home</a></li>
                <li><a href="tools.html">Tools</a></li>
                <li><a href="links.html">Links</a></li>
                <li><a href="feedback.html">Feedback</a></li>
            </ul>
        </div>

<!--ENDE-->

<!--LOGO MIT TEXT-->
  <div class="content" id="myDIV">
    <div class="container">
      <div class="box">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="BMW Logo" class="box-img">
          <p class="box-text">Dies ist der Text für Box 1. Der Text beginnt auf derselben Höhe wie das BMW Logo.</p>
      </div>
      <div class="box">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="BMW Logo" class="box-img">
          <p class="box-text">Dies ist der Text für Box 2. Der Text beginnt auf derselben Höhe wie das BMW Logo.</p>
      </div>
      <div class="box">
          <img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="BMW Logo" class="box-img">
          <p class="box-text">Dies ist der Text für Box 3. Der Text beginnt auf derselben Höhe wie das BMW Logo.</p>
      </div>
    </div>
  </div>

<!--ENDE-->


<!--SCRIPT-->

  <script>
    let zIndexChanged = false;
   
    function myFunction() {
      const myDiv = document.getElementById("myDIV");
   
      if (!zIndexChanged) {
        myDiv.style.zIndex = "-1";  // Z-Index ändern
        zIndexChanged = true;
      } else {
        myDiv.style.zIndex = "0";   // Z-Index zurücksetzen
        zIndexChanged = false;
    }
  }
</script>

<!--ENDE-->

  </body>
  </html>

DAS IST DER CODE FÜR MEINE SEITE

CSS:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.box {
    display: flex;
    align-items: flex-start;
    background-color: #ccc;
    padding: 20px;
    width: 80%;
    max-width: 800px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.box-img {
    width: 150px;
    height: auto;
    margin-right: 20px;
}

.box-text {
    flex: 1;
    margin: 0;
    font-size: 18px;
}

DAS IST DER CODE FÜR DIE NAVIGATION

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Lato', sans-serif;
    font-family: 'Oswald', sans-serif;
  }
  .wrapper{
    position: fixed;
    top: 0;
    /*left: -100%;*/
    right: -100%;
    height: 100%;
    width: 100%;
    background: #272727;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
    transition: all 0.6s ease-in-out;
  }
  #active:checked ~ .wrapper{
    /*left: 0;*/
    right:0;
  }
  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 20px;
    /*left: 20px; */
    top: 20px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    /*color: #fff;*/
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
  }
  .menu-btn span,
  .menu-btn:before,
  .menu-btn:after{
      content: "";
      position: absolute;
      top: calc(50% - 1px);
      left: 30%;
      width: 40%;
      border-bottom: 2px solid #000;
      transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .menu-btn:before{
    transform: translateY(-8px);
  }
  .menu-btn:after{
    transform: translateY(8px);
  }
 
 
  .close {
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
      transition: background .6s;
  }
 
  /* closing animation */
  #active:checked + .menu-btn span {
      transform: scaleX(0);
  }
  #active:checked + .menu-btn:before {
      transform: rotate(45deg);
    border-color: #fff;
  }
  #active:checked + .menu-btn:after {
      transform: rotate(-45deg);
    border-color: #fff;
  }
  .wrapper ul{
    position: absolute;
    top: 60%;
    left: 50%;
    height: 90%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
  }
  .wrapper ul li{
    height: 10%;
    margin: 15px 0;
  }
  .wrapper ul li a{
    text-decoration: none;
    font-size: 30px;
    font-weight: 500;
    padding: 5px 30px;
    color: #fff;
    border-radius: 50px;
    position: absolute;
    line-height: 50px;
    margin: 5px 30px;
    opacity: 0;
    transition: all 0.3s ease;
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .wrapper ul li a:after{
    position: absolute;
    content: "";
    background: #fff;
     /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
    /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50px;
    transform: scaleY(0);
    z-index: -1;
    transition: transform 0.3s ease;
  }
  .wrapper ul li a:hover:after{
    transform: scaleY(1);
  }
  .wrapper ul li a:hover{
    color: #1a73e8;
  }
  input[type="checkbox"]{
    display: none;
  }
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .content .title{
    font-size: 40px;
    font-weight: 700;
  }
  .content p{
    font-size: 35px;
    font-weight: 600;
  }
 
  #active:checked ~ .wrapper ul li a{
    opacity: 1;
  }
  .wrapper ul li a{
    transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateX(100px);
  }
  #active:checked ~ .wrapper ul li a{
      transform: none;
      transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1);
      transition-delay: .6s;
    transform: translateX(-100px);
  }

Oliver77 · 17 Oktober 2024

Was meinst du mit andersrum, das Menü soll sich doch öffnen, wenn man auf das Hamburger Menü klickt....

Sempervivum · 17 Oktober 2024

Ich verstehe das Problem so, dass beim Öffnen die Nav die Boxen mit den Logos und den Texten überdeckt, beim Schließen jedoch nicht, dabei überdecken die Boxen die Nav.
Das kannst Du, @tim_058454512 , beheben, indem Du das Javascript ganz weg lässt, ebenso den z-index bei dem Container mit den Boxen, den z-index bei der Nav (div.wrapper) auf 1 und den z-index der Buttons auf 2 setzt.

Davon abgesehen ist zu empfehlen, keine nichtssagenden Klassen wie "container" oder "wrapper" zu verwenden, sondern solche, die etwas über den Inhalt aussagen wie "nav". Und am besten gleich semantische Tags verwenden: <header> <nav> <main>. Dann wird alles gleich viel übersichtlicher.

tim_058454512 · 18 Oktober 2024

Hi,
danke erstmal für die Antwort @Sempervivum. Das Problem ist, dass ich das JS drin lassen muss, da ich auch ein Feedback-Formular erstellt habe, in das man reinschreiben muss. Ohne das JS geht das in meinen Augen garnicht. Und @Oliver77, ich glaube wenn du dir die Antwort von Sempervivum durch ließt verstehst was ich meine. Ich habe schon überlegt, ob man nicht einfach das JS erweitern könnte, so dass es beim schließen einen delay hat oder so in der Art.

Wenn euch noch was einfällt einfach Bescheid geben.

LG Tim

Sempervivum · 18 Oktober 2024

Wenn Du Javascript noch für etwas anderes brauchst, kannst Du das ja drin lassen und nur die Zeilen löschen, die an dem z-index herum manipulieren.

tim_058454512 · 21 Oktober 2024

So, ich habe jetzt alles hinbekomme. danke für deine Hilfe @Sempervivum

Frage tranistion-delay beim schließen des menüs

tim_058454512

Neues Mitglied

Oliver77

Aktives Mitglied

Sempervivum

Senior HTML'ler

tim_058454512

Neues Mitglied

Sempervivum

Senior HTML'ler

tim_058454512

Neues Mitglied

Neueste Beiträge