Cara Membuat Kotak Dropdown Bio Dengan CSS

Selepas saya melepaskan reka bentuk Makmal Tema terkini, Saya mempunyai sebilangan komen pada kotak “dropdown bio” yang terdapat di bar navigasi saya. Saya mengkodkannya dengan hanya beberapa baris CSS bersama dengan gambar latar.


Dalam siaran tip CSS ini, saya akan mengulas bagaimana anda boleh membawa kesan hover serupa di laman web anda sendiri.

Contohnya

Dalam contoh ini, saya akan menggunakan widget teks di Dua Puluh Sebelas tema, lalai baru seperti WordPress 3.2.

Pada dasarnya, setelah anda mengarahkan kursor ke div yang berisi widget, div “tersembunyi” akan muncul yang akan menjadi kotak dropdown bio kami.

Perhatikan dalam gambar di sebelah kiri, kotak bio kelabu tidak akan muncul kecuali anda mengarahkan kursor yang mengandungi tajuk “Bio Hover”.

Pemilih

Tidak mustahak untuk memiliki pemilih CSS yang unik untuk menggayakan div yang ingin anda masukkan ke dalam kotak dropdown bio anda. Pada dasarnya ini kerana jika anda tidak mempunyai markup yang menyertainya di div tersebut, tidak ada yang akan muncul sekiranya berlaku keadaan berlegar.

Walaupun dalam kasus Twenty Eleven, kita bisa lolos dengan hanya menggayakan kelas “samping”, kemungkinan anda hanya mahukan kotak dropdown bio di salah satu div anda, jadi kami akan lebih spesifik.

Nasib baik dengan WordPress, ia mengeluarkan banyak pemilih CSS unik yang boleh anda gunakan. Dalam contoh ini, ia mengeluarkan # ujian-3 yang akan kita gunakan mulai sekarang.

Nota: Ini mungkin berbeza bergantung pada pemasangan WordPress anda. Gunakan sesuatu seperti Alat Pembangun Chrome untuk mencari pemilih dengan mudah.

Penandaan HTML

Dalam contoh ini, markup HTML boleh diletakkan terus ke widget teks WordPress. Inilah yang anda masukkan:

Tanah Air!

Helo. Saya Leland Fiegel dan saya adalah pencipta dan pengasas Theme Lab. Saya gemar menulis kod, terutamanya HTML, CSS dan untuk WordPress.

Kecuali anda mahu mencuri identiti saya, anda mungkin mahu mengganti foto itu dengan gambar diri anda. Anda juga boleh mengeluarkannya secara pilihan.

Oleh kerana kami menggunakan widget WordPress, markup terpencil sudah dibuat untuk kami. Inilah keseluruhannya.

Bio Hover

Tanah Air!

Helo. Saya Leland Fiegel dan saya adalah pencipta dan pengasas Theme Lab. Saya gemar menulis kod, terutamanya HTML, CSS dan untuk WordPress.

Sekiranya anda melakukan ini di laman HTML mentah, anda memerlukan sejenis pembungkus (seperti ini adalah sisihan) untuk dropdown bio dengan sesuatu yang lain di dalamnya, jika tidak ada apa-apa untuk melayang turun untuk turun.

Contoh kehidupan sebenar: Div dropdown bio saya ada di dalam tag li di menu navigasi saya.

Dua Garis Pertama CSS

Dua baris pertama benar-benar mengatur yang lain, jadi saya meletakkan ini di bahagiannya sendiri.

# teks-3 {kedudukan: relatif; }
.bio-dropdown {paparan: tidak ada; }

Penjelasan

  • Barisan pertama: Kami menetapkan pembungkus dropdown bio untuk mempunyai kedudukan relatif. Ini menjadikannya lebih mudah untuk meletakkan kotak dropdown bio lebih dekat ke pembungkus asal.
  • Baris kedua: Ini pada dasarnya menjadikan kotak dropdown bio tidak dapat dilihat secara lalai. Ia hanya perlu muncul semasa anda mengarahkan kursor ke sesuatu, ingat?

Nota: Sekiranya anda bukan peminat paparan: tidak ada; atau menganggap ia menyakitkan SEO anda atau sesuatu, anda juga boleh menggunakan sesuatu di sepanjang kedudukan: mutlak; kiri: -100000em; yang pada dasarnya akan memindahkannya jauh dari halaman, tidak ada yang akan melihatnya pula.

Selebihnya CSS

Kod CSS berikut menangani rupa dan nuansa kotak dropdown bio.

# text-3: arahkan .bio-dropdown {
paparan: blok; z-indeks: 99;
kedudukan: mutlak; bahagian atas: 25 piksel;
latar belakang: #ccc; padding: 10px 10px 0 10px;
saiz fon: 11px; tinggi garisan: 18 piksel; warna: # 666;
}

Penjelasan

Di sinilah akhirnya kami menggunakan pemilih # teks-3 bersama: hover pseudoclass untuk menjadikan kotak dropdown bio hanya muncul apabila anda mengarahkan pada widget teks.

  • Barisan pertama: Paparan: blok; menjadikan kotak lungsur bio kelihatan. Indeks-z: 99; memastikan bahawa kotak akan dipaparkan di atas semua yang lain, tanpa halangan.
  • Baris kedua: Ini meletakkan kotak di bawah kira-kira 25 piksel.
  • Baris ketiga: Ini hanya beberapa gaya kosmetik, mengatur latar belakang menjadi kelabu muda dengan pelapisan yang baik.
  • Baris keempat: Ini semua tipografi yang jelas.

Nota: Mengenai baris pertama, jika anda menggunakan kedudukan: mutlak; kiri: -100000em; teknik dan bukannya paparan: tidak ada; seperti yang saya jelaskan di atas, menggunakan display: blok di sini tidak akan diperlukan (kerana div sudah dianggap elemen tahap blok pula). Sebaliknya anda perlu menggunakan kiri: 0; untuk memindahkan div kembali ke halaman.

Dan untuk gambar, hanya float sederhana dan margin kanan.

.bio-dropdown .photo {float: kiri; margin-right: 10px; }

Integrasi WordPress

Saya tidak dapat memikirkan cara yang baik untuk mengintegrasikan ini ke dalam menu WordPress yang dinamik (wp_nav_menu) tanpa menyaring omong kosong daripada sesuatu. Kaedah termudah adalah kod keras navigasi anda dan atasi (yang saya lakukan di semua laman web saya).

Sekiranya anda mempunyai teknik bagaimana memasukkan markup ke item menu WordPress, yang diperlukan untuk ini, saya ingin mendengarnya dalam komen. Saya yakin itu mungkin tetapi ia melangkaui ruang lingkup pos tip CSS ini.

Kesimpulannya

Ya, saya sedar anda mungkin tidak mahu meletakkan dropdown bio di bar sisi anda, anda meletakkannya di tempat dengan ruang terhad yang tidak mempunyai ruang untuk paparannya sepenuhnya (seperti bar navigasi sempit).

Nasib baik, anda boleh menggunakan teqhnique ini di mana sahaja. Saya hanya ingin membincangkan teknik asas bagaimana memaparkan keseluruhan div pada hover.

Ia tidak terlalu rumit dan anda tidak memerlukan barang Javascript mewah untuk melakukannya, walaupun jika anda mahukan kesan pudar berteknologi tinggi, anda mungkin perlu menggunakan beberapa Javascript.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map