Lodret CSS menu: at gøre det selv

Nogle webmastere ønsker ikke at bruge tid på at udvikle fra bunden simple elementer, der allerede eksisterer. De mener, at der er ingen mening i at spilde din tid på noget, der længe har været der. I virkeligheden, for dem, der lige mastering HTML og CSS, er det vigtigt at gøre dig selv en masse ting at have en god forståelse af deres arbejde. Dette gælder for menuen. Opret en lodret CSS menuer. Det vil kun være baseret på HTML og CSS, uden brug af Javascript og jQuery. Hver menu er en liste over links, der fører til sider på webstedet.

grundlæggende trin

For at oprette en simpel lodret menu CSS, skal du bruge følgende trin:

1. Bestem først en liste over links (ved hjælp af kode HTML), hvoraf menuen vil være. Giv dem et navn, for eksempel, er som følger:

1. Home.
2. Vores historie.
3. Guide.
4. Tjenester.
5. Kontakter.

2. Så Styling links, som du ønsker med hjælp af CSS.

Vi skriver den HTML-kode, holde my_Vmenu.html fil og se, hvordan det vil se ud i browseren:

Dette er grundlaget (skelet) af vores menu. # 1, # 2, etc. bør erstattes som reference. Se, hvordan det ser ud i en browser. Det billede, du vil ikke lide. Nu må vi begynde at beskrive de elementer af stil, for at gøre en komplet lodret CSS menuer.

beskrivelse stilarter

Opret en fil my_Vmenu.css, der satte alt, hvad du ønsker at forbedre udseendet af en så vigtig del af sitet. Her er koden, indførelse af, som vil genoplive de lodrette CSS menuer. Det og skrive den nye fil, og så vil vi tage et nærmere kig betydningen af hovedlinjerne, der er givet.

Detaljeret beskrivelse anvendes stilark

Overvej nu detaljerne i vores CSS lodret menu:

liste-stil-typen giver dig mulighed for at fjerne listen over markører. Ved at sætte "0" til den margen og polstring fjerne den ekstra polstring på listen. Som det kan ses af HTML-koden, vores menu er en liste, og de stilarter er defineret ved hjælp af CSS.

ul # my_Vmenu - den overordnede stil af hele listen.

ul # my_Vmenu li a - stil forbindelser mellem tag li.

ul # my_Vmenu li a: hover - en beskrivelse af typen under overvejelse af menupunkter på et tidspunkt, hvor man svæver over mennesker.

ul # my_Vmenu li en spændvidde - tekstbeskrivelse (titelmenu).

Husk, at filer my_Vmenu.css my_Vmenu.html og skal bevares i samme mappe. De kan dog være placeret i forskellige mapper, men så er det vigtigt at registrere i my_Vmenu.html fil sti til my_Vmenu.css. Vær forsigtig, fordi de nyankomne på dette problem ofte.

Stil skal tilsluttes mellem hovedet tags i en html-fil. menu_1.png og menu_2.png - det er det billede til billede menupunkt i normal tilstand og svæve.

Det er bedre at gemme billederne i en separat mappe til billeder, name it my_images, men derefter Juster CSS kode. Skriv hvor disse billeder er vist, at de er i denne mappe: url (my_images / menu_1.png) og url (my_images / menu_2.png).

I resten af de egenskaber, der er beskrevet i den CSS kode, for at forstå nemt. De definerer udseendet af vores menu. Det er let at lægge mærke til, at bredden og højden af emner specificeret for de samme poster i den normale tilstand, og når du holder musen over dem. Skriftstørrelse 18px, polstring angiver indrykningen fra forskellige sider af stednavne. skærm kan du indstille displayenheden at indstille bredden og polstring.

Vores lodret menu

Som du kan se, at de lodrette CSS menuer skabe let. På grundlag af data fra viden vil du være i stand til at gøre det smukt og attraktivt for besøgende på dit websted! Brug din fantasi, og derefter en elegant menu til at supplere dit websted.