HTML+Sass implementiert HambergurMenu (Hamburger-Menü)

/*Farbe und maximale Breite festlegen*/
$Primärfarbe: rgba(13,110,139,.75);
$Overlay-Farbe: rgba(24,39,51,.85);
$max-Breite: 980px;

/*Legen Sie die Textfarbe fest. Wenn die Hintergrundfarbe hell ist, stellen Sie sie auf Schwarz ein, andernfalls auf Weiß*/
@Funktion setze Textfarbe($Farbe){
  @if(Helligkeit($Farbe)>70){
    @return #333;
  }@anders{
    @return #fff;
  }
}

/*Mixer, Hintergrundfarbe und Textfarbe einstellen*/
@mixin set-Hintergrund($Farbe){
  Hintergrundfarbe: $color;
  Farbe: Textfarbe festlegen($color);
}

@import '_config';
*{
  Rand: 0;
  Polsterung: 0;
}

.Container{
  maximale Breite: $max-Breite;
  Rand: 0 automatisch;
}

/*Legen Sie die Hintergrundfarbe für die Präsentation fest, fügen Sie mithilfe einer Pseudoklasse ein Hintergrundbild hinzu und setzen Sie den Z-Index des Hintergrundbilds auf -1 (damit das Bild darin angezeigt wird).
Um den Text dann in der Mitte erscheinen zu lassen, wird Flex-Layout verwendet*/
.Schaukasten{
  Position: relativ;
  Höhe: 100vh;
  Hintergrundfarbe: $Primärfarbe;
  &:vor{
    Inhalt: '';
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Hintergrund: URL('../img/pexels-photo-533923.jpeg') keine Wiederholung Mitte Mitte / Cover;
    z-Index: -1;
  }
  &-innere{
    Anzeige: Flex;
    Höhe: 100%;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Textausrichtung: zentriert;
    Farbe: #fff;
    Schriftstärke: 100;
    h1{
      Schriftgröße: 4rem;
      Polsterung: 1,2rem 0;
    }
    P{
      Leerzeichen: vor dem Umbruch;
      Schriftgröße: 1,6rem;
      Polsterung: 0,85rem 0;
    }
    .btn{
      Polsterung: .65rem 1rem;
        /*Verwenden Sie den Mixer, um die Hintergrundfarbe und die Textfarbe festzulegen*/
      @include set-background(aufhellen($primary-color,30%));
      Rand: keiner;
      Rand: 1px durchgehend $Primärfarbe;
      Rahmenradius: 5px;
      Textdekoration: keine;
      Gliederung: keine;
      Übergang: alle 0,2 s Leichtigkeit 0,1 s;
        /*Wenn Sie mit der Maus über die Schaltfläche fahren, verwenden Sie die CSS3-Skalierung, um einen Zoomeffekt festzulegen*/
      &:schweben{
        @include set-background(aufhellen($overlay-color,30%));
        Rahmenfarbe: aufhellen ($Overlay-Farbe, 25 %);
        transformieren: Skalierung(.98);
      }
    }
  }
}

/*Prinzip: Ändere den Stil, indem du auf die Checkbox klickst (stelle die Transparenz der Checkbox auf 0 und den Z-Index auf einen höheren Wert). Wenn du klickst, erscheint ein Menü. Klicke erneut und das Menü verschwindet*/
/*Setzen Sie den Menüumbruch auf „fest“, damit die Präsentation den gesamten Bildschirm ausfüllt; setzen Sie außerdem die Deckkraft des Kontrollkästchens auf „0“.
Beachten Sie auch, dass Sie den Z-Index der Checkbox auf 2 setzen müssen, da der Z-Index des Hamburgers auf 1 gesetzt ist, da sonst der Klick nicht funktioniert*/
.menu-wrap{
  Position: fest;
  links: 0;
  oben: 0;
  Z-Index: 1;
  .umschalten{
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 50px;
    Höhe: 50px;
    Deckkraft: 0;
    Z-Index: 2;
    Cursor: Zeiger;
      /*Wenn das Kontrollkästchen aktiviert ist, legen Sie den Rotationseffekt der Div- und Pseudoklasse im Hamburger fest*/
    &:geprüft ~ .hamburger>div{
      transformieren: drehen (135 Grad);
        /*Die Pseudoklasse ist tatsächlich um 225 Grad gedreht, daher muss top auf 0 gesetzt werden, da sonst die Länge von ❌ inkonsistent ist*/
      &:vorher,&:nachher{
        transformieren: drehen (90 Grad);
        oben: 0;
      }
    }

      /*Wenn das Kontrollkästchen ausgewählt und der Mauszeiger darüber bewegt wird, wird auch ein Rotationseffekt festgelegt*/
    &:geprüft:hover ~ .hamburger>div{
      transformieren: drehen (235 Grad);
    }
    &:aktiviert ~ .menu{
      Sichtbarkeit: sichtbar;
      >div{
        transformieren: Skalierung(1);
        >div{
          Deckkraft: 1;
        }
      }
    }
  }
    
  .Hamburger{
    Position: absolut;
    links: 0;
    oben: 0;
    Breite: 60px;
    Höhe: 60px;
    Polsterung: 1rem;
    Hintergrundfarbe: $Primärfarbe;
    Box-Größe: Rahmenbox;
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Textausrichtung: zentriert;
    Z-Index: 1;
      /*Das div selbst generiert eine horizontale Linie in der Mitte, setzt dann die Positionierung auf relativ und dann seine Pseudoklasse auf absolut.
      Offset relativ zu div*/
    >div{
      Position: relativ;
      links: 0;
      oben: 0;
      Breite: 100 %;
      Höhe: 2px;
      Hintergrundfarbe: #fff;
      Übergang: alles 0,7 s leicht;
        /*Verwenden Sie eine Pseudoklasse, um die erste und dritte horizontale Linie zu generieren*/
      &:vor,
      &:nach{
        Inhalt: '';
        Position: absolut;
        links: 0;
        oben: -10px;
        Breite: 100 %;
        Höhe: 2px;
        Hintergrundfarbe: erben;
      }
      &:nach{
        oben: 10px;
      }
    }
  }

    /*Stil des ausgewählten Menüs festlegen*/
    /*Stelle das Menü auf fest, mit einer Breite und Höhe von 100%, und stelle dann die Anzeige auf Flex, sonst erscheint das Menü nicht in der Mitte*/
  .Speisekarte{
    Position: fest;
    links: 0;
    oben: 0;
    Breite: 100 %;
    Höhe: 100%;
    Überlauf: versteckt;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Sichtbarkeit: versteckt; /*Setze das Menü auf unsichtbar und dann auf sichtbar, wenn das Kontrollkästchen aktiviert ist*/
    Übergang: alles 0,75 s Leichtigkeit;
    >div{
      @include set-background($overlay-color);
      Breite: 200vw;
      Höhe: 200vh;
      Überlauf: versteckt;
      Randradius: 50 %;
      Anzeige: Flex;
      Inhalt ausrichten: zentriert;
      Elemente ausrichten: zentrieren;
      Textausrichtung: zentriert;
      transformieren: Skalierung(0);
      Übergang: alle 0,4 Sekunden mühelos;
      >div{
        maximale Breite: 90 vw;
        max. Höhe: 90vh;
        Deckkraft: 0;
        Übergang: alle 0,4 Sekunden mühelos;
        >ul>li{
          Listenstil: keiner;
          Schriftgröße: 2rem;
          Polsterung: .85rem 0;
          Texttransformation: Großbuchstaben;
          transformieren: schief(-5 Grad,-5 Grad) drehen(5 Grad);/*Textneigung einstellen*/
          A{
            Farbe: erben;
            Textdekoration: keine;
            Übergang: Farbe 0,4 s Leichtigkeit;
          }
        }
      }
    }
  }
}