Bagaimana untuk Membuat Menu Jatuh Turun CSS Tulen?

Membuat Menu Jatuh Turun CSS Tulen

Dalam bidang reka bentuk web, keupayaan untuk mencipta menu navigasi yang lancar dan mesra pengguna adalah terpenting. Di antara pelbagai gaya menu, menu lungsur turun menonjol kerana keupayaannya untuk mengatur dan memaparkan pilihan navigasi dengan elegan. Artikel ini akan menyelidiki seni rumit mencipta menu jatuh turun CSS tulen yang bukan sahaja berfungsi tetapi juga menawan secara visual.

Struktur HTML

Struktur HTML untuk menu lungsur asas adalah agak mudah. Kami bermula dengan senarai tidak tersusun (

) yang berfungsi sebagai bekas untuk item menu kami. Dalam senarai, setiap item menu diwakili oleh item senarai (
• ).

  Contoh HTML:

  Penggayaan CSS

  Untuk mengubah struktur HTML menjadi menu lungsur yang berfungsi, kami menggunakan CSS berikut gaya:

  ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  ul li {
    display: block;
    position: relative;
    float: left;
  }
  
  li ul {
    display: none;
  }
  
  ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #2C5463;
    margin-left: 1px;
    white-space: nowrap;
  }
  
  ul li a:hover {
    background: #617F8A;
  }
  
  li:hover ul {
    display: block;
    position: absolute;
  }
  
  li:hover li {
    float: none;
    font-size: 11px;
  }
  
  li:hover a {
    background: #617F8A;
  }
  
  li:hover li a:hover {
    background: #95A9B1;
  }

  Cara Ia Berfungsi

  Penggayaan awal menyediakan penampilan keseluruhan menu, termasuk fon, jidar dan padding. Sifat paparan lalai ditetapkan untuk menyekat untuk elemen li, membolehkannya muncul secara mendatar. Submenu lungsur turun pada mulanya disembunyikan dengan menetapkan sifat paparannya kepada tiada.

  Keadaan tuding ditakrifkan untuk memaparkan submenu menggunakan kedudukan: mutlak, menjajarkannya di bawah item induknya. Selain itu, li submenu dan elemen mewarisi gaya untuk mengekalkan penampilan yang konsisten. Menuding pada item sub-submenu mencetuskan perubahan lanjut dalam warna latar belakang.

  Kesimpulan

  Mencipta menu lungsur turun CSS tulen melibatkan penstrukturan HTML yang teliti dan penggayaan CSS yang bertimbang rasa. Dengan menguasai teknik ini, pereka web boleh membuka kunci kuasa menu navigasi yang elegan dan berfungsi yang meningkatkan pengalaman pengguna dan mempamerkan kreativiti mereka.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Menu Jatuh Turun CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!