Ponuka sa používa na uľahčenie navigácie používateľmi v sekciách na webe. Aby prilákali pozornosť návštevníkov, malo by byť menu funkčné, ľahko použiteľné a zároveň kombinovateľné s dizajnom celého zdroja.
Inštrukcie
Krok 1
Pred vytvorením ponuky sa rozhodnite pre jej typ. Môžete vytvoriť rozbaľovacie vodorovné alebo zvislé pole, ktoré sa používateľovi zobrazí, keď nad ním kurzor myši prejde kurzorom myši. Pri výbere konkrétneho menu sa môžete riadiť tým, aké pohodlné bude pre návštevníkov jeho použitie a ako sa skombinuje s dizajnom.
Krok 2
Po výbere typu ponuky otvorte súbor svojej stránky pomocou ľubovoľného textového editora, ktorý používate na úpravu kódu HTML. Prejdite do požadovanej časti kódu, kam chcete vložiť prvok rozhrania.
Krok 3
Potom vytvorte zoznam možností vytvorením bloku a vytvorením očíslovaného zoznamu s priradeným ID. Napríklad:
- Odkaz 1
- Odkaz 2
- Odkaz 3
V tomto príklade som vytvoril zoznam troch prvkov s odrážkami a umiestnil som ho do vrstvy div s ID ID panela.
Krok 4
Prejdite na stránku sekcie na svojej stránke a vytvorte príslušné kaskádové menu so štýlmi. Ak chcete vytvoriť vodorovnú ponuku, môžete do výsledného zoznamu zahrnúť atribút vložený:
#panel ul li {display: inline; }
Krok 5
Ak chcete vytvoriť vodorovnú čiaru po celej dĺžke stránky, môžete použiť nasledujúci kód:
#panel ul {margin-left: 0; výplň: 2px 0; }
Krok 6
Potom môžete vykonať vizuálne rozdelenie na obdĺžniky:
#panel ul li a {margin-left: 3px; orámovanie: 1px; výplň: 2px 3px; pozadie: modré; }
Tento kód nastavuje zarážky textu od prvkov hranice cez atribúty left-left a padding a tiež nastavuje farbu pozadia pre každú z položiek zoznamu. V tomto príklade je farba modrá, ale môžete ju zmeniť podľa vlastného uváženia.
Krok 7
Ak chcete smerovať na položku na aktuálnej stránke, ktorá je vybratá na karte, nastavte príslušné parametre na otvorenú triedu:
#menu ul li a # open {pozadie: red; spodný okraj: 1px; }
Aktuálna stránka vybratá v paneli sa teraz zobrazí červenou farbou.
Krok 8
Uložte zmeny do súboru a skontrolujte funkčnosť napísaného kódu otvorením stránky v prehliadači. Ak chcete nastaviť ďalšie možnosti zobrazenia, môžete kedykoľvek pridať CSS alebo HTML a vylepšiť tak vzhľad objektu.
