Jak vytvořím rozbalovací nabídky CSS?
Cascading Style Sheets (CSS) je název používaný k popisu způsobu, jakým je formátován dokument Hyper Text Markup Language (HTML) nebo rozšiřitelný jazyk značkového jazyka (XML). Může být použit pro jakýkoli typ dokumentu XML, ale nejčastěji se používá s webovými stránkami napsanými v HTML. CSS lze použít k vytvoření rozbalovacích nabídek na webových stránkách. Rozbalovací nabídky CSS mají jednu textovou položku zobrazenou, dokud návštěvník nepoužije myši k vznášení nabídky, v tomto okamžiku je zobrazen celý seznam položek. Nabídka je vytvořena pomocí značek identifikace CSS a třídy. Tento selektor vypadá jako #. Následuje název ID. Můžete pojmenovat ID cokoli, ale mělo by to být popisné, aby ostatní mohli číst váš kód. Například rozbalovací nabídka může použít kód #Drop1.
Vytvořit třídu pro první položku v rozbalovací nabídce CSS pomocí voliče třídy, který vypadá jako období. Třída bude součástí prvku seznamu HTML. Prvek seznamu je označen znaky „LI“. Vytvořte třídu nejvyšší úrovně zadáním „li.top“. Popis třídy je obsažen mezi dvěma kudrnatými rovnátkami.
Následující příklad ukazuje celý kód CSS pro první položku v seznamu:
#Drop1 li.top {font-family: Verdana, Ženeva, San-serif;
Písmo-velikost: 100%;
Barva: #ff00ff;}
Dále vytvořte třídu pro položky, které budou skryty pod první položkou v nabídce CSS. Třída popisuje seznam HTML UNSORED, který je označen s postavami „ul“. Popis bude vypadat v podstatě stejně jako položka nabídky nejvyšší úrovně s přidáním slov „Display: None#59“ na začátku popisu. To ukazuje, že položky v seznamu UNSORED budou skryty, dokud se ukazatel nepřenáší přes rozbalovací nabídku CSS.
Následujícíje příkladem této části kódu CSS:
#Drop1 ul.link {
Displej: Žádné#59
Font-Family: Verdana, Ženeva, San-Serif;
Písmo-velikost: 100%;
Barva: #ff00ff;}
Budete chtít, aby se objevila rozbalovací nabídka CSS ve zbytku dokumentu HMTL. V opačném případě, když se návštěvník vznáší po nabídce, zatlačí zbytek dokumentu na stránce a vytvoří prostor pro seznam. Nastavení polohového prvku na absolutní, udělá to.
Kód pro nastavení pozice je:
#Drop1 {pozice: Absolute;}
To je vše, co je potřeba pro část CSS v rozbalovací nabídce. Zbytek rozbalovací nabídky CSS je vytvořen v dokumentu HTML pomocí prvků „Div“, „ID“, „Li“ a „UL“. Značka „div“ odděluje část nabídky dokumentu. Typ
Přidejte špičkovou třídu do položky prvního seznamu a třídu odkazu pro zbytek položek. Kód HTML by měl vypadat podobně jako:
Při otevření dokumentu ve webovém prohlížeči se rozbalovací nabídka CSS objeví jako jedna položka na stránce. Když přesunete myši nad nejvyšší položku, objeví se zbytek nabídky. Zbytek textu na stránce se nebude pohybovat, ale část bude skryta nabídkou.