Nabídka slouží k usnadnění uživatelské navigace v sekcích na webu. Aby přilákalo pozornost návštěvníka, mělo by být menu funkční, snadno použitelné a zároveň kombinovatelné s designem celého zdroje.
Instrukce
Krok 1
Před vytvořením nabídky rozhodněte o jejím typu. Můžete vytvořit rozevírací vodorovné nebo svislé pole, které se uživateli zobrazí, když na něj uživatel umístí kurzor myši. Při výběru konkrétního menu se můžete řídit tím, jak pohodlné bude pro návštěvníky jeho použití a jak bude zkombinován s designem.
Krok 2
Po výběru typu nabídky otevřete soubor stránky pomocí libovolného textového editoru, který používáte k úpravě HTML. Přejděte do požadované části kódu, kam chcete vložit prvek rozhraní.
Krok 3
Poté vytvořte seznam možností vytvořením bloku a vytvořením číslovaného seznamu s přiřazeným id. Například:
- Odkaz 1
- Odkaz 2
- Odkaz 3
V tomto příkladu jsem vytvořil seznam tří prvků s odrážkami a umístil jej do div vrstvy s ID ID panelu.
Krok 4
Přejděte na stránku bloku bloku a vytvořte příslušnou nabídku kaskádových stylů. Chcete-li vytvořit vodorovnou nabídku, můžete do výsledného seznamu zahrnout vložený atribut:
#panel ul li {display: inline; }
Krok 5
Chcete-li vytvořit vodorovnou čáru po celé délce stránky, můžete použít následující kód:
#panel ul {margin-left: 0; výplň: 2px 0; }
Krok 6
Pak můžete provést vizuální rozdělení na obdélníky:
#panel ul li a {margin-left: 3px; ohraničení: 1px; výplň: 2px 3px; pozadí: modrá; }
Tento kód nastavuje odsazení textu od prvků ohraničení prostřednictvím atributů left-left a padding a také nastavuje barvu pozadí pro každou z položek seznamu. V tomto příkladu je barva modrá, ale můžete ji změnit podle vlastního uvážení.
Krok 7
Chcete-li ukázat na položku na aktuální stránce, která je vybrána na kartě, nastavte příslušné parametry na otevřenou třídu:
#menu ul li a # open {pozadí: red; spodní okraj: 1px; }
Aktuální stránka vybraná v panelu se nyní zobrazí červeně.
Krok 8
Uložte změny do souboru a zkontrolujte funkčnost napsaného kódu otevřením stránky v prohlížeči. Chcete-li nastavit další možnosti zobrazení, můžete vždy přidat CSS nebo HTML, abyste vylepšili vzhled objektu.
