Vertikal CSS-meny: gör det själv

Vissa webbansvariga vill inte slösa bort tid påutveckling från grunden av enkla element som redan finns. De tror att det inte är någon mening att slösa bort tiden på något som länge har varit där. För dem som bara lär sig HTML och CSS är det viktigt att göra många saker själva för att förstå sitt arbete väl. Detta gäller även för menyn. Låt oss skapa en vertikal CSS-meny. Den kommer endast att baseras på HTML och CSS, inget Javascript eller JQuery. Varje meny är en lista med länkar som leder till sidorna på webbplatsen.

Huvudsteg

För att skapa en enkel vertikal CSS-meny krävs följande sekvens av steg:

1. Definiera först listan över länkar (med HTML-kod) som utgör menyn. Ge dem namn så här:

1. Hem.
2. Vår historia.
3. Ledarskap.
4. Tjänster.
5. Kontakter.

2. Formatera sedan länkarna som du vill med CSS.

Låt oss skriva HTML-koden, spara den i my_Vmenu.html-filen och se hur den ser ut i webbläsaren:

Detta är basen (skelettet) på vår meny. # 1, # 2, etc. måste ersättas med länkar. Se hur allt ser ut i en webbläsare. Du gillar inte bilden. Nu måste vi börja beskriva elementens stilar för att skapa en fullfjädrad vertikal CSS-meny.

Beskrivning av stilar

Skapa en fil my_Vmenu.css, där du kan ställa in vad du vill för att förbättra utseendet på en så viktig del av webbplatsen. Nedan är koden, inbäddning som animerar den vertikala CSS-menyn. Skriv ner den till den skapade filen, och sedan kommer vi att titta närmare på vad huvudraderna som anges här betyder.

Detaljerad beskrivning av begagnade stilar

Låt oss nu titta närmare på vår vertikala CSS-meny:

list-style-type låter dig ta bort listmarkörer. Genom att ställa in marginalen och stoppningen till "0" tar du bort den extra stoppningen från listan. Som du kan se från HTML-koden är vår meny en lista och CSS används för att utforma.

ul # my_Vmenu är den allmänna stilen i hela listan.

ul # my_Vmenu li a - länkstil mellan li-taggar.

ul # my_Vmenu li a: svävar är en beskrivning av typen av objekt i menyn i fråga när en person svävar över en av dem.

ul # my_Vmenu li a span - text description (menu names).

Kom ihåg att filerna my_Vmenu.css och my_Vmenu.html måste sparas i en katalog. De kan dock placeras i olika mappar, men då är det viktigt att registrera sökvägen till my_Vmenu.css i my_Vmenu.html-filen. Var försiktig, eftersom nybörjare ofta har problem med detta.

Stilen måste ingå mellan huvudtaggarna i html-filen. menu_1.png och menu_2.png är bilder för att visa ett menyalternativ i normalt tillstånd och för att sväva över.

Spara bättre bilderna i en separat mapp förbilder, namnge det mina bilder, men korrigera sedan CSS-koden. Skriv där dessa bilder anges i katalogen: url (min_bilder / meny_1.png) och url (min_bilder / meny_2.png).

I resten av egenskaperna som beskrivs i CSS-koden,lätt att förstå. De definierar utseendet på vår meny. Det är lätt att se att bredden och höjden på punkterna ställs in samma för punkterna i normalt tillstånd och när du håller musen över dem. Teckensnittsstorleken är 18 pixlar, stoppning ställer in vadderingen på olika sidor av artikeltitlarna. Med displayegenskapen kan du ställa in displayen i block för att ställa in bredd och stoppning.

Vår vertikala meny

Som du kan se är vertikala CSS-menyer enkla att skapa. Baserat på kunskapsbasen kan du göra den vacker och attraktiv för besökare till din Internetresurs! Använd din fantasi, och sedan kommer en snygg meny att dekorera din webbplats.