Hvordan lage en Side Tab i CSS

October 9

En fane på siden av en webside er ofte ledsaget av et skript som kjøres når brukeren klikker på det som en uttrekkbar skjema for å logge inn eller deling på et sosialt nettverk. Før du kan gjøre det, men du må lage selve fanen. Med "transformere" eiendom i CSS level 3 (CSS3) kan du skape en fin fane ut av en link og roter det sidelengs. Selv om dette er CSS3 kode det er enda en Explorer filter Internett som fungerer på versjoner seks til åtte.

Bruksanvisning

1 Åpne websiden i et redigeringsprogram - Notepad fungerer - og legge til en ny div like etter åpningen "<body>" tag:

Gi div ID-navn, for eksempel "tab" og plassere tekst for fanen inne i "<div>" koder. Gjør teksten klikkbare ved å plassere den i et par av ankerkoder. Bytt hash symbol i eksempelet med en URL hvis du trenger den så den peker til en annen webside.

2 Style fane i CSS gir det en bakgrunnsfarge, tekststil og grenser som passer sidens utforming:

Kategorien et {

background-color: lyseblå;
Farge: mørkblå;
border: 2px solid mørkeblå;
font-family: Arial, sans-serif;
font-weight: bold;
padding: 20px;
}

Denne stilen regelen gjelder stiler til ankerkoder, slik som å holde hele kategorien klikkbare. Hvis du har lagt polstring for å bare fanen div selv, mindre av kategoriens området ville være klikkbare.

3 Curve de to øverste hjørnene av fanen, hvis du vil, ved hjelp av "border-radius" eiendom:

border-top-venstre-radius: 20px;
border-top-høyre-radius: 20px;

Disse to linjer med kode, da lagt til "#tab en" stil regel vil gjøre toppen av fanen avrundet.

4 Roter fanen slik at det blir sidelengs:

transform: rotere (-90deg);
-webkit-transform: rotate (-90deg);
-moz-transform: rotere (-90deg);
-o-transform: rotate (-90deg);
-MS-transform: rotere (-90deg);
filter: progid: DXImageTransform.Microsoft.BasicImage (rotasjon = 3);

Den første linjen er vist ovenfor er standard CSS3 fremgangsmåte for å rotere et HTML-element. Per september 2011 De fleste nettlesere må prefiks kode. Prefiksene hver spesifisere en nettleser med unntak for "-webkit" hvilke effekter både Chrome og Safari. Tidligere versjoner av Internet Explorer bruker filteret, vises sist. Alt dette koden må gå inn på "#tab en" regel.

5 Plasser fanen lengst til venstre side av nettleseren skjermen og gjør det pinne på ett sted når brukeren ruller nedover siden:

stilling: fast;
venstre: 0;
top: 50%;
margin-top: -100px;

Selv om du ikke trenger å sette en posisjon fra toppen av skjermen, vil gjøre det la deg bestemme den vertikale posisjonen kategorien. Hvis du ga kategorien en bestemt bredde, så kutt som bredde i to og gjøre det nummeret negativt å komme opp med en verdi for "margin-top." Stille denne negative marginen med 50 prosent "topp" posisjon vil vertikalt sentrere kategorien på skjermen.