Vertikálna ponuka CSS: urobte to sami

Niektorí správcovia webových stránok nechcú strácať čas vytváraním jednoduchých prvkov, ktoré už existujú. Veria, že nemá zmysel strácať čas na to, čo už bolo dlho. V skutočnosti, pre tých, ktorí sa práve učia HTML a CSS, je dôležité, aby ste urobili veľa vecí sami, aby ste dobre pochopili svoju prácu. Toto platí pre menu. Vytvorte vertikálnu ponuku CSS. Bude založená iba na HTML a CSS, bez použitia Javascript a JQuery. Každé menu je zoznam odkazov vedúcich k stránkam stránky.

Základné kroky

Ak chcete vytvoriť nekomplikované vertikálne menu CSS, potrebujete nasledujúci postup krokov:

1. Najprv určite zoznam odkazov (pomocou kódu HTML), z ktorého bude obsahovať. Dajte im napríklad takéto mená:

1. Domov.
2. Naša história.
3. Sprievodca.
4. Služby.
5. Kontakty.

2. Potom budeme stylizovať odkazy podľa vlastného uváženia s CSS.

Napíšeme HTML kód, uložíme ho do my_Vmenu.html a uvidíme, ako to bude vyzerať v prehliadači:

Toto je základ (kostra) nášho menu. # 1, # 2 atď. Musia byť nahradené odkazmi. Pozrite sa, ako to vyzerá v prehliadači. Tento obrázok sa vám nebude páčiť. Teraz musíme začať opisovať štýly prvkov, aby sme vytvorili úplné vertikálne menu CSS.

Popis štýlov

Vytvorte súbor s názvom my_Vmenu.css, v ktorom môžete nastaviť, čo chcete zlepšiť vzhľad takéhoto dôležitého prvku stránky. Nižšie je uvedený kód, ktorého implementácia obnoví vertikálnu ponuku CSS. Napíšte ho do vytvoreného súboru a potom sa pozrieme bližšie na hlavné riadky, ktoré sú tu uvedené.

Podrobný popis použitých štýlov

Teraz zvážte podrobne naše vertikálne menu CSS:

Zoznam typu štýlu umožňuje odstrániť značky zoznamu. Pomocou nastavenia "0" pre okraj a polstrovanie odstráňte extra odsadenie zo zoznamu. Ako vidíte z kódu HTML, naše menu je zoznam a CSS nastavuje štýly.

Ul # my_Vmenu - všeobecný štýl celého zoznamu.

Ul # my_Vmenu li a - štýl spojenia medzi tagmi li.

Ul # my_Vmenu li a: Hover je popis typu položiek v menu v čase, keď jeden z mužov smeruje na kurzor.

Ul # my_Vmenu li a span - popis textu (názvy ponúk).

Nezabudnite, že súbory my_Vmenu.css a my_Vmenu.html musia byť uložené v jednom adresári. Môžu sa však nachádzať v rôznych priečinkoch, ale potom je dôležité priradiť cestu do my_Vmenu.css v súbore my_Vmenu.html. Buďte opatrní, pretože nováčikovia majú často problémy s tým.

Štýl by mal byť prepojený medzi hlavičkami v html súbore. Menu_1.png a menu_2.png sú obrázky na zobrazenie položky ponuky v normálnom stave a pri presúvaní kurzora.

Je lepšie uložiť obrázky do samostatného priečinka pre výkresy, pomenujte ho my_images, ale potom opravte kód CSS. Napíšte, kde sú tieto obrázky označené, že sú v tomto adresári: url (my_images / menu_1.png) a url (my_images / menu_2.png).

Ostatné vlastnosti popísané v kóde CSS sú ľahko zrozumiteľné. Nastavujú vzhľad našej ponuky. Je ľahké zistiť, že šírka a výška bodov je nastavená na rovnaké pre body v normálnom stave a keď ich umiestnite nad nimi. Veľkosť písma je 18 pixlov, výplň určuje odsadenia z rôznych strán názvov položiek. Vlastnosť zobrazenia vám umožňuje nastaviť zobrazenie podľa blokov, aby ste určili šírku a zarážky.

Naša vertikálna ponuka

Ako vidíte, vertikálne menu CSS sa dá ľahko vytvoriť. Na základe poznatkov môžete urobiť to krásne a atraktívne pre návštevníkov svojho online zdroja! Použite svoju predstavivosť a potom štýlové menu zdobí vaše stránky.