Podrobný průvodce
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 uživatele. 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 pracovat dovnitř. Mám tím na mysli, že nejprve styluji navigaci ul # a pak se přesunuju do li elementů a pak na 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 A a potom odkaz A: A: navštívený, A: vznášet 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 je nutí, aby ztratili 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í (text-decoration: none; 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 displejem: 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.
- Stylová vertikální nabídka
- Šablona základních vertikálních nabídek
- Stylizované vertikální menu s vámi
- Šablona základního vertikálního menu s vámi se nacházíte zde
Horizontální navigační nabídka
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. Tím, že přepnete displej z bloku na inline, vynucujete seznam prvků seznamu, které se budou 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é, co jsem odstranil, byl displej: 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;
}}
Nacházíte se zde
Dalším aspektem HTML je identifikátor youarehere. Chcete-li upravit nabídku a uvést aktuální umístění vašich uživatelů, jednoduše použijte toto ID k definování jiné barvy pozadí nebo jiného stylu. Přesuňte tento atribut ID do správné položky nabídky na jiných stránkách tak, 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ů.
- Stylová horizontální nabídka
- Šablona základní horizontální nabídky
- Stylová horizontální nabídka s vámi
- Základní šablona horizontálního menu s vámi zde