Bagaimanakah Saya Boleh Mencipta Menu Jatuh Bawah Pembukaan Ke Atas Menggunakan Hanya CSS?

Menu Turun yang Dibuka Ke Atas dengan CSS Tulen

CSS tulen membolehkan penciptaan menu lungsur turun yang mantap dan menarik secara visual. Tutorial ini akan membimbing anda melalui langkah-langkah untuk mencapai menu lungsur turun "naik", yang bukannya bukaan ke bawah biasa.

Pada mulanya, anda telah mewujudkan lungsur turun CSS tulen menu yang memenuhi keperluan anda kecuali pembukaannya yang menurun. Matlamat kami adalah untuk mengubah suai kod anda untuk menjadikan menu dibuka ke atas, dengan itu menjadi menu "turun".

Untuk mencapai pembukaan ke atas ini, anda perlu membuat sedikit pengubahsuaian pada peraturan CSS anda:

Penyelesaian 1: Laraskan Kedudukan

Dalam peraturan CSS yang meletakkan submenu menu lungsur turun anda, tambah bahagian bawah: 100% harta. Ini pada asasnya akan mengalihkan submenu ke atas item menu induknya dan bukannya di bawahnya.

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
  bottom: 100%;
}

Penyelesaian 2: Submenu Khusus Sasaran

Jika anda ingin menghalang kesan pembukaan menaik daripada dikenakan kepada semua submenu, anda boleh menggunakan peraturan CSS yang lebih disasarkan. Dalam kes ini, ubah suai peraturan untuk menyasarkan hanya submenu bagi item menu peringkat atas.

#menu>ul>li:hover>ul {
  bottom: 100%;
}

Penyelesaian 3: Kekalkan Sempadan Menu

Jika melaraskan kedudukan submenu menjejaskan mereka penampilan visual, anda boleh menambah harta bahagian bawah sempadan untuk mengekalkan rupa yang diingini.

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent;
}

Dengan melaksanakan satu daripada penyelesaian ini, anda boleh mencapai menu "drop-up" yang dikehendaki menggunakan CSS tulen. Anda boleh menemui demonstrasi langsung di http://jsfiddle.net/W5FWW/4/.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Menu Jatuh Bawah Pembukaan Ke Atas Menggunakan Hanya CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!