Komputer, Perisian
Bagaimana untuk membuat menu CSS drop-down
Hari ini kita akan mempertimbangkan persoalan "Bagaimana untuk saya mencipta menu CSS drop-down?". Ada yang berkata pada sekali bahawa perkara ini akan dibuat tanpa menyambung mana-mana dana tambahan. Iaitu, menu akan dicipta hanya dengan CSS dan HTML.
latihan
Untuk memahami sepenuhnya apa yang ada di dalam artikel itu, anda perlu sedikit untuk berkenalan dengan bahan teori. Tetapi jika anda sudah biasa dengan pseudo-kelas, anda boleh melangkau perenggan ini. Jadi, untuk membuat menu CSS drop-down menegak, kita perlu unsur sebagai «: hover». Pseudo «: hover» boleh diberikan kepada mana-mana tag HTML. Ia membolehkan anda untuk menentukan masa ini apabila item Tuding tetikus anda. Sebagai contoh, kami telah melantik harta: «a: hover {color: red;}». Entri ini bermakna bahawa apabila anda berlegar di tetikus ternyata merah pada kandungan mana-mana tag . Perlu diingat bahawa ini pseudo-unsur juga dilemahkan. Dengan cara ini, «: hover» telah berkaitan unsur-unsur yang sama. Tetapi daripada ini kita akan mewujudkan pseudo CSS menu drop-down.
Arahan
Pertama, mari kita memahami apa yang menu drop-down. Di bawah definisi ini mendapat banyak kaedah yang berbeza membina susun atur yang berbeza. Dalam kes ini, kita akan menganalisis struktur yang terdiri daripada beberapa item sentiasa dilihat dan beberapa tambahan (tersembunyi). Mari kita selesai dengan teori dan mula berlatih.
- Kami mewujudkan susun atur menu kami. Untuk melakukan ini, HTML-kod pelabelan. Buat senarai bersarang
-
- < / ul>. Sesuatu seperti ini harus seperti menu drop-down anda. CSS untuk campur tangan kemudian. Dalam kes ini, senarai utama terdiri daripada tiga bidang utama dan dua disertakan.
- Menyembunyikan sub-menu. Untuk ini kita menggunakan lembaran gaya, menentukan sifat-sifat berikut: ul ul {display: none;} Ini akan membuang unsur-unsur senarai kedua dari skrin.
- Buat CSS menu, jatuh bawah dari senarai utama. Lembaran gaya melata menulis kaedah yang berikut: ul li: berlegar ul {display: block;}. Entri ini bermakna bahawa apabila tetikus adalah lebih li unsur, yang terletak dalam senarai ul muncul pada ul skrin (dilampirkan). Pada pandangan pertama, skim ini mungkin kelihatan rumit dan mengelirukan. Tetapi yang sebenarnya, segala-galanya adalah sangat mudah.
- Menggunakan susun atur ini sendiri dengan memasukkan
- kandungan anda tag. Anda boleh menukar bilangan elemen senarai.
perubahan hiasan
Sebaik sahaja susun atur menu utama siap, anda boleh meneruskan untuk pendaftaran. Mungkin, ramai di tempat pertama bersedia untuk menghilangkan penanda yang menunjukkan item senarai. Ini dilakukan dengan menggunakan CSS harta tunggal, iaitu senarai-gaya-jenis. Anda perlu menambah catatan berikut: li {list-style-type: none;}. Kemudian anda boleh memasukkan bingkai dan membuat latar belakang. Sempadan dan latar belakang membantu anda dengan ini. Mungkin ada yang tidak akan suka menu pull-down akan muncul sebagai senarai tambahan, menolak pada elemen-elemen asas yang sama. Untuk menetapkan ini, anda boleh meletakkan ia. Untuk melakukan ini, lembaran gaya melata menulis catatan berikut: ul ul {kedudukan: mutlak; kiri: 15px; kanan: 15px; atas: 15px; bottom: 15px;}. Sudah tentu, nilai yang anda akan menggunakan anda sendiri. Bergantung kepada di mana anda mahu melihat menu drop-down, CSS akan menawarkan banyak ciri-ciri yang boleh menambah pelbagai kesan dan menghiasi senarai kami.
kesimpulan
Sekali lagi ia adalah diperhatikan pembinaan susun atur menu. Untuk memberi peraturan CSS yang digunakan dalam kes tertanam nilai ini, sebagai contoh, ul ul. Jika anda berada dalam dokumen untuk memenuhi struktur lain yang serupa, mungkin ada masalah besar. Dalam keadaan ini, anda perlu menggunakan tujuan tertentu, sebagai contoh, pemilih atau id-ID. susun atur artikel menu lungsur turun di atas direka untuk membiasakan reka bentuk umum. Yang lain kerja terletak di atas bahu anda.
Similar articles
Trending Now