Paano Gumawa ng Isang Bio Dropdown Box Sa CSS

Matapos kong mailabas ang pinakabagong disenyo ng Tema Lab, Nagkaroon ako ng maraming mga puna sa kahon ng “bio dropdown” na mayroon ako sa aking navigation bar. Nai-cod ko ito ng ilang linya ng CSS kasama ang isang background na imahe.


Sa post na tip ng CSS na ito, pupunta ako kung paano ka magkakaroon ng katulad na hover effect sa iyong sariling mga site.

Ang halimbawa

Sa halimbawang ito, gumagamit ako ng isang widget ng teksto sa Dalawampung Eleven tema, ang bagong default bilang WordPress 3.2.

Karaniwan, sa sandaling mag-hover ka sa div na naglalaman ng widget, isang “nakatagong” div ang lilitaw na magiging aming bio dropdown box.

Tandaan sa larawan sa kaliwa, ang kulay-abo na kahon ng bio ay hindi lilitaw maliban kung ilalagay mo ang div na naglalaman ng “Bio Hover” heading.

Ang Pinili

Hindi mahalaga na magkaroon ng isang natatanging tagapili ng CSS upang i-istilo ang div na nais mong ilagay ang iyong bio dropdown box. Talaga ito ay dahil kung wala kang kasamang markup sa div na iyon, wala ring magpapakita sa kaganapan ng isang estado ng hover.

Bagaman sa kaso ng Dalawampung Eleven, maaari kaming makalayo sa pag-istilo ng klase ng “tabi”, ang mga pagkakataon ay gusto mo lamang ng isang bio dropdown box sa isa sa iyong mga div, gayon pa man makakakuha kami ng mas tiyak.

Sa kabutihang-palad sa WordPress, ito spits out ng isang tonelada ng mga natatanging CSS selectors na maaari mong gamitin. Sa halimbawang ito, inilalabas nito ang # test-3 na gagamitin namin mula ngayon.

Tandaan: Maaaring mag-iba ito depende sa iyong pag-install ng WordPress. Gumamit ng isang bagay tulad ng Chrome Tool ng Tool upang madaling makahanap ng pumipili.

HTML Markup

Sa halimbawang ito, ang HTML markup ay maaaring mailagay nang direkta sa widget ng teksto ng WordPress. Ito ang iyong inilagay:

Leland!

Kamusta. Ako si Leland Fiegel at ako ang tagalikha at tagapagtatag ng Tema Lab. Gustung-gusto kong magsulat ng code, lalo na ang HTML, CSS at para sa WordPress.

Maliban kung nais mong nakawin ang aking pagkakakilanlan, marahil ay nais mong palitan ang larawan ng iyong larawan. Maaari mo ring opsyonal na alisin ito.

Dahil gumagamit kami ng isang WordPress widget, ang outlying markup ay nabuo na para sa amin. Ito ang nasa kabuuan.

Bio Hover

Leland!

Kamusta. Ako si Leland Fiegel at ako ang tagalikha at tagapagtatag ng Tema Lab. Gustung-gusto kong magsulat ng code, lalo na ang HTML, CSS at para sa WordPress.

Kung ginagawa mo ito sa isang hilaw na site ng HTML, kakailanganin mo ang isang uri ng pambalot (tulad nito ay ang bukod) para sa pagbagsak ng bio na may iba pa, kung hindi, walang maghahangad upang i-drop down.

Halimbawa ng totoong buhay: Ang aking bio dropdown div ay nasa loob ng isang li tag sa aking menu ng nabigasyon.

Unang Dalawang Linya ng CSS

Ang unang dalawang linya ay talagang nag-set up ng natitirang bahagi nito, kaya inilalagay ko ito sa sarili nitong seksyon.

# text-3 {posisyon: kamag-anak; }
.bio-dropdown {display: wala; }

Pagpapaliwanag

  • Unang linya: Itinakda namin ang wrapper ng bio dropdown upang magkaroon ng kamag-anak na pagpoposisyon. Mas madali itong ganap na iposisyon ang bio dropdown box na mas malapit sa orihinal na pambalot.
  • Pangalawang linya: Ito ay mahalagang gumagawa ng bio dropdown box na hindi nakikita nang default. Dapat lang na magpakita kapag lumusot ka sa isang bagay, tandaan?

Tandaan: Kung hindi ka tagahanga ng pagpapakita: wala; o isipin na nasasaktan ang iyong SEO o isang bagay, maaari mo ring gamitin ang isang bagay sa mga linya ng posisyon: ganap; kaliwa: -100000em; na kung saan ay talaga ilipat ito sa malayo sa pahina, kahit sino ay hindi kailanman makita ito pa rin.

Ang Pahinga ng CSS

Ang sumusunod na CSS code ay humahawak sa hitsura at pakiramdam ng bio dropdown box.

# text-3: hover .bio-pagbagsak {
display: block; z-index: 99;
posisyon: ganap; tuktok: 25px;
background: #ccc; padding: 10px 10px 0 10px;
laki ng font: 11px; taas ng linya: 18px; kulay: # 666;
}

Pagpapaliwanag

Narito kung saan sa wakas ay ginagamit namin ang # text-3 tagapili kasama ang: hover pseudoclass upang magawa lamang ang bio dropdown box na lumitaw lamang kapag nag-hover ka sa widget ng teksto.

  • Unang linya: Ang display: block; ginagawang nakikita ang bio dropdown box. Ang z-index: 99; tinitiyak na ang kahon ay ipapakita sa lahat ng iba pa, hindi nababagabag.
  • Pangalawang linya: Ang posisyon na ito ay ang kahon sa ibaba sa tabi ng tungkol sa 25 mga piksel.
  • Pangatlong linya: Ito ay ilan lamang sa mga estilo ng kosmetiko, na itinatakda ang background sa isang light grey na may disenteng padding.
  • Pang-apat na linya: Ito ang lahat ng pagpapaliwanag sa sarili.

Tandaan: Tungkol sa unang linya, kung gumagamit ka ng posisyon: ganap; kaliwa: -100000em; diskarte sa halip na ipakita: wala; tulad ng ipinaliwanag ko sa itaas, gamit ang display: block dito ay hindi kinakailangan (dahil ang mga div ay ipinapalagay na mga elemento ng antas ng bloke). Sa halip ay kailangan mong gumamit ng kaliwa: 0; upang ilipat ang div pabalik sa pahina.

At para sa imahe, isang simpleng float at tamang margin lamang.

.bio-dropdown .pag-i {float: kaliwa; margin-kanan: 10px; }

Pagsasama ng WordPress

Hindi ako makapag-isip ng isang mahusay na paraan upang maisama ito sa isang dynamic na menu ng WordPress (wp_nav_menu) nang walang pag-filter ng crap ng isang bagay. Ang pinakamadaling paraan ay maaaring hard code ang iyong pag-navigate at makuha ito (na ginagawa ko sa lahat ng aking mga site).

Kung mayroon kang anumang mga diskarte sa kung paano ipasok ang markup sa isang item sa menu ng WordPress, na kinakailangan para dito, gusto kong marinig ang tungkol sa mga komento. Sigurado ako na posible ngunit lumalampas ito sa saklaw ng post na ito ng tip sa CSS.

Konklusyon

Oo, napagtanto kong malamang na ayaw mong maglagay ng bio dropdown sa iyong sidebar, inilagay mo ito sa isang lugar na may limitadong puwang na walang silid para maipakita nang ganap (tulad ng isang cramped nabigasyon bar).

Sa kabutihang palad, maaari mong gamitin ang teqhnique na ito tungkol sa kahit saan. Nais ko lamang na puntahan ang isang pangunahing pamamaraan sa kung paano ipakita ang isang buong div sa hover.

Hindi ito masyadong kumplikado at hindi mo na kailangan ng magarbong bagay na Javascript na gawin ito, kahit na nais mo ang ilang high-tech na pagkupas na epekto, marahil ay kailangan mong gumamit ng ilang 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