Ať už je navigační nabídka vodorovným řádkem přes horní nebo vertikální řádek dolů, je to stále jen seznam. Při navrhování webové navigace je často snadné zapomenout, že navigační nabídka je jen oslavovaná skupina odkazů. Pokud však programujete navigaci pomocí XHTML + CSS, můžete vytvořit nabídku, která je malá ke stažení (XHTML) a snadno se přizpůsobit (CSS).
Začínáme
Chcete-li začít vytvářet seznam pro navigaci, musíte použít seznam. Může to být standardní neřízený seznam, který byl označen jako navigace:
Pokud se podíváte pozorně na HTML, zjistíte, že odkaz "Domov" má také ID
jsi tady. To vám umožní vytvořit menu, které identifikuje aktuální umístění vašich čtenářů. Dokonce i když nemáte v plánu mít takový typ vizuální narážky na vašem webu právě teď, můžete tyto informace zahrnout. Pokud se rozhodnete později přidat značku, budete mít méně kódu pro přípravu vašeho webu.
Bez stylu CSS toto menu XHTML vypadá jako standardní neuspořádaný seznam. Existují kuličky a položky seznamu jsou mírně odsazeny. Protože používám zástupné symboly, většina prohlížečů nezobrazí odkazy jako klikací (podtržené a modře). Pokud vložíte výše uvedený kód HTML do webové stránky, vaše navigace bude vypadat takto:
- Domov
- produkty
- Služby
- Kontaktujte nás
To je docela nudné a nevypadá podobně jako menu. Ale s několika styly CSS přidanými do seznamu můžete vytvořit menu, které vás pyšní.
Vertikální navigační nabídka
Vertikální navigační menu je velmi snadné psát, protože se zobrazuje stejným způsobem jako normální seznam: nahoru a dolů. Položky seznamu se zobrazují vertikálně po stránce.
Když styluji menu, rád bych začal venku a pracoval. Tím mám na mysli, že jsem nejprve styloval
ul # navigace a pak přejděte na
li prvky a pak odkazy atd. Takže pro toto menu nejprve definujete šířku nabídky. To zajistí, že i když jsou položky nabídky dlouhé, nebudou zbytek rozložení přesunout nebo způsobit horizontální posun.
ul # navigace {šířka: 12em; }}
Jakmile jsem nastavil šířku, mohu si hrát s položkami seznamu. To mi umožňuje nastavit věci jako (zbavit se kuliček), barvy pozadí, ohraničení, zarovnání textu a okraje.
ul # navigace li {styl stylu: žádný;barva pozadí: # 039;hranice: solid 1px # 039;text-zarovnání: vlevo;okraj: 0;} Jakmile nastavíte základy položek seznamu, můžete začít hrát s tím, jak vypadá nabídka v oblasti odkazů. První styl UL # navigace LI Aa potom Odkaz, A: navštívil, A: vznášejte se, a A: aktivní (pokud je chcete). U odkazů se mi líbí, že odkazy vytvoří blokový element (spíše než výchozí in-line). To nutí je, aby zvedli celý prostor LI- a fungují spíše jako odstavec, který jim usnadňuje styl jako tlačítka na menu. Další věc, kterou vždycky dělám, je odstranění podtržení ( textová výzdoba: žádná;), protože to dělá tlačítka vypadat spíš jako tlačítka pro mě. Samozřejmě, váš návrh se může lišit. ul # navigace li a {zobrazení: blok;textová výzdoba: žádná;polstrování: .25em;hranice dolní: solidní 1px # 39f;hranice-pravé: solidní 1px # 39f;} Všimněte si, že s zobrazení: blok; nastavit na odkazy, celé pole položky nabídky je možné klikat, ne jen písmena. To je také dobré pro použitelnost. Ujistěte se, že chcete nastavit barvy odkazu (odkaz, navštívené, pohyblivé a aktivní), chcete-li, aby se lišily od výchozí modré, červené a fialové. a: odkaz, a: navštívil {color: #fff; }}a: vznášet se, a: aktivní {color: # 000; }} Také jsem rád dal trochu víc pozornosti stavu vznášení se změnou barvy pozadí. a: podržte {background-color: #fff; }} Pokud chcete více příkladů vertikálních nabídek, podívejte se do níže uvedeného seznamu. Vytváření vodorovných navigačních menu je trochu obtížnější než vertikální navigační nabídky, protože musíte kompenzovat skutečnost, že seznamy HTML dávají přednost vertikálnímu zobrazení. Stejně jako u horizontálního menu nejprve vytvořte seznam navigačních menu:
Chcete-li vytvořit horizontální nabídku, pracujte stejně jako u vertikální nabídky. Začněte s vnějškem a pracujte dovnitř. Protože chci, aby moje navigace byla spuštěna v levém rohu, nastavila jsem ji levým okrajem a polstrováním a já jsem to plaval doleva. Měli byste také mít zvyk nastavit šířku tak, aby vaše menu nepokládalo více či méně místa, než máte v úmyslu. U vodorovných nabídek je to obvykle celá šířka návrhu. Také jsem přidal barvu pozadí do celého seznamu, aby bylo snazší číst. ul # navigation {plavat vlevo;okraj: 0;polstrování: 0;šířka: 100%;barva pozadí: # 039;} Ale tajemství vodorovného navigačního menu je v položkách seznamu. Položky seznamu jsou obvykle blokové prvky, což znamená, že budou mít před a za každou novou řádku. Přepnutím displeje z blok na v souladu, vynucujete seznam prvků, které se mají navzájem zarovnat vodorovně. ul # navigace li {zobrazení: inline; }} S odkazy jsem zacházel přesně tak, jak jsem s nimi zacházel ve vertikálním navigačním menu se stejnými barvami a textovou výzdobou. Přidala jsem horní okraj k vymezení knoflíků, když jsou přesunuty. Jediná věc byla odstraněna zobrazení: blok; jakmile se nové řádky vrátí a zničí horizontální menu. ul # navigace li a {textová výzdoba: žádná;polstrování: .25em 1em;hranice dolní: solidní 1px # 39f;hranice: solid 1px # 39f;hranice-pravé: solidní 1px # 39f;}a: odkaz, a: navštívil {color: #fff; }}ul # navigace a: hover {barva pozadí: #fff;barva: # 000;} Dalším aspektem kódu HTML je identifikátor jsi tady. Chcete-li změnit nabídku, abyste označili aktuální polohu svých uživatelů, jednoduše je použijte ID definovat jinou barvu pozadí nebo jiný styl. Přesuňte tento atribut ID na správnou položku nabídky na jiných stránkách, aby byla aktuální stránka vždy zvýrazněna. ul # navigace li # youarehere {barva pozadí: # 09f; }} Pokud tyto styly umístíte na svou stránku, můžete vytvořit horizontální nebo vertikální lištu nabídek, která pracuje s vaším webem, ale rychle se stáhne a v budoucnu se snadno aktualizuje. Použití XHTML + CSS změní vaše seznamy na velmi výkonný nástroj pro návrh. Pokud chcete více příkladů horizontálních nabídek, postupujte podle následujících pokynů.
Horizontální navigační nabídka
Nacházíte se zde
