Memilih dari daftar drop-down di HTML. Buat Daftar Dropdown Bergaya Css daftar dropdown di hover
Hari ini saya ingin menyajikan "resep" kecil untuk membuat daftar di CSS. Tidak ada jQuery, tidak ada CSS3 - hanya CSS lintas-browser yang bagus. Contohnya cukup sederhana, jadi rekan yang berpengalaman mungkin tidak tertarik. Kami akan menerapkan daftar drop-down dengan tombol sosial.
Jadi, jangan bicara lama-lama, langsung saja ke intinya
HTML
Bagikan postingan ini
Facebook
Twitter
Google Plus
Berhubungan dengan
RSS
Saya sengaja menghilangkan poin-poin umum, seperti memasukkan gaya, agar kode tidak berkembang. Di bagian bawah halaman saya akan memberikan tautan ke kode sumber - semuanya ada di sana. Apa yang kami miliki di HTML adalah daftar reguler dan tajuk yang tidak biasa. Keanehannya adalah dibuat oleh hyperlink, yang memungkinkan Anda untuk melacak acara tersebut :arahkan, yaitu bimbingan. Daftar tarik-turun akan berfungsi saat mengarahkan kursor ke judul.
css
Pertama, mari kita lihat gaya dasar dari daftar dropdown. Saya mencoba mengomentari setiap baris kode untuk membuatnya lebih jelas:
/*Reset padding*/ .droplink ul,.droplink h3,.droplink h3 a( padding:0;margin:0 ) /*Basic wrapper*/ .droplink ( width:200px; position:absolute; margin:10px 0 0 25px ) /*Box style on hover*/ .droplink:hover( height:auto; background-color:#3E403D; border:solid 1px #3A3C39 ) /*Title in normal state*/ .droplink h3 a( text-align:center ;width:100%;display:block;padding:12px 0px;color:#999;text-decoration:none ) .droplink h3 a img(border:none) /*Style for hover header*/ .droplink:hover h3 a ( color:#FFF; font-weight:bold; position:absolute )
Tidak ada yang istimewa di sini, kami menunjukkan ukuran dan gaya blok, gaya tajuk, dan untuk kedua elemen - gayanya saat mengarahkan kursor. Teruskan:
/*Sembunyikan daftar tanpa hover*/ .droplink ul( list-style:none; display:none ) /*Tampilkan daftar di hover*/ .droplink:hover ul( display:block; margin-top:40px ) .droplink li(tampilan: blok)
Kode ini sudah lebih menarik dan menunjukkan bagaimana perilakunya daftar drop-down saat melayang. Layak dalam kondisi normal tampilan: tidak ada yaitu tidak ditampilkan. Saat melayang, kami menampilkannya sebagai blok. Itulah seluruh rahasianya. Sekarang mari kita hiasi sedikit elemen daftar dan sisipkan ikon:
/*Daftar gaya item*/ .droplink li a( padding:5px 12px 4px 34px; margin:1px; background-color:#484A47; display:block; color:#FFF; text-decoration:none; font-size:12px ; background-repeat:no-repeat; background-position: 10px 3px ) /*Elemen style on hover*/ .droplink li a:hover( background-color:#999 ) /*Icons*/ .facebook a (background-image :url("icons/facebook.png")) .twitter a (background-image:url("icons/twitter.png")) .vk a (background-image:url("icons/vk.png")) .rss a (gambar-latar:url("ikon/rss.png")) .gplus a (gambar-latar:url("ikon/gplus.png"))
Faktanya, itu saja. Daftar dropdown sudah siap dan terlihat cukup bagus. Anda dapat mengatur elemen sesuai kebijaksanaan Anda, menambahkan sudut membulat dan "gadget" lainnya.
Jika Anda ingin daftar "tumpang tindih" dengan teks di bawahnya saat diarahkan, lihat ke arah lain z-index.
Jika ada yang kurang jelas atau tidak work tanyakan di komentar atau gunakan tombol "Kirim pesan" ada —>
Keterangan
Menandai
Sintaksis
Atribut
Memungkinkan Anda melompat ke daftar menggunakan beberapa pintasan keyboard. Menentukan bahwa daftar mendapat fokus setelah halaman dimuat. Memblokir akses dan modifikasi elemen. Kaitkan daftar dengan formulir. Memungkinkan Anda memilih beberapa item daftar sekaligus. Nama elemen yang akan dikirim ke server atau diakses melalui skrip. Daftar ini harus dipilih sebelum mengirimkan formulir. Jumlah baris daftar yang akan ditampilkan. Menentukan urutan elemen yang akan dinavigasi saat tombol Tab ditekan.
Tag penutup
Diperlukan.
HTML5 IE Cr Op Sa Fx
PILIH tag
Kotak kombo, juga disebut menu tarik-turun, adalah salah satu elemen formulir yang fleksibel dan nyaman. Bergantung pada pengaturannya, satu atau lebih nilai dapat dipilih dari daftar. Keuntungan dari daftar adalah kekompakan dan keserbagunaannya, daftar dapat menempati satu atau lebih baris, Anda dapat memilih satu atau lebih nilai di dalamnya. Kotak kombo dibuat sebagai berikut.
Menandai bertindak sebagai wadah untuk item daftar dan menentukan tampilannya, apakah itu daftar drop-down atau daftar dengan satu atau beberapa pilihan. Tampilan bergantung pada penggunaan atribut size dari tag , yang mengatur tinggi daftar, lebar daftar ditentukan secara otomatis berdasarkan panjang teks di dalamnya
Atribut Tag
Pertimbangkan atribut tag , yang dengannya Anda dapat mengubah tampilan daftar.
beberapa
Kehadiran banyak memberi tahu browser untuk merender konten elemen sebagai daftar pilihan ganda. Tampilan akhir daftar bergantung pada atribut size yang digunakan. Jika tidak ada, maka tinggi daftar sama dengan jumlah item, jika nilai ukurannya kurang dari jumlah item, maka akan muncul scroll bar vertikal.
Untuk memilih beberapa nilai daftar, gunakan tombol Ctrl dan Shift bersamaan dengan kursor mouse.
Contoh 1 menunjukkan cara membuat daftar pilihan ganda.
Contoh 1 - Daftar Pilihan Ganda
HTML5 IE Cr Op Sa Fx
Daftar
nama
Menentukan nama elemen yang unik . Biasanya, nama ini digunakan untuk mengakses data melalui skrip atau untuk mendapatkan nilai yang dipilih dari penangan server.
ukuran
Mengatur ketinggian daftar. Jika nilai size sama dengan satu, maka daftar tersebut menjadi daftar drop-down. Nilai default tergantung pada beberapa atribut. Jika ada, maka ukuran daftar sama dengan jumlah elemen. Jika tidak ada kelipatan, nilai atribut ukuran adalah 1.
Atribut Tag
Menandai
terpilih
Membuat item daftar saat ini dipilih. Jika tag beberapa atribut ditambahkan, maka lebih dari satu item dapat dipilih.
nilai
Menentukan nilai item daftar yang akan dikirim ke server. Pasangan "nama/nilai" dikirim ke server, di mana nama ditentukan oleh atribut name dari tag , dan nilainya adalah atribut nilai dari item daftar yang dipilih. Nilainya bisa bertepatan dengan teks item, atau berdiri sendiri.
label
Dirancang untuk menunjukkan label item daftar, disingkat dibandingkan dengan teks di dalamnya
Pembuatan daftar ditunjukkan pada contoh 2.
Contoh 2: Menggunakan Daftar
HTML5 IE Cr Op Sa Fx
Daftar
Mengelompokkan Item Daftar
Dengan daftar yang cukup besar, masuk akal untuk mengelompokkan elemen-elemennya ke dalam blok untuk memastikan visibilitas daftar dan kenyamanan bekerja dengannya. Tag digunakan untuk tujuan ini.
Contoh 3 Mengelompokkan Item Daftar
HTML5 IE Cr Op Sa Fx
Daftar
Hasil dari contoh ditunjukkan pada Gambar. 1.
Beras. 1. Daftar yang dikelompokkan
Menu Drop-Down Horisontal digunakan untuk mengatur struktur navigasi situs. Jumlah level sarang yang optimal adalah satu atau dua. Semakin sedikit level lampiran, semakin mudah pengunjung situs menemukan informasi yang mereka butuhkan. Cara membuat menu horizontal biasa dirinci dalam .
Cara membuat menu drop down horizontal
1. Markup HTML dan gaya dasar untuk menu tarik-turun dengan satu tingkat penyatuan
Markup HTML dari menu tarik-turun horizontal berbeda dari menu biasa karena mengacu pada item daftar yang diinginkan
daftar bersarang ditambahkan
atau<оl> .
Untuk memposisikan submenu relatif terhadap menu utama, gaya berikut dideklarasikan: — untuk elemen daftar di mana daftar drop-down bersarang: li (position: relative;); - untuk menu tarik-turun ul (position: absolute;) , serta nilai kiri dan atas.
Untuk kejelasan dan kemudahan pemformatan, mari tambahkan kelas topmenu ke menu utama, dan kelas submenu ke menu drop-down.
Anda dapat menyembunyikan menu dropdown dengan beberapa cara: 1) tampilan: tidak ada; 2) visibilitas: tersembunyi; 3) opasitas: 0; 4) transformasi: scaleY(0); 5) menggunakan perpustakaan jQuery.
Metode 1. (tampilan: tidak ada;)
Menu tarik-turun disembunyikan dengan .submenu (tampilan: tidak ada;) , ditampilkan saat melayang dengan .topmenu li:hover .submenu (tampilan: blok;) .
Metode 2. (visibilitas: tersembunyi;)
Menu disembunyikan dengan .submenu (visibilitas: tersembunyi;) , ditampilkan dengan .topmenu li:hover .submenu (visibilitas: terlihat;) .
Metode 3. (opasitas: 0;)
Menu disembunyikan dengan .submenu (opacity: 0;) , ditampilkan dengan .topmenu li:hover .submenu (opacity: 1;) . Untuk mencegah menu muncul saat Anda mengarahkan kursor ke area tempatnya berada, tambahkan visibility: hidden; , dan saat mengarahkan kursor, ubah ke visibility: visible; .
Metode 4. (ubah: scaleY(0);)
Menu disembunyikan dengan .submenu (transform: scaleY(0);) , ditampilkan dengan .topmenu li:hover .submenu (transform: scaleY(1);) . Karena transformasi default suatu elemen adalah dari tengah, Anda perlu menambahkan for .submenu (transform-origin: 0 0;) , yaitu. dari pojok kiri atas.
Metode 5: Menggunakan jQuery
$(".lima li ul").hide(); // sembunyikan menu tarik-turun $(".five li:has(".submenu")").hover(function()( $(".five li ul").stop().fadeToggle(300);) /* pilih elemen daftar yang berisi elemen dengan kelas .submenu dan tambahkan fungsi hover ke dalamnya yang menampilkan dan menyembunyikan menu dropdown */);
2. Menu tarik-turun 3D
Efek menarik dapat dibuat menggunakan transformasi CSS3, seperti membuat menu muncul dari bawah layar.
3. Menu tarik-turun yang dapat diperluas dengan logo
Dalam contoh ini, bagian atas halaman berisi logo dan navigasi situs. Logo bisa berupa gambar atau teks. Menu tarik-turun secara bertahap meluas dari bawah item daftar teratas menggunakan fungsi transformasi CSS3.
Contoh lain untuk menu drop down. Efek perbesaran saat menu muncul diwujudkan dengan mengurangi size.submenu awal (transform: scale(.8);) , saat hover ukurannya bertambah menjadi.topmenu > li:hover .submenu (transform: scale(1);) .
Menu horizontal dengan animasi mini: mengarahkan kursor ke tautan menu atas akan menampilkan lingkaran kecil yang juga menyertai tampilan menu drop-down.
Tag opsi HTML digunakan untuk membuat daftar drop-down yang memungkinkan pengguna untuk memilih satu opsi dari serangkaian nilai yang telah ditentukan sebelumnya.
Teks yang terlihat oleh pengguna mungkin berbeda dari teks yang ditentukan dalam atribut nilai. Inilah cara Anda dapat membuat daftar dropdown:
Daftar dropdown dibuat menggunakan tag ;
Di dalam tag tentukan opsi untuk memilih menggunakan tag
Di tag
Anda juga dapat menyetel kelas CSS alih-alih menggunakan ID untuk mengatur gaya tarik-turun.
Di bagian selanjutnya, saya akan menunjukkan contoh cara menggunakan daftar tarik-turun HTML di JavaScript/JQuery. Contoh juga akan menunjukkan bagaimana gaya dengan CSS/CSS3 dan Kerangka kerja bootstrap.
Contoh membuat daftar dropdown sederhana
Contoh opsi pilih HTML ini digunakan untuk membuat daftar tarik-turun dengan tiga opsi untuk dipilih:
Pada contoh di atas, markup berikut digunakan untuk membuat daftar dropdown:
Menggunakan atribut nilai
Seperti disebutkan sebelumnya, nilai dari atribut value bisa berbeda dengan teks yang ditampilkan di halaman. Misalnya, Anda dapat menampilkan nama negara atau warna untuk pengguna, dan menggunakan kode pendek di atribut nilai.
Dalam contoh berikut, kami akan membuat daftar tarik-turun dengan atribut nilai:
Lihat demo dan kode online
Untuk Tag kode berikut digunakan:
Contoh mengakses opsi yang dipilih dalam JavaScript
Sekarang mari kita buat contoh mengakses nilai opsi yang dipilih dan melakukan beberapa tindakan. Daftar yang sama seperti pada contoh di atas, kita buat dengan pilihan warna. Setelah dipilih, klik tombol untuk menerapkan warna itu ke dokumen:
Lihat demo dan kode online
Nilai opsi HTML menggunakan kode berikut:
Baris kode berikut digunakan dalam JavaScript untuk mengakses nilai atribut nilai opsi :
var seltheme = document.getElementById(“selcolor”).nilai;
Saat tombol diklik, fungsi JS dipanggil yang memberikan nilai yang dipilih dalam daftar drop-down ke variabel. Nilai ini digunakan untuk menerapkan warna pada dokumen saat ini.
Mengakses teks yang terlihat di jQuery
Kali ini, saya akan menggunakan JQuery untuk mengakses nilai dari opsi yang dipilih: text dan value . Dalam demo ini, saya akan mengakses teks yang terlihat dalam tag opsi di HTML :
Lihat demo dan kode online
Dalam kode untuk setiap opsi di tag nilainya berbeda dengan teks. Setelah Anda memilih warna, jQuery menampilkan teks yang terlihat di peringatan. Kode tag Berikutnya:
Inilah cara nilai ini diakses Opsi pilih HTML dipilih JavaScript:
var warna yang dipilih = $("#jquerypilih opsi: dipilih").text();
Anda juga dapat mengakses nilai menggunakan metode jQuery $.val() :
var warna yang dipilih = $("#jquerypilih").val();
Ganti baris ini pada contoh di atas dan kode tersebut akan menampilkan nilai kode pendek/warna dalam atribut nilai alih-alih teks yang terlihat.
Contoh mendapatkan nilai dalam skrip PHP
Dalam contoh mendapatkan nilai opsi yang dipilih dari daftar drop-down ini, formulir dibuat menggunakan tag di bagian markup. Setelah memilih warna dari daftar drop-down, klik tombol "Kirim". Data formulir akan diteruskan ke file PHP yang sama, setelah itu warna yang dipilih akan ditampilkan:
Lihat demo dan kode online
Metode form yang digunakan pada contoh adalah POST , jadi Anda bisa mendapatkan nilai form menggunakan array $_POST[“”] PHP. Ini adalah kode formulir yang digunakan dalam contoh:
Dan inilah cara script PHP digunakan untuk mendapatkan nilai dari opsi pilih HTML :
".$_POST["selphp"]."";
}
?>
Jika formulir memiliki metode GET, gunakan Susunan PHP $_GET[“”].
Mendefinisikan gaya dropdown dengan CSS
Sekarang mari kita lihat bagaimana menata daftar dropdown. , menggunakan kekuatan CSS . Dalam demo berikut, saya menggunakan beberapa properti CSS sederhana dan properti gradien CSS3:
Lihat demo dan kode online
Properti box-shadow digunakan di sini bersama dengan linear-gradient . Kode CSS lengkap terlihat seperti ini:
Untuk opsi pilih HTML, kita akan menyetel properti border-radius CSS3 untuk membuat sudut membulat. Skema warna juga berubah. Anda dapat bereksperimen dengan batas, lebar, margin, dan properti lain sesuka Anda:
Lihat demo dan kode online
Menggunakan Beberapa Atribut dan Gaya CSS
Untuk mengizinkan pengguna memilih beberapa opsi dari daftar, gunakan beberapa atribut. Pada contoh di atas, hanya satu opsi yang dapat dipilih. Saat menggunakan banyak, Anda dapat memilih beberapa opsi dengan menekan tombol CTRL:
Lihat demo dan kode online
Menggunakan kerangka Bootstrap dan plugin untuk membuat dropdown yang indah
Jika Anda menggunakan kerangka kerja Bootstrap, Anda dapat menggunakan plugin untuk membuat opsi HTML yang keren.