Jak vytvořit úvodní nabídku v HTML

Otevíratelná nabídka je důležitým prvkem designu webové stránky. Umožňuje vytvořit interaktivní uživatelské rozhraní a usnadňuje navigaci na webu. V tomto článku se podíváme na to, jak vytvořit úvodní nabídku v HTML.

Za prvé, pro vytvoření otevíratelné nabídky v HTML je nutné použít značky a . Značka vytvoří neuspořádaný seznam a značka nastaví položku seznamu. To usnadňuje strukturování a uspořádání položek nabídky.

Za druhé, aby se nabídka otevřela, je nutné použít CSS. Lze například použít vlastnost display: none; pro položky seznamu, abyste je původně Skryli. Prostřednictvím CSS pak můžete nastavit styly a vytvořit animace pro otevírání a zavírání nabídek, když najedete myší nebo kliknete.

Nakonec lze JavaScript použít k přidání interaktivního chování do nabídky v HTML. Lze například použít události mouseover a mouseout Chcete-li zobrazit a skrýt podnabídku, když najedete myší na položku seznamu. Když kliknete na položku nabídky, Můžete také použít JavaScript k provádění určitých akcí, jako je přechod na jinou stránku nebo zobrazení dalších informací.

Jak vytvořit rozbalovací nabídku v HTML

Webové stránky často používají rozbalovací nabídky, aby uživatelům umožnily pohodlnou navigaci. V této příručce bude popsáno, jak vytvořit rozbalovací nabídku v HTML.

a pro vytvoření seznamu. Každá položka seznamu bude položkou nabídky.

Zde jsme vytvořili hlavní menu s položkami "Domů", "O nás", "Služby"a " kontakty". Uvnitř položky služby je další seznam, což je rozbalovací podnabídka.

Chcete-li, aby byla rozbalovací nabídka viditelná, když přejedete na položku Služby, musíte použít CSS. Níže je uveden příklad kódu CSS:

Třída "submenu" nastavuje styly pro padající podnabídku. K skrytí výchozí podnabídky používáme vlastnost "display: none;". Poté použijeme selektor ":hover" pro položku nabídky služby a změníme vlastnost "display" na "block", abychom zobrazili podnabídku, když na tuto položku najedete kurzorem.

Nyní máte vše, co potřebujete k vytvoření rozbalovací nabídky v HTML. Styly můžete upravit a přidat další položky nabídky a podnabídky podle vašich potřeb.

Vytvoření hlavní struktury nabídky

položky nabídky jsou nastaveny pomocí položek seznamu . Každá položka nabídky může obsahovat odkaz na stránku nebo podnabídku pro zobrazení dalších položek.

Příklad struktury nabídky:

V tomto příkladu obsahuje nabídka čtyři hlavní položky. Položky "bod 1", "bod 2" a "bod 3" jsou jednoduchými odkazy na příslušné stránky. Položka "bod 4" obsahuje další seznam položek, které se zobrazí, když na danou položku najedete kurzorem.

můžete vytvořit složitější hierarchii nabídky.

Přidání stylů pro zobrazení nabídky

Jakmile vytvoříme základní strukturu HTML kódu pro naši otevíratelnou nabídku, můžeme přidat styly, které mu dodají požadovaný vzhled.

Za prvé, můžeme použít styly CSS k zadání pozadí, barvy textu a dalších vlastností pro naši nabídku. Můžeme například vytvořit třídu .menu pro stylizaci celé nabídky jako celku:

Zde jsme nastavili bílé pozadí, tmavou barvu textu, malý vnitřní ústup, zaoblení úhlů 5 pixelů a stín.

Dále můžeme přidat styly pro každou položku nabídky uvnitř bloku .menu. K tomu využijeme třídu .menu-item:

V tomto případě jsme odstranili stylizaci značkovačů seznamů a mezi položky nabídky jsme přidali malý odsazení.

Také, můžeme přidat styly, když najedete kurzorem na položky nabídky, aby uživatelé viděli, že mohou klepnout na tyto položky. K tomu použijeme pseudoklass :hover:

Zde jsme použili světle šedou barvu pozadí při najíždění na položky nabídky.

Nakonec můžeme přidat styly pro zobrazení šipky, která by naznačovala, že se nabídka otevírá nebo zavírá. K tomu můžeme použít pseudoelement:: after a změnit jeho vzhled při otevírání/zavírání nabídek.

Zde jsme nastavili výchozí šipku dolů. Když je nabídka otevřena (přidána třída .open), měníme šipku směrem nahoru.

S těmito styly budeme moci dát naší nabídce, která se otevírá, požadovaný vzhled, aby ji uživatelé mohli pohodlně používat.

Psaní skriptu pro ovládání otevíracího menu

K vytvoření otevřené nabídky v HTML lze použít programovací jazyk JavaScript. Následující příklad ukazuje, jak napsat jednoduchý skript, který řídí zobrazení nabídky.

const toggleButton = document.getElementById('toggle-button');const menu = document.getElementById('menu');toggleButton.addEventListener('click', function() else >);

V tomto příkladu máme tlačítko "Otevřít nabídku" a seznam (pomocí značky "ul") s několika položkami nabídky. Zpočátku je seznam skrytý pomocí inline stylu ' display: none;'. V JavaScriptu najdeme prvky tlačítka a seznamu pomocí jejich identifikátorů, přidáme obslužnou rutinu události kliknutí na tlačítko a změníme styl `display` seznamu podle jeho aktuálního stavu.

Když kliknete na tlačítko, skript zkontroluje, zda je seznam viditelný. Pokud je skrytý ('display: none;'`, stane se viditelným ('display: block;` ), text tlačítka se změní na"Zavřít nabídku". Pokud je seznam již viditelný, skrývá se a text tlačítka se vrátí do původního stavu "otevřít nabídku".

Upozorňujeme, že pro spuštění skriptu je nutné jej přidat do tagu `