Jak vytvořit rozbalovací nabídku CSS

Dnes budeme zvažovat otázku "Jak vytvořit rozevírací nabídku CSS?". Mělo by být okamžitě řečeno, že tento prvek bude proveden bez připojení dalších prostředků. To znamená, že nabídka bude vytvořena pouze pomocí CSS a HTML.

Příprava

Abychom plně porozuměli tomu, co se v článku děje, je třeba se trochu seznámit s teoretickým materiálem. Ale pokud jste známí pseudotříd, můžete přeskočit tento odstavec. Takže, abychom vytvořili vertikální rozbalovací nabídku CSS, potřebujeme element, například ": hover". Pseudo-class ": hover" může být přiděleno libovolnému HTML tag. Umožňuje určit, kdy kurzor myši směřuje k položce. Například jsme přidělila vlastnost: "a: hover {color: red-}". Tento záznam znamená, že při vznášení kurzor myši na libovolnou značku jeho obsah zčervená. Stojí za zmínku, že tato pseudotřídka znamená stále neaktivovanou položku. Mimochodem, ": hover" má příbuzné podobné prvky. Ale právě s touto pseudotřídou vytvoříme rozbalovací nabídku CSS.

Pokyny

• Vytvořte rozložení nabídky. Chcete-li to provést, uděláme značku HTML. Vytvořte vnořený seznam :. Mělo by to vypadat jako rozbalovací nabídka. CSS přijde o něco později. V tomto případě se hlavní seznam skládá ze tří hlavních položek a dvou vnořených.
• Skryjte další nabídku. K tomu použijeme stylové listy, definujeme následující vlastnost: ul ul {display: none;} Tím se z obrazovky odstraní prvky druhého seznamu.
• Vytvořte nabídku v rozbalovací nabídce CSS z hlavního seznamu. V kaskádových style stylech zapíšeme následující pravidlo: ul li: hover ul {display: block-}. Tento záznam znamená, že když umístíte ukazatel myši na element li v seznamu ul, na obrazovce se objeví ul (vnořené). Na první pohled se takový systém může zdát příliš komplikovaný a matoucí. Ale ve skutečnosti je vše velmi jednoduché.
• Použijte toto rozvržení sami, vložte mezi značky
• vašeho obsahu. Můžete změnit počet položek v seznamu.

Dekorativní změny

Jakmile je rozvržení hlavní nabídky připraveno, můžete pokračovat v jeho návrhu. Pravděpodobně se mnozí v první řadě chtějí zbavit značek, které označují prvek seznamu. To se provádí pomocí jediného vlastnost CSS, jmenovitě typu seznamu. Tuto položku musíte přidat: li {list-style-type: none;}. Dále můžete vložit rámeček a vytvořit pozadí. Vlastnosti ohraničení a pozadí vám pomohou. Možná, někteří se nelíbí, že rozbalovací nabídka se zobrazí jako další seznam, zatímco rozšiřuje hlavní prvky. Chcete-li to určit, můžete jej umístit. Chcete-li to provést, v kaskádových stylových listech napište následující záznam: ul ul {position: absolute-left: 15px; pravé: 15px; horní: 15px; spodní: 15px;}. Samozřejmě hodnoty, které použijete vlastní. V závislosti na tom, kam chcete vidět rozbalovací nabídku, CSS nabídne mnoho dalších vlastností, které mohou přidat různé efekty a zdobit naše seznamy.

Závěr

Ještě jednou stojí za zmínku návrh uspořádání menu. Chcete-li v tomto případě přiřadit pravidla CSS, použijete vnořené hodnoty, například ul ul. Pokud máte v dokumentu jiný podobný vzhled, může dojít k velkým problémům. V takových situacích je třeba použít specifičtější účel, například selektory nebo identifikační identifikátory. Rozložení rozbalovací nabídky v článku je určeno pro seznámení s obecným vzorem. Zbytek práce je na ramenou.