Jak vytvořím rozbalovací menu CSS?
Kaskádové styly (CSS) je název, který se používá k popisu způsobu formátování dokumentu HTML (Hyper Text Markup Language) nebo XML (Extensible Markup Language). Lze jej použít pro jakýkoli typ dokumentu XML, ale nejčastěji se používá u webových stránek psaných v HTML. CSS lze použít k vytvoření rozbalovací nabídky na webových stránkách. V rozevírací nabídce CSS je zobrazena jediná textová položka, dokud návštěvník nevyužije kurzor myši nad nabídkou. V tomto okamžiku je zobrazen celý seznam položek. Nabídka je vytvořena pomocí značek CSS identifikace a třídy.
Rozbalovací nabídky CSS začínají voličem ID. Tento selektor vypadá jako #. Následuje název ID. ID můžete pojmenovat cokoli, ale mělo by být popisné, aby si ostatní mohli přečíst váš kód. Například rozbalovací nabídka může použít kód # drop1.
Vytvořte třídu pro první položku v rozbalovací nabídce CSS pomocí selektoru třídy, který vypadá jako tečka. 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 složenými závorkami.
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;
velikost písma: 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 popíše seznam neuspořádaných HTML, který je označen znaky "ul." Popis bude vypadat v podstatě stejně jako položka nabídky nejvyšší úrovně, přičemž na začátek popisu se přidá slova „display: none # 59“. Znamená to, že položky v seznamu bez řazení budou skryté, dokud se ukazatel nad kurzorem nekryje nad rozbalovací nabídkou CSS.
Následuje příklad této části kódu CSS:
# drop1 ul.link {
displej: žádný # 59
rodina fontů: Verdana, Ženeva, san-serif;
velikost písma: 100%;
barva: # FF00FF;}
Budete chtít, aby se rozbalovací nabídka CSS objevila nad zbytkem dokumentu HMTL. V opačném případě, když se návštěvník umístí nad nabídku, zatlačí zbytek dokumentu dolů na stránku a vytvoří tak prostor pro seznam. Nastavením polohového prvku na absolutní to bude dosaženo.
Kód pro nastavení pozice je:
# drop1 {pozice: absolutně;}
To je vše, co je potřeba pro část CSS rozbalovací nabídky. Zbytek rozbalovací nabídky CSS je vytvořen v dokumentu HTML pomocí prvků „div“, „id“, „třída“, „li“ a „ul“. Značka „div“ odděluje část nabídky dokumentu. Zadejte <div id = "drop1"> a vytvořte rozevírací nabídku. Poté spusťte neuspořádaný seznam pomocí prvku HTML „ul“.
Přidejte první třídu k první položce seznamu a třídu propojení pro zbývající položky. HTML kód by měl vypadat podobně jako:
<div id = "drop1">
<li class = "top"> Nejvyšší položka </li>
<li class = "link"> <a href="#"> Item </a> </li>
<li class = "link"> <a href="#"> Item </a> </li>
<li class = "link"> <a href="#"> Item </a> </li>
</ul> </div>
Když otevřete dokument ve webovém prohlížeči, zobrazí se rozbalovací nabídka CSS jako jedna položka na stránce. Když pohnete myší nad horní položku, zobrazí se zbývající část nabídky. Zbytek textu na stránce se nepohybuje, ale část bude skryta nabídkou.