Č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á tiež ID
youarehere, 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 pracoval som. Týmto mám na mysli to, že som prvýkrát napísal
ul # navigácia a potom prejdite na
Ak prvky a potom odkazy, atď Takže pre toto menu najskôr definujete šírku menu. 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. Prvý štýl UL # navigácia LI Aa potom Odkaz, A: navštívila, A: hover, a A: aktívna (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 fungujú skôr ako odsek, čo zjednodušuje štýl ako tlačidlá menu. Ďalšou vecou, ktorú robím, je odstrániť podčiarknutie ( textová dekorácia: žiadne;), pretože to spôsobuje, že tlačidlá mi viac vyzerajú 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 zobrazenie: 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. 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. Prepnutím displeja z blok na v rade, vynútite, aby sa prvky zoznamu navzájom zarovnali vodorovne vedľa seba. 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 bola odstránená zobrazenie: blok; 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;} Ďalším aspektom HTML je identifikátor youarehere, Ak chcete upraviť ponuku, aby ste označili aktuálnu polohu svojich používateľov, jednoducho použite túto možnosť ID definovať odlišnú farbu pozadia alebo iný štýl. Presuňte tento atribút ID na správnu položku ponuky na iných stránkach, 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.
Horizontálne navigačné menu
Nachádzate sa tu Informácie o lokalizácii
