Noen webansvarlige ønsker ikke å bruke tid påutvikling fra bunnen av av enkle elementer som allerede eksisterer. De mener at det ikke nytter å kaste bort tiden sin på noe som har vært der lenge. Faktisk, for de som bare lærer HTML og CSS, er det viktig å gjøre mange ting selv for å forstå arbeidet deres godt. Dette gjelder også menyen. La oss lage en vertikal CSS-meny. Det vil kun være basert på HTML og CSS, ingen Javascript eller JQuery. Hver meny er en liste over lenker som fører til sider på nettstedet.
Grunnleggende trinn
For å lage en enkel vertikal CSS-meny, kreves følgende trinn:
1. Definer først en liste over lenker (ved hjelp av HTML-kode) som skal utgjøre menyen. Gi dem navn som dette:
- Hjem.
- Vår historie.
- Ledelse.
- Tjenester.
- Kontakter.
2. Stil deretter koblingene slik du vil med CSS.
La oss skrive HTML-koden, lagre den i my_Vmenu.html-filen og se hvordan den vil se ut i nettleseren:
Dette er grunnlaget (rammeverket) for menyen vår. #1, #2 osv.bør erstattes med lenker. Se hvordan alt ser ut i nettleseren. Du vil ikke like bildet. Nå må vi begynne å beskrive stilene til elementene for å lage en fullverdig CSS vertikal meny.
Beskrivelse av stiler
Lag en fil my_Vmenu.css-fil, der du kan angi hva du vil for å forbedre utseendet til et så viktig element på nettstedet. Nedenfor er koden som vil bringe den vertikale CSS-menyen til live. Skriv det ned i den opprettede filen, og så skal vi se nærmere på hva hovedlinjene som er gitt her betyr.
Detaljert beskrivelse av stilene som brukes
La oss nå se nærmere på vår vertikale CSS-meny:
ul#my_Vmenu - den generelle stilen til hele listen.
ul#my_Vmenu li a - lenkestil mellom li-tagger.
ul#my_Vmenu li a:hover er en beskrivelse av hvordan elementene i den aktuelle menyen ser ut når en person svever over en av dem.
ul#my_Vmenu li a span - tekstbeskrivelse (menytitler).
Husk at filene my_Vmenu.css og my_Vmenu.html skal lagres i samme katalog. De kan imidlertid også ligge i forskjellige mapper, men da er det viktig å skrive stien til my_Vmenu.css i filen my_Vmenu.html. Vær forsiktig, da nybegynnere ofte har problemer med dette.
Stilen må inkluderes mellom head-taggene i html-filen. menu_1.png og menu_2.png er bilder for å vise menyelementet i normal tilstand og ved å holde musepekeren.
Det er bedre å lagre bildene i en egen mappe forbilder, gi det navnet mine_bilder, men juster deretter CSS-koden. Skriv hvor disse bildene er indikert at de er i denne katalogen: url(my_images/menu_1.png) og url(my_images/menu_2.png).
I resten av egenskapene beskrevet i CSS-koden,enkelt å forstå. De definerer utseendet til menyen vår. Det er lett å se at bredden og høyden på elementene er satt likt for elementene i normal tilstand og når du holder musepekeren over dem. Skriftstørrelsen er 18px, utfylling setter utfyllingen på forskjellige sider av elementnavnene. Visningsegenskapen lar deg stille inn blokkvisningen for å stille inn bredden og polstringen.
Vår vertikale meny
Som du kan se, er det enkelt å lage en vertikal CSS-meny.Basert på kunnskapsdatabasen kan du gjøre den vakker og attraktiv for besøkende på Internettressursen din! Bruk fantasien og deretter vil en stilig meny dekorere nettstedet ditt.
