Vertikal CSS menyn: gör det själv

Vissa webbansvariga inte vill spendera tid utvecklas från scratch enkla element som redan finns. De tror att det är ingen idé att slösa bort din tid på något som länge har varit där. I själva verket, för dem som bara behärska HTML och CSS, är det viktigt att göra sig en massa saker för att ha en god förståelse för deras arbete. Detta gäller till menyn. Skapa en vertikal CSS-menyer. Det kommer att baseras enbart på HTML och CSS, utan användning av Javascript och jQuery. Varje meny är en lista med länkar som leder till sidor på webbplatsen.

grundläggande steg

För att skapa en enkel vertikal meny CSS, behöver du följande steg:

1. Först bestämma en lista med länkar (med kod HTML), varav menyn kommer att vara. Ge dem ett namn, till exempel, är följande:

1. Home.
2. Vår historia.
3. Guide.
4. Tjänster.
5. Kontakter.

2. Sedan Styling länkar som du vill med hjälp av CSS.

Vi skriver HTML-kod, hålla my_Vmenu.html fil och se hur det kommer att se ut i webbläsaren:

Detta är grunden (skelett) på vår meny. # 1, # 2, etc. bör ersättas genom hänvisning. Se hur det ser ut i en webbläsare. Bilden kommer inte gillar. Nu måste vi börja att beskriva delar av stil, att göra en fullständig vertikal CSS-menyer.

Beskrivning stilar

Skapa en fil my_Vmenu.css, som sätter allt du vill förbättra utseendet på en så viktig del av webbplatsen. Här är koden, vars införande kommer att vitalisera den vertikala CSS-menyer. Det och skriver den nya filen och sedan vi tar en närmare titt innebörden av huvudlinjerna som ges.

DETALJERAD BESKRIVNING används format

Nu anser detaljerna i vår CSS vertikal meny:

list-style-type kan du ta bort listan över markörer. Genom att ställa in "0" till marginalen och stoppning bort extra stoppning i listan. Som kan ses från HTML-koden, är vår meny en lista, och stilar är definierade med hjälp av CSS.

ul # my_Vmenu - den övergripande stilen på hela listan.

ul # my_Vmenu li a - stil länkar mellan taggen li.

ul # my_Vmenu li a: hover - En beskrivning av den typ som behandlas av menyalternativ i en tid då en svävar över människor.

ul # my_Vmenu li en spännvidd - textbeskrivning (titelmeny).

Kom ihåg att filer my_Vmenu.css my_Vmenu.html och måste bevaras i samma katalog. De kan dock vara placerade i olika mappar, men då är det viktigt att registrera sig i my_Vmenu.html sökvägen till my_Vmenu.css. Var försiktig, eftersom nykomlingar på detta problem ofta.

Style måste anslutas mellan huvudet taggar i en html-fil. menu_1.png och menu_2.png - det är bilden för bilden menyalternativ i det normala tillståndet och sväva.

Det är bättre att spara bilderna i en separat mapp för bilder, name it my_images, men sedan Justera CSS-koden. Skriv där dessa bilder visas, de är i den här katalogen: url (my_images / menu_1.png) och url (my_images / menu_2.png).

I resten av fastigheterna som beskrivs i CSS-kod, lätt att förstå. De definierar utseendet på vår meny. Det är lätt att lägga märke till att bredden och höjden på objekt som anges för samma objekt i det normala tillståndet, och när du håller musen över dem. Teckenstorlek 18px anger utfyllnad indraget från olika sidor av ortnamn. display kan du ställa in displayenheten för att ställa in bredd och stoppning.

Our vertikala menyn

Som ni kan se, att de vertikala CSS-menyer skapar lätt. På grundval av uppgifter från kunskap du kommer att kunna göra det vackert och attraktivt för besökare till din webbplats! Använd din fantasi, och sedan en elegant meny för att göra din webbplats.