Či už je navigačná ponuka vášho webu vodorovným riadkom zhora alebo zvislým riadkom nadol, je to iba zoznam. Pri navrhovaní webová navigácia, je navigačná ponuka skupina odkazov. Keď programujete svoju navigáciu pomocou XHTML + CSS, môžete vytvoriť ponuku, ktorá je na stiahnutie malá (XHTML) a ľahko sa prispôsobuje (CSS).
Začíname
Ak chcete navrhnúť zoznam pre navigáciu, musíte použiť zoznam. Môže to byť štandardný neusporiadaný zoznam, ktorý bol identifikovaný ako navigácia. Napríklad:
- Domov
- Produkty
- Služby
- Kontaktuj nás
Pri pohľade na kód HTML má odkaz Domov identifikačné číslo.
nie si nikde
To vám umožní vytvoriť ponuku, ktorá identifikuje vaše aktuálne umiestnenie pre vašich čitateľov. Tieto informácie môžete zahrnúť, aj keď momentálne neplánujete mať tento typ vizuálneho znamenia na svojom webe. Ak sa rozhodnete tágo pridať neskôr, budete mať menej kódu na prípravu svojej stránky.
Bez akýchkoľvek Styling CSS, táto ponuka XHTML vyzerá ako štandardný neusporiadaný zoznam. K dispozícii sú odrážky a položky zoznamu sú mierne odsadené. Pri použití
zástupné odkazy, väčšina prehľadávačov nezobrazuje odkazy ako klikateľné (podčiarknuté a modré). Po vložení kódu HTML na webovú stránku bude vaša navigácia vyzerať takto:- Domov
- Produkty
- Služby
- Kontaktuj nás
Toto veľmi nevyzerá ako jedálny lístok. Ak však do zoznamu pridáte niekoľko štýlov CSS, môžete vytvoriť ponuku, na ktorú budete hrdí.
Ak chcete získať viac príkladov vertikálnych ponúk, vyhľadajte na webe nasledujúce položky:
- Štylizovaná vertikálna ponuka
- Základná vertikálna šablóna ponuky
- Štýlové vertikálne menu s možnosťou Ste tu
- Základná šablóna vertikálnej ponuky s textom Ste tu
Ponuka vertikálnej navigácie
Vertikálna navigačná ponuka sa ľahko píše, pretože sa zobrazuje rovnako ako normálny zoznam: hore a dole. Položky zoznamu sa zobrazujú zvislo nadol po stránke.
Pri úprave ponúk začnite zvonku a pracujte. Najskôr upravte štýl navigácie:
ul # navigácia
Potom prejdite na prvky a odkazy. Najskôr definujte šírku ponuky. To zaisťuje, že ak sú položky ponuky dlhé, položky nebudú tlačiť na zvyšok rozloženia alebo nespôsobia vodorovné posúvanie.
ul # navigation {width: 12em; }
Po nastavení šírky pracujte na položkách zoznamu. To vám umožní nastaviť napríklad farby pozadia, okraje, zarovnanie textu a okraje.
ul # navigation li {
štýl zoznamu: žiadny;
farba pozadia: # 039;
horný okraj: pevný 1px # 039;
zarovnanie textu: doľava;
okraj: 0;
}
Po nastavení základov pre položky zoznamu pracujte na tom, ako vyzerá ponuka v oblasti odkazov. Prvý štýl navigácie:
UL # navigácia LI A
Potom upravte štýl nasledovne:
Odkaz
A: navštívené
A: hover
A: aktívny
Pre odkazy urobte z odkazov blokový prvok (namiesto predvoleného riadkového). To prinúti odkazy, aby zabrali celý priestor LI, a fungovali ako odsek, čo uľahčuje úpravu odkazov ako tlačidiel ponuky. Potom odstráňte nasledujúce:
podčiarknutie, dekorácia textu: žiadny; ako
Vďaka tomu tlačidlá vyzerajú skôr ako tlačidlá. Váš dizajn sa môže líšiť.
ul # navigation li a {
displej: blok;
dekorácia textu: žiadny;
výplň: .25em;
spodný okraj: pevný 1px # 39f;
border-right: solid 1px # 39f;
}
Vďaka displej: blok; nastavená na odkazoch je možné kliknúť na celé políčko položky ponuky, nielen na písmená. To je dobré aj pre použiteľnosť. Ak chcete, aby sa odkazy líšili od predvolenej modrej, červenej a fialovej, nastavte farby odkazu (odkaz, navštívený, kurzor myši a aktívny).
a: link, a: navštívil {color: #fff; }
a: hover, a: active {color: # 000; }
Stavu vznášania môžete venovať trochu pozornosti zmenou farby pozadia.
a: hover {background-color: #fff; }
Ponuka vodorovnej navigácie
Vytváranie horizontálnych navigačných ponúk je o niečo zložitejšie ako vertikálne navigačné ponuky, pretože musíte vyrovnať skutočnosť, že zoznamy HTML sa radšej zobrazujú vertikálne. Rovnako ako v prípade vodorovnej ponuky vytvorte zoznam navigačných ponúk:
- Domov
- Produkty
- Služby
- Kontaktuj nás
Ak chcete vytvoriť vodorovnú ponuku, postupujte rovnako ako v prípade zvislej ponuky. Začnite s vonkajšou stranou a pracujte. Navigáciu spustíte v ľavom rohu tak, že ju nastavíte na 0 ľavý okraj a polstrovanie a posuniete ju doľava.
Zvyknite si nastavovať šírku tak, aby váš jedálniček nezabral viac alebo menej miesta, ako máte v úmysle. Pre vodorovné ponuky je to zvyčajne celá šírka vzoru. Môžete tiež pridať farbu pozadia do zoznamu, aby sa ľahšie čítalo.
ul # navigation {
plavák: vľavo;
okraj: 0;
výplň: 0;
šírka: 100%;
farba pozadia: # 039;
}
Tajomstvo vodorovnej navigačnej ponuky je v položkách zoznamu. Položky zoznamu sú zvyčajne blokové prvky, čo znamená, že tieto položky majú nový riadok umiestnený pred a za každým. Prepnutím zobrazenia z bloku na riadok vynútite zarovnanie prvkov zoznamu vodorovne vedľa seba.
ul # navigation li {display: inline; }
S odkazmi zaobchádzajte rovnako ako so zvislou navigačnou ponukou, s rovnakými farbami a dekoráciou textu. Keď používateľ umiestni kurzor myši na tlačidlo, pridajte horné orámovanie. Potom odstráňte displej: blok; pretože tým sa nové riadky vrátia späť a zničí sa vodorovné menu.
Ste tu Informácie o polohe
Ďalším aspektom kódu HTML je tento identifikátor:
nie si nikde
Ak chcete upraviť svoju ponuku tak, aby označovala aktuálne umiestnenie vašich používateľov, pomocou tohto ID môžete určiť inú farbu pozadia alebo iný štýl. Presuňte toto ID atribútu do správnej položky ponuky na iných stránkach, aby bola aktuálna stránka vždy zvýraznená.
Ak spojíte tieto štýly na svojej stránke, môžete vytvoriť vodorovný alebo zvislý panel s ponukami, ktorý funguje na vašom webe a rýchlo sa sťahuje a ľahko sa aktualizuje. Pomocou XHTML + CSS sa vaše zoznamy stávajú výkonným nástrojom na navrhovanie.
Ak chcete získať viac príkladov vodorovných ponúk, vyhľadajte na webe nasledujúce položky:
- Štylizované horizontálne menu
- Základná šablóna vodorovného menu
- Štylizované horizontálne menu s možnosťou Ste tu
- Základná šablóna vodorovnej ponuky s textom Ste tu