Niektorí webmasteri nechcú strácať časvývoj od začiatku jednoduchých prvkov, ktoré už existujú. Veria, že nemá zmysel strácať čas na to, čo už bolo dlho. V skutočnosti je pre tých, ktorí sa práve učia HTML a CSS, dôležité urobiť 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ť jednoduché vertikálne menu CSS, potrebujete nasledujúcu postupnosť krokov:
1. Najprv určite zoznam odkazov (pomocou kódu HTML), z ktorého bude obsahovať. Dajte im napríklad takéto mená:
2. Potom budeme stylizovať odkazy podľa požiadaviek 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. Obraz 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 sa pýtate všetko, č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álne menu CSS. Napíšte ho do vytvoreného súboru a potom sa pozrieme bližšie na to, čo sem znamenajú hlavné riadky.
Podrobný popis použitých štýlov
Teraz zvážte podrobne naše vertikálne menu CSS:
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 musí 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é napísať cestu do priečinka my_Vmenu.css v súbore my_Vmenu.html. Buďte opatrní, pretože začiatočníci majú často s tým problémy.
Štýl musí byť pripojený medzi hlavičkami v html súbore. menu_1.png a menu_2.png sú obrázky pre obrázok položky v normálnom stave a pri presunutí kurzorom.
Lepšie uložte obrázky v samostatnom priečinku preobrázky, pomenujte to my_images, ale potom opravte kód CSS. Napíšte, kde sú tieto obrázky uvedené, že sú v tomto adresári: url (my_images / menu_1.png) a url (my_images / menu_2.png).
V ďalších vlastnostiach popísaných v kóde CSS,ľahko zistiť. Nastavujú vzhľad nášho menu. Je ľahké zistiť, že šírka a výška bodov sú nastavené rovnako pre body v normálnom stave a keď ich umiestnite nad nimi. Veľkosť písma je 18 pixlov, výplň nastavuje odrážky z rôznych strán názvov položiek. Vlastnosť zobrazenia vám umožňuje nastaviť zobrazenie v blokoch na nastavenie šírky a zarážok.
Naše vertikálne menu
Ako vidíte, vertikálne ponuky CSS sa dajú ľahko vytvoriť. Na základe získaných poznatkov môžete urobiť to krásne a atraktívne pre návštevníkov vášho online zdroja! Použite svoju predstavivosť a potom štýlové menu zdobí vaše stránky.
</ p>
