Hur man gör en bio-dropdown-box med CSS

Efter att jag släppte senaste Theme Lab-omformning, Jag hade ett antal kommentarer på rutan “bio dropdown” som jag har uppe i min navigationsfält. Jag kodade det med bara några rader CSS tillsammans med en bakgrundsbild.


I det här CSS-tipsposten ska jag gå igenom hur du kan ha en liknande svävande effekt på dina egna webbplatser.

Exemplet

I det här exemplet använder jag en textwidget i Tjugo elva tema, det nya standardvärdet från WordPress 3.2.

I grund och botten, när du håller muspekaren över div som innehåller widgeten kommer en “dold” div att visas som kommer att vara vår bio-dropdown-ruta.

Observera på bilden till vänster, den grå biorutan visas inte såvida du inte håller musen som innehåller rubriken “Bio Hover”.

Väljaren

Det är inte så viktigt att ha en unik CSS-väljare för att utforma den div du vill placera din bio-dropdown-ruta i. I grund och botten beror detta på att om du inte har den medföljande markeringen i den div, skulle ingenting dyka upp i alla fall i händelse av ett svävande tillstånd.

Även om vi med Twenty Eleven skulle kunna komma undan med att bara styra klassen “åt sidan”, är chansen stor att du bara vill ha en bio-dropdown-ruta på en av dina divisioner ändå, så vi får mer specifik.

Lyckligtvis med WordPress spottar det ut massor av unika CSS-väljare du kan använda. I det här exemplet spottar det ut # test-3 som vi kommer att använda från och med nu.

Notera: Detta kan variera beroende på din WordPress-installation. Använd något som Chrome Developer Tools för att enkelt hitta väljaren.

HTML-markering

I det här exemplet kan HTML-markeringen placeras direkt i WordPress-textwidget. Det här är vad du har lagt i:

Leland!

Hallå. Jag är Leland Fiegel och jag är skaparen och grundaren av Theme Lab. Jag älskar att skriva kod, särskilt HTML, CSS och för WordPress.

Om du inte vill stjäla min identitet kommer du förmodligen att byta ut bilden mot en bild av dig själv. Du kan också eventuellt ta bort den.

Eftersom vi använder en WordPress-widget skapas redan markeringen för överliggande markeringar för oss. Detta är vad det är totalt.

Bio Hover

Leland!

Hallå. Jag är Leland Fiegel och jag är skaparen och grundaren av Theme Lab. Jag älskar att skriva kod, särskilt HTML, CSS och för WordPress.

Om du gör detta på en rå HTML-webbplats behöver du något slags omslag (som den här är till sidan) för bio-dropdown med något annat i det, annars finns det inget att sväva över för att släppa ner.

Exempel på verklighet: Min bio-dropdown-div är i en li-tagg i min navigationsmeny.

Första två linjerna med CSS

De två första linjerna skapade verkligen resten av det, så jag lägger detta i sitt eget avsnitt.

# text-3 {position: relativ; }
.bio-dropdown {display: ingen; }

Förklaring

  • Första linjen: Vi ställer in omslaget för bio-dropdown för att ha relativ positionering. Detta gör det lättare att absolut placera bio-dropdown-rutan närmare det ursprungliga omslaget.
  • Andra linjen: Detta gör i huvudsak bio-dropdown-rutan osynlig som standard. Det är bara tänkt att dyka upp när du svävar över något, kom ihåg?

Notera: Om du inte är en fan av skärmen: ingen; eller tror att det skadar din SEO eller något, kan du också använda något i riktning: absolut; vänster: -100000em; vilket i princip flyttar det så långt bort från sidan, ingen skulle någonsin se det ändå.

Resten av CSS

Följande CSS-kod hanterar utseendet och känslan i den nedrullningsbara rutan för bio.

# text-3: hover .bio-dropdown {
display: block; z-index: 99;
position: absolut; topp: 25px;
bakgrund: #ccc; stoppning: 10px 10px 0 10px;
teckenstorlek: 11px; linjehöjd: 18px; färg: # 666;
}

Förklaring

Det är här vi äntligen använder # text-3-väljaren tillsammans med: sväva pseudoklass för att bio-dropdown-rutan ska dyka upp bara när du håller muspekaren över textwidgeten.

  • Första linjen: Displayen: blockera; gör bio-dropdown-rutan synlig. Z-index: 99; ser till att rutan visas över allt annat utan hinder.
  • Andra linjen: Detta placerar rutan under sidan åt sidan cirka 25 pixlar.
  • Tredje raden: Det här är bara några kosmetiska stilar som ställer in bakgrunden till en ljusgrå med anständig stoppning.
  • Fjärde raden: Allt detta är självförklarande typografi.

Notera: Om den första raden om du använder positionen: absolut; vänster: -100000em; teknik istället för visning: ingen; som jag förklarade ovan, att använda display: block här skulle inte vara nödvändigt (eftersom divs redan antas vara blocknivåelement ändå). Istället måste du använda vänster: 0; för att flytta div tillbaka till sidan.

Och för bilden, bara en enkel flottör och höger marginal.

.bio-dropdown .foto {float: left; marginal-höger: 10px; }

WordPress Integration

Jag kan inte tänka mig ett bra sätt att integrera detta i en dynamisk WordPress-meny (wp_nav_menu) utan att filtrera bort skiten från något. Det enklaste sättet kan vara att hård kod din navigering och komma över den (vilket jag gör på alla mina webbplatser).

Om du har några tekniker för hur du sätter in markering i ett WordPress-menypost, vilket krävs för detta, skulle jag gärna höra om det i kommentarerna. Jag är säker på att det är möjligt men det går utanför räckvidden för detta CSS-tipspost.

Slutsats

Ja, jag inser att du förmodligen inte vill lägga en bio-dropdown i din sidofält, du skulle placera den på en plats med begränsat utrymme som inte har plats för att den ska visas helt (som en trång navigationsfält).

Lyckligtvis kan du använda denna teqhnique nästan var som helst. Jag ville bara gå igenom en grundläggande teknik för hur man visar en hel div på hover.

Det är inte för komplicerat och du behöver inte några snygga Javascript-grejer för att göra det, även om du ville ha någon högteknologisk blekningseffekt, skulle du förmodligen behöva använda något 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