Vertikální CSS menu: dělat to sami

Někteří webmasteři nechtějí trávit čas rozvíjet od začátku jednoduchých prvků, které již existují. Věří, že v ztrácet čas na něco, co už dlouho tam byl žádný bod. Ve skutečnosti, pro ty, kteří jsou právě zvládnutí HTML a CSS, je důležité, aby si spoustu věcí, které mají dobré znalosti o jejich práci. To platí do menu. Vytvoření vertikální CSS menu. Bude založen pouze na HTML a CSS, bez použití JavaScriptu a jQuery. Každé menu je seznam odkazů, které vedou na stránkách webu.

základní kroky

Chcete-li vytvořit jednoduchý vertikální nabídky CSS, je třeba následující kroky:

1. Za prvé, stanovit seznam odkazů (pomocí kódu HTML), jehož nabídka bude. Dát jim název, například, jsou následující:

1. Domů.
2. Naše historie.
3. Průvodce.
4. Služby.
5. Kontakty.

2. Poté Styling vazby, jak budete chtít pomocí CSS.

Píšeme na HTML kód, mějte na my_Vmenu.html soubor a uvidíme, jak to bude vypadat v prohlížeči:

To je základ (kostra) z našeho jídelního lístku. # 1, # 2, atd. by měl být nahrazen odkazem. Podívejte se, jak to vypadá v prohlížeči. Obraz se vám nebude líbit. Nyní musíme začít popsat prvky stylu, aby se kompletní vertikální CSS menu.

Popis styly

Vytvořte soubor my_Vmenu.css, který stanovil všechno, co chcete zlepšit vzhled tak důležitý prvek webu. Zde je kód, jehož zavedení oživí vertikální CSS menu. To a psát nový soubor, a pak budeme mít bližší pohled na význam hlavních tratích, které jsou uvedeny.

Podrobný popis používá stylů

Nyní zvažovat detaily našeho CSS vertikálním menu:

list-style-type vám umožní odstranit seznam značek. Nastavením „0“ na okraj a odsazení odstranit extra výstelkou v seznamu. Jak lze vidět z HTML kódu, naše nabídka je seznam, a styly jsou definovány pomocí CSS.

ul # my_Vmenu - celkový styl celého seznamu.

ul # my_Vmenu li a - styl vazby mezi tagu li.

ul # my_Vmenu li a: hover - popis typu uvažovaného položek menu ve chvíli, kdy jeden vznáší nad lidmi.

ul # my_Vmenu li dlani - textový popis (menu titulu).

Nezapomeňte, že soubory my_Vmenu.css my_Vmenu.html a musí být zachována ve stejném adresáři. Nicméně, oni mohou být umístěny v různých složkách, ale pak je třeba se registrovat my_Vmenu.html cesta souboru my_Vmenu.css. Buďte opatrní, protože nově příchozí tohoto problému často.

Styl musí být připojen mezi značkami hlavy v HTML souboru. menu_1.png a menu_2.png - to je obraz pro položku menu Obraz v normálním stavu a visu.

Je lepší ukládat obrázky do samostatné složky pro obrázky, pojmenovat to my_images, ale pak nastavte CSS kód. Napsat, kde jsou uvedeny tyto obrazy, jsou v tomto adresáři: url (my_images / menu_1.png) a url (my_images / menu_2.png).

Ve zbytku vlastností popsaných v CSS kódu, snadno pochopitelné. Definují vzhled našeho jídelního lístku. Je snadné si všimnout, že šířka a výška bodů určený pro stejné položky v normálním stavu, a když najedete myší nad nimi. Velikost písma 18 pixelů, padding určuje odsazení od různých stranách jménech. Displej umožňuje nastavit zobrazovací jednotku nastavit šířku a polstrování.

Naše vertikální Nabídka

Jak můžete vidět, vertikální CSS menu vytvořit snadno. Na základě údajů o poznání budete moci dělat to krásné a atraktivní pro návštěvníky na vaše webové stránky! Použijte svou fantazii, a pak stylové menu doplní váš web.