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

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 , yang mengatur ketinggian daftar. Lebar daftar ditentukan oleh teks terluas yang ditentukan dalam tag

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 , yang mengatur tinggi daftar, lebar daftar ditentukan secara otomatis berdasarkan panjang teks di dalamnya

Atribut Tag , yang dengannya Anda dapat mengubah tampilan daftar.

beberapa

Kehadiran banyak memberi tahu browser untuk merender konten elemen

nama

Menentukan nama elemen yang unik 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

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. . Ini adalah wadah dengan tag di dalamnya. adalah bahwa itu tidak disorot seperti item daftar biasa, itu ditekankan dengan gaya tebal, dan semua elemen yang termasuk dalam penampung ini digeser ke kanan dari posisi aslinya. Atribut label digunakan untuk menambahkan judul grup, seperti yang ditunjukkan pada contoh 3.

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.

      * ( box-sizing: border-box; ) body ( margin: 0; background: radial-gradient(#BFD6E2 1px, rgba(255,255,255,0) 2px); background-size: 10px 10px; ) nav ul ( list-style : tidak ada; margin: 0; padding: 0; ) nav a ( display: block; text-decoration: none; outline: none; transition: .4s ease-in-out; ) .topmenu ( backface-visibility: hidden; background : rgba(255,255,255,.8); ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a ( font-family: "Exo 2", sans-serif; height: 70px; line-height: 70px; padding: 0 30px; font-weight: bold; color: #003559; text-transform: uppercase; ) .down:after ( content: "\f107"; margin-left: 8px; font-family : FontAwesome; ) .topmenu li a:hover ( color: #E6855F; ) .submenu ( background: white; border: 2px solid #003559; position: absolute; left: 0; visibility: hidden; opacity: 0; z-index : 5; lebar: 150px; transform: perspektif(600px) rotateX(-90deg); transform-origin: 0% 0%; transisi: .6s kemudahan masuk;) .topm enu > li:hover .submenu( visibilitas: terlihat; opasitas: 1 transform: perspektif(600px) rotateX(0deg); ) .submenu li a ( color: #7f7f7f; font-size: 13px; line-height: 36px; padding: 0 25px; font-family: "Kurale", serif; )

      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.

      Logo
      * ( box-sizing: border-box; ) body ( margin: 0; background: #f2f2f2; ) header ( background: white; text-align: center; ) header a ( text-decoration: none; outline: none; display : blok; transisi: .3s ease-in-out; ) .logo ( color: #D5B45B; font-family: "Playfair Display", serif; font-size: 2.5em; padding: 20px 0; ) nav ( display: table; margin: 0 auto; ) nav ul ( list-style: none; margin: 0; padding: 0; ) .topmenu:after ( content: ""; display: table; clear: both; ) .topmenu > li ( topmenu > li > a ( text-transform: huruf besar; font-size: 14px; font-weight: bold; color: #404040; padding: 15px 30px; ) .topmenu li a:hover ( color: #D5B45B; ) .submenu -link:after ( content: "\f107"; font-family: "FontAwesome"; color: inherit; margin-left: 10px; ) .submenu ( background: #273037; position: absolute; left: 0; top: 100 %; indeks-z: 5; lebar: 180px; opasitas: 0; transformasi: skalaY(0); asal transformasi: 0 0; transisi: .5s ease-in-out; ) .submenu a ( warna: putih; perataan teks: kiri; padding: 12px 15px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.1); ) .submenu li:last-child a ( border-bottom: none; ) .topmenu > li:hover .submenu ( opacity: 1; transform: scaleY(1); )

      4. Meningkatkan Menu Dropdown

      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);) .

      * ( ukuran kotak: border-box; ) badan ( margin: 0; latar belakang: url(https://html5book.ru/wp-content/uploads/2015/10/background54.png) ) nav ( latar belakang: putih; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( text-decoration: none; outline: none; display: block; transition: .4s ease-in-out; ) .topmenu ( text-align: center; padding: 10px 0; ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li:after ( content: ""; position: absolute; right: 0; width: 1px; tinggi: 12px; latar belakang: #d2d2d2; atas: 16px; bayangan kotak: 4px -2px 0 #d2d2d2; transformasi: putar(30deg); ) .topmenu > li:anak terakhir:setelah ( latar belakang: tidak ada; kotak -shadow: none; ) .topmenu > li > a ( padding: 12px 26px; color: #767676; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; font-family: "Exo 2", sans-serif; ) .topmenu li a:hover ( color: #c0a97a; ) .submenu ( position: absolute; left: 50%; top: 100%; width: 210px; margin-left: -105px; backgrou td: #fafafa; perbatasan: 1px solid #ededed; indeks-z: 5; visibilitas: tersembunyi; opasitas: 0 transform:scale(.8); transisi: .4s ease-in-out; ) .submenu li a ( padding: 10px 0; margin: 0 10px; border-bottom: 1px solid #efefef; ukuran font: 12px; warna: #484848; font-family: "Kurale", serif;) .topmenu > li:hover .submenu ( visibility: visible; opacity: 1; transform: scale(1); )

      5. Menu tarik-turun

      Menu horizontal dengan animasi mini: mengarahkan kursor ke tautan menu atas akan menampilkan lingkaran kecil yang juga menyertai tampilan menu drop-down.

      @import url("https://fonts.googleapis.com/css?.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; height: 100vh; position: relative; ) body:before ( konten: ""; posisi: absolut; kiri: 0; bawah: 0; tinggi: 100%; lebar: 100%; latar belakang: gradien linier(45deg, rgba(0,0,0,0) , rgba(255,255,255,.8)); ) nav ( text-align: center; padding: 40px 0 0; ) nav ul ( list-style: none; margin: 0; padding: 0; ) nav a ( dekorasi teks : tidak ada; display: block; color: #222; ) .topmenu > li ( display: inline-block; position: relative; ) .topmenu > li > a ( position: relative; padding: 10px 15px; font-family: " Kaushan Script", kursif; font-size: 1.5em; line-height: 1; letter-spacing: 3px; ) .topmenu > li > a:before ( content: ""; position: absolute; z-index: 5; kiri: 50%; atas: 100%; lebar: 10px; tinggi: 10px; latar belakang: putih; radius batas: 50%; transformasi: terjemahkan(-50%, 20px); opacity: 0; transisi: .3s; ) .topmen u li:hover a:before ( transform: translate(-50%, 0); opasitas: 1 ) .submenu ( posisi: absolut; indeks-z: 4; kiri: 50%; atas: 100%; lebar: 150px; padding: 15px 0 15px; margin-atas: 5px; latar belakang: putih; radius batas: 5px; box-shadow: 0 0 30px rgba(0,0,0,.2); ukuran kotak: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 20px); transisi: .3s ; ) .topmenu > li:hover .submenu ( visibility: visible; opacity: 1; transform: translate(-50%, 0); ) .submenu a ( font-family: "Libre Baskerville", serif; font-size: 11px; jarak huruf: 1px; padding: 5px 10px; transisi: .3s linier; ) .submenu a:arahkan kursor (latar belakang: #e8e8e8;)

      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 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

      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

      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 nilainya berbeda dengan teks. Setelah Anda memilih warna, jQuery menampilkan teks yang terlihat di peringatan. Kode tag

      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

  • 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.

    Berlangganan

    Entri populer



    Catatan terakhir