Vertikal CSS menyen: gjør det selv

Noen webmasters ønsker ikke å bruke tid på å utvikle fra scratch enkle elementer som allerede finnes. De tror at det er ingen vits i å kaste bort tiden din på noe som lenge har vært der. Faktisk, for de som er bare å mestre HTML og CSS, er det viktig å gjøre deg selv en masse ting å ha en god forståelse av sitt arbeid. Dette gjelder menyen. Lag en vertikal CSS menyer. Det vil bare være basert på HTML og CSS, uten bruk av Javascript og jQuery. Hver meny er en liste over linker som fører til sider på nettstedet.

grunnleggende trinn

Å lage en enkel vertikal meny CSS, må du gjøre følgende:

1. Først bestemme en liste over linker (med kode HTML), hvorav menyen vil bli. Gi dem et navn, for eksempel, er som følger:

1. Home.
2. Vår historie.
3. Guide.
4. Tjenester.
5. Kontakter.

2. Deretter Styling linker som du ønsker ved hjelp av CSS.

Vi skriver HTML-kode, holde my_Vmenu.html fil og se hvordan det vil se ut i nettleseren:

Dette er grunnlaget (skjelettet) i vår meny. # 1, # 2 osv bør erstattes med referanse. Se hvordan det ser ut i en nettleser. Bildet du ikke liker. Nå må vi begynne å beskrive elementer av stil, for å lage en komplett vertikal CSS menyer.

beskrivelse stiler

Lag en fil my_Vmenu.css, som setter alt du ønsker å forbedre utseendet på en så viktig del av nettstedet. Her er koden, innføring av som vil revitalisere de vertikale CSS menyer. Det og skrive den nye filen, og så får vi ta en nærmere titt betydningen av hovedlinjene som er gitt.

DETALJERT BESKRIVELSE anvendes stil

Nå vurdere detaljene i vår CSS vertikale menyen:

list-style-type kan du fjerne listen over markører. Ved å sette "0" til margin og padding fjerne den ekstra polstring i listen. Som det fremgår av HTML-koden, er vår meny en liste, og stilene er definert ved hjelp av CSS.

ul # my_Vmenu - den generelle stilen i hele listen.

ul # my_Vmenu li a - stil koblinger mellom tag li.

ul # my_Vmenu li a: hover - en beskrivelse av type under vurdering av menypunkter i en tid da man svever over folk.

ul # my_Vmenu li et spenn - tekstbeskrivelse (tittelmeny).

Husk at filer my_Vmenu.css my_Vmenu.html og må bevares i samme katalog. Men de kan være plassert i forskjellige mapper, men da er det viktig å registrere seg i my_Vmenu.html filbanen til my_Vmenu.css. Vær forsiktig, fordi nykommere til dette problemet ofte.

Stil må kobles mellom hodet koder i en html-fil. menu_1.png og menu_2.png - dette er bildet for bilde menyvalget i normal tilstand og hover den.

Det er bedre å lagre bildene i en egen mappe for bilder, name it my_images, men deretter Juster CSS-kode. Skriv hvor disse bildene er vist, de er i denne katalogen: url (my_images / menu_1.png) og url (my_images / menu_2.png).

I resten av egenskapene som er beskrevet i CSS-koden, for å forstå enkelt. De definerer utseendet på vår meny. Det er lett å legge merke til at bredden og høyden av elementene som er angitt for de samme elementene i normal tilstand, og når du holder musen over dem. Skriftstørrelse 18px, angir padding innrykk fra ulike sider av stedsnavn. displayet kan du stille inn skjermenheten for å angi bredde og polstring.

Vår vertikale menyen

Som du kan se, til de vertikale CSS menyer skaper lett. På grunnlag av data fra kunnskap vil du være i stand til å gjøre det vakkert og attraktivt for besøkende til ditt nettsted! Bruk fantasien, og deretter en stilig meny for å utfylle ditt nettsted.