Podrobný sprievodca
Či je navigačné menu vodorovným riadkom v hornej časti alebo v zvislom riadku po boku, je to stále len zoznam. Pri navrhovaní webovej navigácie je často ľahké zabudnúť, že navigačné menu je len oslávená skupina odkazov. Ak však naprogramujete navigáciu pomocou XHTML + CSS, môžete vytvoriť menu, ktoré je malé na prevzatie (XHTML) a ľahko prispôsobiť (CSS).
Začíname
Ak chcete začať navrhovať zoznam navigácie, musíte použiť zoznam.
Môže to byť štandardný neusporiadaný zoznam, ktorý bol označený ako navigácia:
Ak sa pozriete pozorne na HTML, zistíte, že odkaz "Domov" má aj ID vašej osoby. Umožní vám vytvoriť menu, ktoré identifikuje aktuálne umiestnenie vašich čitateľov. Dokonca aj keď nemáte v pláne mať tento typ vizuálnej narážky na svojich stránkach práve teraz, môžete tieto informácie zahrnúť. Ak sa rozhodnete pridať kandidáta neskôr, budete menej kódovať na prípravu svojich stránok.
Bez akéhokoľvek štýlu CSS toto menu XHTML vyzerá ako štandardný neusporiadaný zoznam. Existujú odrážky a položky zoznamu sú mierne odsadené. Pretože používam zástupné symboly , väčšina prehliadačov nezobrazí odkazy ako klikacie (podčiarknuté a modré). Ak do vyššie uvedeného HTML prilepíte webovú stránku, navigácia bude vyzerať takto:
- Domov
- Produkty
- služby
- Kontaktuj nás
To je docela nudné a nevyzerá toľko ako menu. Ale len s niekoľkými štýlmi CSS, ktoré ste pridali do zoznamu, môžete vytvoriť ponuku, vďaka ktorej ste hrdí.
Vertikálna navigačná ponuka
Vertikálne navigačné menu sa veľmi ľahko zapisuje, pretože sa zobrazuje rovnakým spôsobom ako bežný zoznam: hore a dole.
Položky zoznamu sa zobrazujú vertikálne po stránke.
Keď stylujem menu, rád by som začal vonku a pracovať dovnútra. Týmto mám na mysli, že prvýkrát som štýl ul # navigácia a potom sa presunúť do li elementov a potom linky, atď Takže pre toto menu, najskôr definujete šírku ponuky. Tým sa zabezpečí, že aj keď sú položky ponuky dlhé, nebudú tlačiť zvyšok rozloženia alebo spôsobiť horizontálne posúvanie.
ul # navigácia {šírka: 12m; }
Keď budem mať nastavenú šírku, môžem hrať s položkami zoznamu. To mi umožňuje nastaviť veci ako (zbaviť sa guľky), farby pozadia, hranice, zarovnanie textu a okraje.
ul # navigácia li {
štýl zoznamu: žiadne;
farba pozadia: # 039;
hranica: solid 1px # 039;
text-zarovnanie: vľavo;
rozpätie: 0;
}
Po nastavení základov pre položky zoznamu môžete začať hrať s tým, ako menu vyzerá v oblasti odkazov. V prvom štýle navigácia UL # LI A a potom odkaz A: A: navštívený, A: vznášať a A: aktívny (ak ich chcete). Pre odkazy sa mi páči, aby odkazy vytvorili prvok bloku (skôr ako predvolený in-line). To ich núti k tomu, aby zaberali celý priestor LI - a správajú sa skôr ako odsek, čo im uľahčuje štýl ako tlačidlá menu. Ďalšou vecou, ktorú vždy robím, je odstránenie podčiarknutia (text-decoration: none; pretože to spôsobuje, že tlačidlá mi vyzerajú viac ako tlačidlá.
Samozrejme, váš dizajn môže byť iný.
ul # navigácia li a {
zobrazenie: blok;
textová dekorácia: žiadne;
padding: .25em;
spodná hranica: solid 1px # 39f;
hranica-pravá: pevná 1px # 39f;
}
Všimnite si, že s displejom: blok; nastaviť na odkazy, celé pole položky ponuky je možné kliknúť, nielen písmená. To je tiež dobré pre použiteľnosť. Uistite sa, že chcete nastaviť farby odkazov (odkaz, navštívené, presunuté a aktívne), ak chcete, aby sa odlišovali od predvolenej modrej, červenej a fialovej farby.
a: odkaz, a: navštívené {color: #fff; }
a: vznášať sa, a: aktívna {farba: # 000; }
Tiež som rád, aby sa vznášajúci stav trochu viac pozornosti zmenil farbu pozadia.
a: vznášať {background-color: #fff; }
Ak by ste chceli viac príkladov vertikálnych ponúk, pozrite si nižšie uvedený zoznam.
- Stylová vertikálna ponuka
- Šablóna základnej vertikálnej ponuky
- Stylizované vertikálne menu s Vami tu
- Šablóna základnej vertikálnej ponuky s vami tu
Horizontálne navigačné menu
Vytváranie horizontálnych navigačných ponúk je o niečo náročnejšie ako vertikálne navigačné ponuky, pretože musíte kompenzovať skutočnosť, že zoznamy HTML radšej zobrazujú vertikálne. Rovnako ako v horizontálnom menu najskôr vytvorte zoznam navigačných ponúk :
Ak chcete vytvoriť horizontálne menu, postupujte rovnako ako vo vertikálnej ponuke. Začnite von a začnite pracovať. Keďže chcem, aby sa navigácia začala v ľavom rohu, nastavila som ju ľavým okrajom a polstrovaním a plavila som ju doľava. Mali by ste tiež mať zvyk nastaviť šírku tak, aby vaše menu nebolo viac alebo menej priestoru, než zamýšľate. Pre horizontálne ponuky je to zvyčajne celá šírka dizajnu. Tiež som pridala farbu pozadia do celého zoznamu, aby bolo ľahšie čítať.
ul # navigation {
plavák: vľavo;
rozpätie: 0;
polstrovanie: 0;
šírka: 100%;
farba pozadia: # 039;
}
Ale tajomstvo horizontálneho navigačného menu je v položkách zoznamu. Položky zoznamu sú zvyčajne prvky bloku, čo znamená, že budú mať pred a za každým z nich nový riadok. Tým, že prepnete displej z bloku na inline, vynútite elementy zoznamu, aby sa vedľa seba zoradili vodorovne.
ul # navigácia li {zobrazenie: inline; }
Spracoval som prepojenia presne tak, akoby som ich zaobchádzal vo vertikálnom navigačnom menu s rovnakými farbami a textovou dekoráciou. Pridala som hornú hranicu na vymedzenie tlačidiel, keď sú presunuté. Jediná vec, ktorú som odstránil, bola obrazovka: block; ako to bude klásť nové linky späť a zničiť horizontálne menu.
ul # navigácia li a {
textová dekorácia: žiadne;
polstrovanie: .25em 1m;
spodná hranica: solid 1px # 39f;
hraničný prvok: solid 1px # 39f;
hranica-pravá: pevná 1px # 39f;
}
a: odkaz, a: navštívené {color: #fff; }
ul # navigácia li: pohybovať {
farba pozadia: #fff;
farba: # 000;
}
Nachádzate sa tu Informácie o lokalizácii
Ďalším aspektom HTML je identifikačný identifikátor. Ak chcete upraviť ponuku s cieľom označiť aktuálnu polohu používateľov, jednoducho použite toto ID na definovanie odlišnej farby pozadia alebo iného štýlu. Tento atribút ID presuňte na správnu položku ponuky na iných stránkach tak, aby bola aktuálna stránka vždy zvýraznená.
ul # navigácia li # youarehere {farba pozadia: # 09f; }
Ak tieto štýly uložíte na svoju stránku, môžete vytvoriť vodorovnú alebo vertikálnu lištu ponúk, ktorá pracuje s vašou stránkou, ale je rýchla na prevzatie a veľmi jednoduchá aktualizácia v budúcnosti. Použitie XHTML + CSS zmení vaše zoznamy na veľmi silný nástroj pre návrh.
Ak chcete mať viac príkladov vodorovných ponúk, postupujte podľa nasledujúcich pokynov.
- Štýlový horizontálny menu
- Šablóna základnej horizontálnej ponuky
- Stylové horizontálne menu s Vami tu
- Šablóna základnej horizontálnej ponuky s vami tu