Ať už je navigační nabídka vašeho webu vodorovný řádek nahoře nebo svislý řádek dole, je to jen seznam. Při navrhování webová navigace, je navigační nabídka skupina odkazů. Při programování navigace pomocí XHTML + CSS můžete vytvořit nabídku, která je malá ke stažení (XHTML) a snadno přizpůsobitelná (CSS).
Začínáme
Chcete-li vytvořit seznam pro navigaci, musíte použít seznam. Může to být standardní neuspořádaný seznam, který byl identifikován jako navigace. Například:
- Domov
- produkty
- Služby
- Kontaktujte nás
Při pohledu na HTML má odkaz Domů ID.
jsi tady
To vám umožní vytvořit nabídku, která identifikuje aktuální umístění vašich čtenářů. I když právě neplánujete mít tento typ vizuální narážky na svém webu, můžete tyto informace zahrnout. Pokud se rozhodnete přidat narážku později, budete mít méně času na přípravu svého webu.
Bez žádného Styl CSS, tato nabídka XHTML vypadá jako standardní neuspořádaný seznam. K dispozici jsou odrážky a položky seznamu jsou mírně odsazeny. Při použití
zástupné odkazy, většina prohlížečů nezobrazuje odkazy jako klikatelné (podtržené a modré). Když vložíte HTML na webovou stránku, bude vaše navigace vypadat takto:- Domov
- produkty
- Služby
- Kontaktujte nás
To nevypadá moc jako nabídka. S několika styly CSS přidanými do seznamu však můžete vytvořit nabídku, na kterou budete hrdí.
Pokud chcete více příkladů vertikálních nabídek, vyhledejte na webu následující položky:
- Stylizované vertikální menu
- Základní šablona vertikálního menu
- Stylové vertikální menu s textem Jste tady
- Základní vertikální šablona nabídky s textem Jste tady
Nabídka vertikální navigace
Vertikální navigační nabídka se snadno píše, protože se zobrazuje stejným způsobem jako normální seznam: nahoru a dolů. Položky seznamu se zobrazují svisle dolů na stránce.
Při stylování nabídek začněte zvenčí a pracujte. Nejprve upravte styl navigace:
ul # navigace
Poté přejděte na prvky a odkazy. Nejprve definujte šířku nabídky. Tím je zajištěno, že pokud jsou položky nabídky dlouhé, položky nebudou tlačit zbytek rozložení nebo nezpůsobí vodorovné posouvání.
ul # navigation {width: 12em; }
Po nastavení šířky pracujte na položkách seznamu. To vám umožní nastavit věci jako barvy pozadí, ohraničení, zarovnání textu a okraje.
ul # navigation li {
styl seznamu: žádný;
barva pozadí: # 039;
border-top: solidní 1px # 039;
zarovnání textu: vlevo;
okraj: 0;
}
Poté, co nastavíte základy pro položky seznamu, pracujte na tom, jak vypadá nabídka v oblasti odkazů. Nejprve upravte styl navigace:
UL # navigace LI A
Potom upravte následující styl:
Odkaz
A: navštíveno
A: vznášet se
A: aktivní
U odkazů vytvořte z odkazů prvek bloku (spíše než výchozí in-line). To nutí odkazy, aby zabíraly celý prostor LI, a fungovaly jako odstavec, což usnadňuje styl odkazů jako tlačítka nabídky. Poté odeberte následující:
podtržení, výzdoba textu: žádné; tak jako
Díky tomu tlačítka vypadají spíše jako tlačítka. Váš design se může lišit.
ul # navigation li a {
displej: blok;
textová výzdoba: žádná;
polstrování: .25em;
spodní okraj: pevný 1px # 39f;
border-right: solid 1px # 39f;
}
S displej: blok; na odkazech lze kliknout na celé pole položky nabídky, nejen na písmena. To je také dobré pro použitelnost. Pokud chcete, aby se odkazy lišily od výchozí modré, červené a fialové, nastavte barvy odkazu (odkaz, navštíveno, najeďte myší a aktivní).
a: link, a: navštívil {color: #fff; }
a: hover, a: active {color: # 000; }
Stav přechodu můžete také věnovat trochu pozornosti změnou barvy pozadí.
a: hover {background-color: #fff; }
Nabídka horizontální navigace
Vytváření nabídek horizontální navigace je o něco obtížnější než nabídek vertikální navigace, protože musíte vyrovnat skutečnost, že seznamy HTML dávají přednost vertikálnímu zobrazení. Stejně jako u horizontální nabídky vytvořte seznam navigačních nabídek:
- Domov
- produkty
- Služby
- Kontaktujte nás
Chcete-li vytvořit horizontální nabídku, postupujte stejně jako u vertikální nabídky. Začněte s vnějškem a pracujte. Chcete-li spustit navigaci v levém rohu, nastavte ji s 0 levým okrajem a polstrováním a plovoucí ji vlevo.
Zvykněte si nastavovat šířku tak, aby vaše nabídka nezabrala více či méně místa, než jste zamýšleli. U vodorovných nabídek je to obvykle celá šířka designu. Můžete také přidat barvu pozadí do seznamu, aby bylo snazší číst.
ul # navigation {
plavat vlevo;
okraj: 0;
výplň: 0;
šířka: 100%;
barva pozadí: # 039;
}
Tajemství vodorovné navigační nabídky je v položkách seznamu. Položky seznamu jsou obvykle blokové prvky, což znamená, že tyto položky mají nový řádek před a za každým. Přepnutím zobrazení z bloku na inline vynutíte, aby se prvky seznamu zarovnaly vodorovně vedle sebe.
ul # navigation li {display: inline; }
S odkazy zacházejte stejně jako s vertikálním navigačním menu, se stejnými barvami a dekorací textu. Když uživatel umístí ukazatel myši na tlačítko, přidejte horní ohraničení k vymezení tlačítek. Poté odstraňte displej: blok; protože to vrací nové řádky zpět a ničí horizontální nabídku.
Jste zde Informace o poloze
Dalším aspektem HTML je tento identifikátor:
jsi tady
Pokud chcete upravit nabídku tak, aby označovala aktuální umístění vašich uživatelů, použijte toto ID k definování jiné barvy pozadí nebo jiného stylu. Přesuňte toto ID atributu do správné položky nabídky na jiných stránkách, aby byla aktuální stránka vždy zvýrazněna.
Pokud na stránku umístíte tyto styly, můžete vytvořit vodorovnou nebo svislou lištu nabídek, která funguje na vašem webu a rychle se stáhne a snadno se aktualizuje. Pomocí XHTML + CSS se vaše seznamy stávají výkonným nástrojem pro design.
Pokud chcete více příkladů vodorovných nabídek, vyhledejte na webu následující položky:
- Stylizované horizontální menu
- Šablona základní horizontální nabídky
- Stylové horizontální menu s textem Jste tady
- Základní šablona vodorovné nabídky s textem Jste tady