Bjørn Enki professional website design offers custom website design services internationally, with a focus on Los Angeles website design.

Please note: This page is a norwegian translation of the World Wide Web Consortium's page on "CSS tips & triks: a confetti menu". This translation was written by Bjorn Enki, and may contain translation errors. For the original english version, please visit http://www.w3.org/Style/Examples/007/target.

i Vennligst bemerk: Dette er en norsk oversettelse av "CSS tips & triks: meny med tabs" siden av the Word Wide Web Consortium. Denne oversettelsen er skrevet av Bjorn Enki, og inneholder muligens feiloversettinger. For den originale og oppdaterte versjonen (på engelsk), vennligst se http://www.w3.org/Style/Examples/007/target.

Web Stilark
CSS tips & triks

(Denne siden bruker CSS stilark)

:target selektoren

Element med Tabs

Erkjennelse

':target' pseudo-klassen

En URL peker vanligvis til en side. Men når URLen ender på "#etellerannet" blir den målretter mot et bestemt element i siden. Nettlesere prøver vanligvis å at dette elementet er synlig, og om mulig på toppen av skjermen.

Med ':target' selektoren kan du legge til en bestemt stil på target elementet, slik at den får mer oppmerksomhet.

Men du kan også gjøre mer. Du kan gjemme eller vise elementer basert på om det er de som blir 'target' (målrettet) eller ikke. Nedenfor er et eksempel. Det viser en liten meny med fire element og hver element er rettet mot tekst. Men, med det første, viser ikke noe av teksten. Hver element er rettet mot et element med en target ID (#item1, #item2...) og disse element viser bare når om de er målrettet av URLen.

Prøv å trykk på meny elementene og se også på hvordan URLen forandrer seg i nettleseren din.

Dette er elementet som tilsvarer "item1". Den burde ikke være synlig, utenom hvis du følgte en link som målrettet "#item1".

Dersom du trykket på "item 2", burde dette elementet være synlig.

Dette elementet blir synlig dersom du trykker på det tredje menyelementet. Elemententet har sin egen URL, som du kan bruke hvor som helst. Du kan legge din til en annen side og hoppe direkte til dette elementet på denne siden.

Her er hvordan det fungerer. Det er to viktige deler, HTML koden og 'display' (oppvisningen) egenskapen. Først HTML dokumentet. Den har noen linker og element med tilsvarende IDer:

<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- som standard, vises ikke tekst -->
</div>

Disse reglene gjemmer først alle P elementene inni DIV elementet, men deretter blir dette overstyrt om P elementet blir target (målrettet):

div.items p {display: none}
div.items p:target {display: block}

Det er alt som må til. Eksempelet ovenfor tillegger også farger, marginer, kanter, osv., slik at det ser mer ut som en meny. Du kan også se på koden til denne siden for å se hvordan det gjøres.

Vi tilføyet faktisk ':not(:target)', for å forsikre at bare CSS3 nettlesere gjemmer elementet. De bedre reglene er derfor:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

En meny med tabs

Nå du forstår dette er det ikke vanskelig å fikle litt og lage en "ekte" meny: et sett med regler som ikke bare viser forskjellig innhold basert på hvilken knapp som trykkes, men som også endrer stilen til selve knappen.

Her er et eksempel. Den bruker ikke 'display: none', men heller 'z-index'. Om du vil se hvordan det fungerer, bare se på koden…

Tab 1
Det kan kanskje sies at...
Tab 2
... 30 linjer med CSS er en del, og...
Tab 3
... at 2 burde holde, men...
Forhåndsvalg
... det fungerer!

Erkjennelse

Denne siden er basert på ideen til Daniel Glazman. Se forklaringen i hans "blog" fra 9 Januar, 2003 og demoen hans fra 13 Januar.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 6 Feb 2003;
last updated $Date: 2009/04/04 16:23:11 $ GMT