Jak utworzyć menu wylotowe z CSS

Menu wylotowe lub rozwijane pokazują hierarchię stron witryny. Enandituje potrzebę ładowania wielu stron użytkowników. Menu wylotowe jest wykorzystywane do wyświetlania kontekstu lub upuszczania menu, gdy użytkownik go poprosi. Jest również określany jako podmenu. Te menu są rozszerzone na poduszanie myszy. Menu wylotowe można zbudować bez użycia JavaScript.

Ten post wyjaśni procedurę utworzenia wylotowego menu z CSS.

Jak utworzyć menu wylotowe z CSS?

W HTML dodaj następujące elementy, aby utworzyć menu przelotne:

• • „„
    „Element jest zaimplementowany z„Fly-Menu" klasa. W tym elemencie dodaj „
    • „Element zawierający menu.
    • „„
    • „Elementy zawierają adres URL źródłowego i nazwy stron, które wyświetlają jako menu.
    • URL zdefiniowano w atrybucie „Href„HTML”" element:

  
  
  • Dom
  
  
  • O
    
    
    
    • Wydział
    
    
    • Personel
    
    
    • Kierownictwo
    
    
    
    
  
  
  • Przyjęcia
    
    
    
    • Kryteria
    
    
    • Testy przykładowe
    
    
    
    
  
  
  • Naukowcy
  
  
  • Wydarzenia
    
    
    
    • Rozkład nagród
    
    
    • Zawody
    
    
    • Dzień środowiska naturalnego
    
    
    
    
  
  
  • Kontakt
  
  

  
  Struktura menu wylotowego została pomyślnie utworzona przy użyciu elementów HTML:

  
  Teraz zastosuj właściwości CSS do stylowych elementów HTML.

  Krok 1: Style „Fly-Menu”

  .Fly-Menu
  Margines: 15px;
  szerokość: 150px;
  Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;
  

  
  „„Fly-Menu„Klasa„

  „Element jest określony w tych właściwościach:
  • • "margines”Daje przestrzeń po każdej stronie elementu.
    • "szerokość”Określa szerokość elementu.
    • "rodzina czcionek„Właściwość przypisuje styl czcionki elementu. Lista wymienionych czcionek zapewnia, że ​​jeśli pierwszy styl nie będzie obsługiwany przez przeglądarkę, druga zostanie zastosowana automatycznie.

  Wyjście

  
  Krok 2: Element stylu „Li”

  .Fly-Menu Li
  Pozycja: względny;
  Blok wyświetlacza;
  

  
  Element dziecięcy „

  • ”
    „Tag ma klasę”Fly-Menu”Jest stylizowany z następującymi właściwościami:
    • • "pozycja„Własność o wartości”względny”Dostosowuje względny pozycję elementu.
      • "wyświetlacz„Własność o wartości”blok”Zajmuje całą szerokość i zaczyna się od nowej linii.

    Krok 3: Stylowe elementy „Li” i „Ul”

    .Fly-Menu Li ul
    Pozycja: absolutna;
    szerokość: 100%;
    Nie wyświetla się;
    

    
    „„

    „Element w„ „
    • „Tag„Fly-Menu„Klasa jest stosowana z tymi właściwościami:
      • • "pozycja”Z„absolutny„Wartość ustawia pozycję elementu w stosunku do pozycjonowanego elementu nadrzędnego.
        • „„szerokość" I "wyświetlacz„Właściwości są wyjaśnione powyżej.

      Wyjście

      
      Krok 4: Element stylu „A”

      .Fly-Menu A
      Blok wyświetlacza;
      szerokość: 100%;
      Margines: 5px;
      Wyściółka: 10px;
      czarny kolor;
      granica: 1px stały RGB (245, 244, 244);
      Box-Shadow: 2px 2px CadetBlue;
      RADIUS Border: 8px;
      przejście: wszystkie 0.3s łatwość;
      Dekoracja tekstu: Brak;
      

      
      „„„Element klasy”Fly-Menu”Przypisuje się następujące właściwości:

      • • Tekst w „„„Tag jest domyślnie niebieski, dodaj„kolor„Własność do wyznaczenia koloru tekstu.
        • „„granica„Nieruchomość jest stosowana w celu zamknięcia elementów w granicy.
        • "Shadow Box”Jest właściwością skrótów do dodania cienia, który zawiera wartości poziomego przesunięcia, przesunięcia pionowego, efektu rozmycia i koloru.
        • „„Radiusz graniczny„Właściwość sprawia, że ​​narożniki elementu okrągłe.
        • "przemiana„Własność określa szybkość animacji elementu w danym okresie czasu.
        • "dekoracja tekstu„Nieruchomość z„nic„Wartość usuwa dekoracje tekstu Podkreśń.

      Wyjście

      
      Dodajmy kilka efektów nalania do menu wylotowego.

      Krok 5: Stylowy element „A” na „Władzie”

      .Fly-Menu A: Hover
      kolor tła: #009;
      kolor: #fff;
      

      
      „„:unosić się„Pseudoklasa jest wykorzystywana do zastosowania stylizacji, gdy mysz unosi się na element. Te właściwości stylizacji wyjaśniono poniżej:

      • • "kolor„Podaj kolor tekstu elementu.
        • „„kolor tła”Jest zaimplementowany, aby zmienić kolor tła.

      Wyjście

      
      Krok 6: Element stylu „Li” na „Hover”

      .Fly-Menu Li: Hover ul
      Blok wyświetlacza;
      Transform: Tłumacz (175px, -45px);
      

      
      „„

    • „Element na zawisie wyświetli swoje dziecko”
      ”Elementy z następującymi właściwościami:
      • • "wyświetlacz”Z„blok„Wartość naprawia wyświetlanie„
          „Element w bloku. Oznacza to, że element przejmie całą szerokość.
          • "przekształcać„Nieruchomość z„Tłumaczyć()„Wartość funkcji ustanawia efekt animacji na element. Funkcja „tłumacz ()” zawiera dwa parametry dla „Oś X" I "Oś yOdpowiednio.
          • Na wisu, „
            „Element będzie wyświetlany jako blok w„Oś X" I "Oś y„Spaces.

          Wyjście

          
          W ten sposób możemy skutecznie utworzyć menu wylotowe dla naszej aplikacji.

          Wniosek

          Aby utworzyć wylotowe menu z CSS, „

          " I "
          • ”Można zaimplementować elementy HTML, aby stworzyć strukturę wylotową. CSS „wyświetlacz" I "przekształcać„Właściwości wraz z wieloma innymi przydatnymi właściwościami są używane do sformułowania lub zaprojektowania. Ten post przedstawił kompleksową procedurę utworzenia menu wylotowego za pomocą CSS.