CSS - horizontální nabídka pro začátečníky
HTML a CSS jsou webové programovací jazyky nezbytné pro uspořádání webových stránek. Začátečník, který se rozhodne zvládnout základy této profese, by měl začít s jejich studiem, protože je možné vytvořit na nich jednoduché webové stránky. 
Na HTML a CSS je horizontální nabídka pro web snadno sestavitelná, měli byste začít psaním rámce.
Vytvoření rámce
Nejprve je třeba vytvořit značku html. V nabídce je nejsnadněji vytvářet seznam s odrážkami pomocí značky
- . Značka je spárována, takže na konci seznamu vyžaduje uzavření.
Příklad:
Toto je základ, který se pak vytvoří v CSS v horizontálním menu, fixním nebo rozevíracím seznamu.
Horizontální nabídka
Jakmile je kód označen, je čas se dostat dolů do práce se stylem. Je třeba poznamenat, že párové značky používané pro výchozí rámec jsou blokové, což znamená, že pro vytvoření pravidelného i rozbalovacího horizontálního menu v CSS je nutné změnit typ prvku na malá písmena. To lze provést pomocí vlastnosti zobrazení. Přidává se k prvku:
.menu li {
zobrazení: inline;
}}
Takže to se změní na horizontální. Pokud existuje mnoho podřízených položek, mohou se přesunout na nový řádek bez dalších specifikovaných vlastností. V takovém případě použijte vlastnost k zobrazení mezery a přenosu textu. Nowrap ukládá text zcela bez dělení slov a předběžný obal ukládá mezery z HTML a přidává automaticky.
.menu li {
zobrazení: inline;
bílý prostor: nyní;
}}
Aby nebylo skóre v řádném textu, můžete tyto informace uspořádat ve skupinách a vytvořit další podnabídku, která přesně zobrazí vše, co potřebujete. Podmenu lze rozbalit nebo otevřít.
Rozbalovací nabídka
Po osvojení si základů vytváření horizontálního menu na CSS může být ve svislém seznamu uspořádáno podmenu, které z něj vypadne. Seznam značek musí být proveden na více úrovních, přidat další značky pro seznamy s odrážkami uvnitř požadované položky. Značka musí obsahovat následující položky seznamu:
V css .menu je li nahrazeno ".menu> li", takže vnitřní prvky se stanou svislé. Relativní umístění je přidáno k nadřazenému přepínači, v němž je prvek posunut z okrajů nadřazeného bloku a absolutní absolutní (úplně odstraněn z proudu a koordinován z nejbližšího prvku a pokud ne, z okrajů prohlížeče). Prvky s relativním umístěním mohou obsahovat v sobě podřízené prvky s absolutní polohou. To znamená, že když se blok pohybuje s polohou: relativní, pevné části zůstanou na svém místě.
Standardně zůstává rozevírací část vždy otevřená, pokud do prvku nepřidáte zobrazení pouze při pohybu kurzorem. Chcete-li to provést, je další seznam ve výchozím nastavení skrytý:
.menu> li {
zobrazení: inline;
poloha: relativní;
}}
.menu .second {
poloha: absolutní; (podnabídka se váže na nadřazenou jednotku)
zobrazení: žádné; (skrýt displej)
}}
.menu> li: hover .second {(pseudo-třída vznášející se kurzorem se používá k zobrazení seznamů se vznášením)
zobrazení: blok;
}}
Výsledkem bude malé, elegantní menu.
Pevná nabídka
Pro zachycení vytvořené v otevřené podobě se vlastnost zobrazení s hodnotovým blokem používá analogicky s rozevíracím menu, aniž by se však displej skryl. Pokud si přejete, můžete při procházení stránkou opravit nejen otevřený seznam, ale také lištu nabídek. Když uživatel posouvá text dolů, menu může vždy zůstat nahoře, což usnadňuje navigaci na webu. Tento prvek má několik funkcí. Je to velmi podobné absolutní, ale vázá se pouze na prohlížeč, vypadá z proudu. Je výhodné koordinovat takový prvek pomocí obvyklých vlastností nahoru / dolů, doleva / doprava. Příklad horizontální nabídky s rozevíracími prvky v prohlížeči:
.menu> li {
zobrazení: inline;
poloha: fixní;
}}
.menu .second {
poloha: absolutní;
zobrazení: žádné;
}}
.menu> li: hover.second {
zobrazení: blok;
}}
Vlastnost pozice se přidá s fixovanou hodnotou, po které zůstává nabídka při rolování na místě. Dokonce i začátečník zvládne toto menu. Seznam značek HTML - jednoduchý a pohodlný. Chcete-li správně zobrazovat styly CSS v prohlížeči, doporučujeme si pamatovat na stylové body v blokovém zobrazení, přidávat hranice a koordinační prvky, vnitřní a vnější odrážky tak, aby popsané body nebyly navzájem překrývající. Často zapomínáme na přidání šířky a výšky prvku. Chcete-li zobrazit požadovaný prvek mimo viditelnou část pro další konstrukci, můžete použít vlastnost float, "hřebít" ji na pravou nebo levou stranu (float: right;).