Komputer, Perangkat lunak
Cara membuat drop-down menu CSS
Hari ini kita akan mempertimbangkan pertanyaan "Bagaimana cara membuat drop-down menu CSS?". Ini harus mengatakan sekaligus bahwa item ini akan dibuat tanpa menghubungkan dana tambahan. Artinya, menu akan dibuat hanya dengan CSS dan HTML.
latihan
Untuk sepenuhnya memahami apa yang ada di dalam artikel tersebut, Anda perlu sedikit untuk berkenalan dengan materi teori. Tapi jika Anda sudah familiar dengan pseudo-kelas, Anda dapat melewatkan ayat ini. Jadi, untuk membuat drop-down vertikal CSS menu, kita perlu elemen sebagai «: hover». Pseudo «: hover» dapat ditugaskan untuk setiap tag HTML. Hal ini memungkinkan Anda untuk menentukan saat ketika item Arahkan mouse Anda. Sebagai contoh, kami telah menunjuk properti: «a: hover {color: red;}». Catatan ini berarti bahwa ketika Anda membawa tikus ternyata merah pada isi dari tag . Perlu dicatat bahwa ini pseudo-elemen juga tidak aktif. By the way, «: hover» telah berhubungan elemen yang sama. Tapi dari ini kita akan membuat menu drop-down semu CSS.
pengajaran
Pertama, mari kita memahami apa adalah menu drop-down. Berdasarkan definisi ini mendapat banyak metode yang berbeda membangun tata letak yang berbeda. Dalam hal ini, kita akan menganalisis struktur yang terdiri dari beberapa item terus terlihat dan beberapa tambahan (tersembunyi). Mari kita selesaikan dengan teori dan mulai berlatih.
- Kami menciptakan tata letak menu kami. Untuk melakukan hal ini, HTML-kode label. Buat daftar bersarang:
-
- < / ul>. Sesuatu seperti ini akan terlihat seperti menu drop-down Anda. CSS untuk campur tangan kemudian. Dalam hal ini daftar utama terdiri dari tiga bidang utama dan dua tertutup.
- Menyembunyikan sub-menu. Untuk ini kita menggunakan stylesheet, menentukan sifat-sifat berikut: ul ul {display: none;} Ini akan menghapus elemen dari daftar kedua dari layar.
- Membuat menu CSS, drop-down dari daftar utama. Cascading style sheet menulis aturan berikut: ul li: hover ul {display: block;}. Catatan ini berarti bahwa ketika mouse di atas li elemen, yang terletak di daftar ul muncul di ul layar (terlampir). Pada pandangan pertama, skema tersebut mungkin tampak rumit dan membingungkan. Namun pada kenyataannya, semuanya sangat sederhana.
- Gunakan tata letak ini sendiri dengan memasukkan tag
- konten Anda. Anda dapat mengubah jumlah daftar elemen.
perubahan dekoratif
Begitu tata letak menu utama siap, Anda dapat melanjutkan untuk pendaftaran. Mungkin, banyak di tempat pertama bersedia untuk menyingkirkan penanda yang menunjukkan item daftar. Hal ini dilakukan dengan menggunakan CSS properti tunggal, yaitu list-style-type. Anda perlu menambahkan entri berikut: li {list-style-type: none;}. Kemudian Anda dapat menyisipkan bingkai dan membuat latar belakang. Perbatasan dan latar belakang membantu Anda dengan ini. Mungkin beberapa tidak akan seperti menu pull-down akan muncul sebagai daftar tambahan, mendorong elemen dasar yang sama. Untuk mengatasinya, Anda dapat posisi itu. Untuk melakukan hal ini, cascading style sheets menulis entri berikut: ul ul {position: absolute; kiri: 15px; kanan: 15px; top: 15px; bottom: 15px;}. Tentu saja, nilai-nilai Anda akan menggunakan Anda sendiri. Tergantung di mana Anda ingin melihat menu drop-down, CSS akan menawarkan lebih banyak fitur yang dapat menambahkan berbagai efek dan menghias daftar kami.
kesimpulan
Sekali lagi perlu dicatat pembangunan tata letak menu. Untuk menetapkan aturan CSS digunakan dalam kasus tertanam ini nilai, misalnya, ul ul. Jika Anda berada di dokumen untuk memenuhi struktur serupa lainnya, mungkin ada masalah besar. Dalam situasi ini, Anda perlu menggunakan tujuan tertentu, misalnya, pemilih atau id-ID. Menu drop-down tata letak artikel di atas dirancang untuk membiasakan desain umum. Sisa pekerjaan bertumpu pada bahu Anda.
Similar articles
Trending Now