Hvordan lage en bio-dropdown-boks med CSS

Etter at jeg slapp siste redesign av Theme Lab, Jeg hadde en rekke kommentarer til “bio dropdown” -boksen jeg har oppe i navigasjonslinjen. Jeg kodet det med bare noen få linjer med CSS sammen med et bakgrunnsbilde.


I dette CSS-tipsinnlegget skal jeg gå nærmere inn på hvordan du kan ha en lignende sveveeffekt på dine egne nettsteder.

Eksempelet

I dette eksemplet bruker jeg en tekstwidget i Twenty Eleven tema, den nye standard fra WordPress 3.2.

I utgangspunktet, når du holder musepekeren over div som inneholder widgeten, vises en “skjult” div som vil være bio-nedtrekksboksen.

Merk på bildet til venstre, den grå bioboksen vil ikke vises med mindre du holder musepekeren som inneholder overskriften “Bio Hover”..

Velgeren

Det er ikke så viktig å ha en unik CSS-velger for å style div-en du vil legge bio-nedtrekksboksen i. I utgangspunktet skyldes dette at hvis du ikke har den tilhørende markeringen i den div, vil ingenting dukke opp uansett i tilfelle en svevetilstand.

Selv om vi i tilfelle av Twenty Eleven, kunne slippe unna med bare å style “side” -klassen, er sjansen stor for at du bare vil ha en bio-dropdown-boks på en av divene dine uansett, så vi får mer spesifikk.

Heldigvis med WordPress, spruter den ut massevis av unike CSS-velgere du kan bruke. I dette eksemplet spytter det # test-3 som vi vil bruke fra nå av.

Merk: Dette kan variere avhengig av WordPress-installasjonen. Bruk noe som Chrome Developer Tools for å enkelt finne velgeren.

HTML-merking

I dette eksemplet kan HTML-markeringen plasseres direkte i WordPress tekstwidget. Dette er hva du ville lagt inn:

Leland!

Hallo. Jeg er Leland Fiegel og er skaper og grunnlegger av Theme Lab. Jeg elsker å skrive kode, spesielt HTML, CSS og for WordPress.

Med mindre du vil stjele identiteten min, vil du sannsynligvis ønske å bytte ut bildet med et bilde av deg selv. Du kan også fjerne den eventuelt.

Siden vi bruker en WordPress-widget, er markeringen for ytre markeringer allerede generert for oss. Dette er hva det er totalt.

Bio Hover

Leland!

Hallo. Jeg er Leland Fiegel og er skaper og grunnlegger av Theme Lab. Jeg elsker å skrive kode, spesielt HTML, CSS og for WordPress.

Hvis du gjør dette på et rått HTML-nettsted, trenger du en slags innpakning (som om denne er til side) for nedtrekksområdet med noe annet i seg, ellers er det ingenting å sveve over for å slippe ned.

Virkelighetseksempel: Min bio-dropdown div er inne i en li-tag i navigasjonsmenyen.

De første to linjene med CSS

De to første linjene satte virkelig opp resten av det, så jeg la dette i sin egen seksjon.

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

Forklaring

  • Første linje: Vi setter innpakningen til bio-dropdownen til å ha relativ posisjonering. Dette gjør det lettere å absolutt plassere bio-dropdown-boksen nærmere den originale innpakningen.
  • Andre linje: Dette gjør i utgangspunktet bio-nedtrekksboksen usynlig som standard. Den skal bare dukke opp når du svever over noe, husk?

Merk: Hvis du ikke er en fan av skjermen: ingen; eller tror det gjør vondt i SEO eller noe, kan du også bruke noe på linje med stillingen: absolutt; venstre: -100000em; som i utgangspunktet vil flytte den så langt fra siden, ville ingen se den uansett.

Resten av CSS

Følgende CSS-kode håndterer utseendet og følelsen av nedtrekksboksen for bio.

# text-3: hover .bio-dropdown {
skjerm: blokkering; z-indeks: 99;
stilling: absolutt; topp: 25px;
bakgrunn: #ccc; polstring: 10px 10px 0 10px;
skriftstørrelse: 11px; linjehøyde: 18px; farge: # 666;
}

Forklaring

Det er her vi endelig bruker # text-3-velgeren sammen med: svevet pseudoklass for å gjøre at nedtrekksboksen for bio vises bare når du holder musepekeren over tekstwidget.

  • Første linje: Displayet: blokkering; synliggjør nedtrekksboksen for bio. Z-indeksen: 99; sørger for at boksen vises over alt annet uhindret.
  • Andre linje: Dette plasserer ruta under de cirka 25 pikslene til side.
  • Tredje linje: Dette er bare noen kosmetiske stiler, og setter bakgrunnen til en lys grå med anstendig polstring.
  • Fjerde linje: Alt dette er selvforklarende typografi.

Merk: Om den første linjen, hvis du bruker stillingen: absolutt; venstre: -100000em; teknikk i stedet for visning: ingen; som jeg forklarte ovenfor, ville det ikke være nødvendig å bruke display: blokkering her (siden divs allerede antas å være blokknivåelementer uansett). I stedet må du bruke venstre: 0; for å flytte div’en tilbake på siden.

Og for bildet, bare en enkel flottør og høyre margin.

.bio-dropdown .foto {flyte: venstre; margin-høyre: 10px; }

WordPress Integrasjon

Jeg kan ikke tenke på en god måte å integrere dette i en dynamisk WordPress-meny (wp_nav_menu) uten å filtrere drittene ut av noe. Den enkleste måten kan være hardkode navigasjonen og kom deg over den (som jeg gjør på alle nettstedene mine).

Hvis du har noen teknikker for hvordan du setter inn markering i et WordPress-menyelement, som kreves for dette, vil jeg gjerne høre om det i kommentarene. Jeg er sikker på at det er mulig, men det går utover omfanget av dette CSS-tipsinnlegget.

Konklusjon

Ja, jeg er klar over at du sannsynligvis ikke vil ønske å legge en bio-nedtrekksordning i sidefeltet, du ville plassert den på et sted med begrenset plass som ikke har plass til at den skal vises fullt ut (som en trang navigasjonslinje).

Heldigvis kan du bruke denne teqhnique omtrent hvor som helst. Jeg ville bare gå over en grunnleggende teknikk for hvordan du kan vise en hel div på svevet.

Det er ikke for komplisert, og du trenger ikke noen fancy Javascript-ting for å gjøre det, selv om du ville ha en viss høyteknologisk falmende effekt, vil du sannsynligvis måtte bruke noen 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