HTML - je to značkovací jazyk, který vám umožňuje vytvářet webové stránky. Jedním z hlavních prvků webových stránek je nabídka. Chcete-li vytvořit vizuální a funkční nabídku, můžete použít rozbalovací nabídku. V tomto článku se podíváme na podrobný návod, jak vytvořit rozbalovací nabídku v HTML, která vám pomůže zlepšit uživatelský zážitek na vašem webu.
První krok - vytvoření základní struktury menu. K tomu se používá číslovaný seznam, ve kterém budou požadované položky nabídky položkami seznamu. Každá položka seznamu musí být přiřazena třídě nebo identifikátoru, aby se později mohla použít stylizace pomocí CSS.
Druhý krok - přidání stylů do rozbalovací nabídky. Musíte použít CSS k vytvoření stylů, které určují, jak bude nabídka vypadat a chovat se při interakci s uživatelem. S pomocí pseudoklasu :hover můžete nastavit styly, které se budou vztahovat na položky nabídky, když na ně najedete kurzorem myši. Můžete také použít CSS ke správě animací a přechodů při otevírání a zavírání rozbalovací nabídky.
Nyní, když znáte základní kroky k vytvoření rozbalovací nabídky v HTML a její stylizaci pomocí CSS, můžete začít vytvářet vlastní nabídku. Pamatujte, že dobrá nabídka nejen zlepšuje navigaci na vašem webu, ale také vytváří pohodlí pro uživatele, což je důležitý aspekt pro úspěšnou online přítomnost.
Vytvoření hlavní struktury rozbalovací nabídky
K vytvoření rozbalovací nabídky v HTML použijeme značky a . Umožňují nám vytvářet uspořádané a neuspořádané seznamy, které budou použity pro naši nabídku.
Nejprve vytvoříme základní strukturu našeho menu:
Vytvořili jsme hlavní seznam menu složený ze čtyř položek. Každá položka nabídky je položkou seznamu a text odkazu je prvkem . Atribut href="#" označuje cestu na vstupní stránku. V tomto případě je uveden prázdný, protože jsme zatím nevytvořili další stránky.
Chcete-li přidat podsložky do naší nabídky, stačí do položky vložit další seznam . Například:
V tomto příkladu jsme přidali dílčí body pro bod "O nás". Vytvořili jsme druhý seznam se třídou "submenu", což je podnabídka pro položku "O nás".
Vytvoření seznamu položek nabídky
K tomu se používá značka
- - uspořádaný seznam. Každá položka seznamu je nastavena pomocí značky
- . Příklad vytvoření neuspořádaného seznamu:
Po vytvoření seznamu položek nabídky můžete začít vytvářet styly pro jeho zobrazení a také přidávat interaktivitu pomocí JavaScriptu nebo CSS.
Použití stylů na položky nabídky
Styly umožňují, aby nabídka byla pro uživatele atraktivnější a čitelnější. Na různé položky nabídky můžete použít různé styly, abyste zdůraznili jejich důležitost a snadnost navigace. Pro začátek můžete použít značku strong pro zvýraznění základních položek nabídky, jako jsou názvy oddílů nebo položek. Například:
Tento kód vytvoří tučný text pro položku nabídky domů, což uživateli pomůže snadněji se orientovat v navigaci. Lze také použít značku em pro zvýraznění důležitých pododdílů nebo položek nabídky. Například:
Výše uvedený kód zvýrazní kurzívou text "o nás", což uživateli pomůže rychleji najít požadované informace. Můžete kombinovat různé styly, jako je barva pozadí, velikost písma nebo hranice, abyste dosáhli požadovaného vzhledu položek nabídky. Použijte CSS k aplikaci stylů na položky nabídky. Například:
ul li a a:hover strong em
Toto je příklad CSS stylů, které lze použít na nabídku. Zde jsou nastaveny odsazení, barvy, styly písem a další možnosti. Aplikujte tyto styly na vaše menu a přizpůsobte je svým potřebám a vkusu.
Přidání funkčnosti do rozbalovací nabídky
- Použijte CSS k skrytí seznamu podsložek rozbalovací nabídky:
const submenuToggle = document.querySelectorAll('.menu-item-has-children > a');for (let i = 0; i < submenuToggle.length; i++) );>
.show
Nyní bude vaše rozbalovací nabídka fungovat a uživatelům umožní vidět podsložky při kliknutí na hlavní položky nabídky.
Psaní skriptu pro zobrazení a skrytí rozevíracího seznamu
Chcete-li vytvořit rozbalovací nabídku v HTML, musíte použít jazyk JavaScript. Níže je podrobný návod k napsání skriptu pro zobrazení a skrytí rozevíracího seznamu:
- Vytvořte prvek HTML, který bude sloužit jako tlačítko nebo odkaz pro otevření a zavření seznamu.
- Vytvořte prvek HTML, který bude představovat samotný seznam. Dejte mu jedinečné ID (id).
- Vytvořte funkci JavaScript, která se spustí kliknutím na tlačítko nebo odkaz.
- V rámci této funkce použijte metodu getElementById k získání odkazu na položku seznamu HTML.
- Použijte podmíněný příkaz if-else ke kontrole aktuálního stavu seznamu (otevřený nebo zavřený) a provádění příslušných akcí.
- Pokud je seznam otevřený, skryjte jej pomocí vlastnosti CSS display: none, jinak seznam zobrazte pomocí vlastnosti CSS display: block.
Příklad skriptu pro zobrazení a skrytí rozevíracího seznamu může vypadat takto:
Tento skript přidá tlačítko " Otevřít / zavřít seznam "a seznam s id"myList". Při kliknutí na tlačítko skript zkontroluje aktuální stav seznamu a změní jeho viditelnost. Pokud je seznam již otevřený, bude skrytý, a pokud je zavřený, zobrazí se.