Počítače, Software
Jak vydělat rozevíracího CSS menu
Dnes se budeme zabývat otázkou „Jak mohu vytvořit drop-down menu CSS?“. Je třeba říci hned, že tato položka bude bez připojování jakýchkoli dodatečných finančních prostředků. To znamená, že nabídka bude vytvořen pouze pomocí CSS a HTML.
výcvik
Chcete-li plně pochopit, co je v něm v tomto článku, budete potřebovat trochu seznámit s teoretickými materiálu. Ale pokud jste obeznámeni s pseudotříd, můžete tento odstavec přeskočit. Takže, pro vytvoření vertikálního drop-down menu CSS, potřebujeme prvek jako «: hover». Pseudo «: hover» může být přiřazena k žádnému HTML tagu. To umožňuje definovat okamžik, kdy je položka najetí. Například jsme jmenováni vlastnost: «a: hover {color: red;}». Tento záznam znamená, že když najedete myší to zčervená na obsahu jakékoliv značky . Stojí za zmínku, že tento pseudo-element je také inaktivován. Mimochodem, «: hover» vypravoval podobné prvky. Ale z toho, že se vytvoří drop-down menu pseudo CSS.
instrukce
Za prvé, pojďme se pochopit, co je to drop-down menu. Podle této definice se dostává mnoho různých metod konstruují různá rozvržení. V tomto případě budeme analyzovat strukturu skládající se z několika trvale viditelné předměty a několika dalších (skryté). Pojďme dokončit s teorií a začít cvičit.
- Tvoříme rozložení našeho jídelního lístku. K tomu, označování HTML kódu. Vytvoření vnořeného seznamu:
-
- < / ul>. Něco takového by měl vypadat váš drop-down menu. CSS zasáhnout později. V tomto případě je hlavní seznam se skládá ze tří hlavních oblastí a dvou uzavřených.
- Skrýt sub-menu. K tomu používáme stylů, definovat následující vlastnosti: ul ul {display: none;} Tím se odstraní prvky druhém seznamu od promítací plochy.
- Vytvořte CSS nabídky, rozevírací z hlavního seznamu. Listy Cascading Style psát následující pravidlo: ul li: hover ul {display: block;}. Tento záznam znamená, že když se myš nad objeví se na obrazovce ul prvkem li, který se nachází v ul seznamu (v příloze). Na první pohled se takový systém může zdát složitá a matoucí. Ale ve skutečnosti je vše velmi jednoduché.
- Použít toto rozvržení sami tím, že vloží tagy
- obsah. Můžete změnit počet prvků seznamu.
dekorační změny
Jakmile je struktura hlavního menu je připraven, můžete přistoupit k zápisu. Pravděpodobně mnozí v první řadě ochoten zbavit značek označujících položku seznamu. To se provádí pomocí jediného vlastnost CSS, a to list-style-type. Je nutné přidat následující položku: Li {list-style-type: none;}. Pak můžete vložit rámeček a učinit pozadí. Hraniční a pozadí vám s tím pomohli. Možná, že někteří ne jako pull-down menu se objeví jako připojený seznam, tlačí na stejných základních prvků. Chcete-li tento problém odstranit, můžete jej umístit. K tomu, kaskádové styly napsat následující položky: ul ul {pozice: absolutní; left: 15px; vpravo: 15px; Horní: 15 pixelů; dole: 15 pixelů;}. Samozřejmě, že hodnoty, které bude používat svůj vlastní. V závislosti na tom, kde chcete vidět drop-down menu, bude CSS nabízí mnoho dalších funkcí, které lze přidat různé efekty a zdobí naše seznamy.
závěr
Opět je třeba poznamenat, výstavbu rozložení menu. Chcete-li přiřadit pravidla CSS použité v tomto případě vložené hodnoty, například ul ul. Pokud jste v dokumentu se setkat s jinými podobnou strukturu, může být velký problém. V těchto situacích je nutné použít konkrétní účel, například, ovládače nebo id-ID. Výše uvedený drop-down menu layout článek je navržen tak, aby seznámit obecný návrh. Zbytek práce spočívá na vašich bedrech.
Similar articles
Trending Now