Snadno použitelný navigační systém je pro každou webovou stránku velmi důležitý.
S CSS můžete změnit nudné nabídky HTML na pěkně vypadající navigační lišty.
Navigační lišty \u003d Seznam odkazů
Navigační lišta používá jako základ standardní HTML.
V našich příkladech vytvoříme navigační lištu z běžného seznamu HTML.
Navigační lišta je v podstatě seznam odkazů, tedy s použitím prvků
- a
- docela logické:
Příklad
- inline, kromě výše uvedeného „standardního“ kódu:
Vysvětlení příkladu:
- display: inline; - Výchozí položky
- jsou hranaté. Zde odstraníme konce řádků před a za každou položkou seznamu, abychom je zobrazili na jednom řádku.
Plovoucí seznam položek
Příklad
li
{
plavat vlevo;
}
a
{
displej: blok;
šířka: 80px;
barva pozadí: #dddddd;
}
Komentář: U prvků vždy určete šířku ve svislé navigační liště. Pokud vynecháte šířku, může IE6 zobrazit neočekávané výsledky.
Vodorovná navigační lišta
Existují dva způsoby, jak vytvořit vodorovnou navigační lištu. Použitím vložený nebo plovoucí seznam položek.
Obě metody fungují dobře, ale pokud chcete, aby všechny odkazy měly stejnou velikost, musíte použít plovoucí metodu.
Integrované položky seznamu
Jedním ze způsobů, jak vytvořit vodorovnou navigační lištu, je vytvořit položky
Horizontální
Navigační lišta
Snadná navigace je nezbytná pro všechny webové stránky.
S CSS můžete proměnit nudné nabídky HTML na krásné navigační lišty
Letecký panel \u003d seznam odkazů
Navigační lišta potřebuje jako základ standardní HTML.
V našich příkladech vytvoříme navigační lištu ze standardního seznamu HTML.
Navigační lišta je v podstatě seznam odkazů, tedy s použitím prvků
- a přirozeně
- :
Příklad
- Domov
- zprávy
- Kontakty
- O nás
Nyní odstraníme odrážky, okraje a polstrování ze seznamu:
Příklad vysvětlení:
- list-style-type: none; - Odstraní značky. Navigační lišta nepotřebuje pro seznam odrážky
- Nastavit okraj: 0; a výplň: 0; odebrat výchozí nastavení prohlížeče
Kód ve výše uvedeném příkladu je standardní kód, který se používá na vertikálních i horizontálních navigačních pruzích.
Svislá navigační lišta
Chcete-li vytvořit svislou navigační lištu, musíte prvek stylovat v seznamu kromě výše uvedeného kódu:
Vysvětlení příkladu:
- displej: blok; - Zobrazení odkazů jako blokových prvků tvoří oblast klikatelných odkazů (nejen textu) a umožňuje vám určit šířku (a odsazení, okraje, výšku atd., Co chcete).
- šířka: 60px; - Blokové prvky zabírají celou šířku, která je ve výchozím nastavení k dispozici. Chceme nastavit šířku na 60px
Můžete také nastavit šířku
- a odstraňte šířku protože zaberou plnou šířku, která je k dispozici, když se zobrazí jako prvky bloku. Výsledkem bude stejný výsledek jako v předchozím příkladu:
- nebo centrované odkazy.
Přidat vlastnost ohraničení do
- ... Přidejte hranice kolem navigace. Pokud chcete také nastavit ohraničení uvnitř panelu, musíte přidat ohraničení ke všem prvkům
- , kromě posledního:
Opravená vertikální navigace
Vytvořte "pevnou" boční navigační lištu plné výšky:
Příklad
ul (
Editor kódu "
list-style-type: none;
okraj: 0;
výplň: 0;
šířka: 25%;
barva pozadí: # f1f1f1;
výška: 100%; / * Plná výška * /
pozice: pevná; / * Vydržte, i na svitcích * /
přepad: auto; / * Povolit posouvání, pokud má sidenav příliš mnoho obsahu * /
}Poznámka: Tento příklad nemusí fungovat správně na mobilních zařízeních.
Vodorovná navigační lišta
Existují dva způsoby, jak vytvořit vodorovnou navigační lištu. Použitím vložený nebo plovoucí seznam položek.
Vložené položky seznamu
Jedním ze způsobů, jak vytvořit vodorovnou navigační lištu, je zadání položek
- jako vestavěný, kromě „standardu“ ve výše uvedeném kódu:
Vysvětlení příkladu:
- display: inline; - Ve výchozím nastavení prvky
- jsou prvky bloku. Zde odstraníme konce řádků před a za každou položkou seznamu, abychom je zobrazili na jednom řádku.
Položky plovoucího seznamu
Další způsob, jak vytvořit vodorovnou navigaci, plovoucí prvky
- musí poskytnout umístění navigačních odkazů:
Vysvětlení příkladu:
- plavat vlevo; - Použijte plovák k tomu, aby blokové prvky plavaly vedle sebe
- displej: blok; - Zobrazení odkazů jako blokových prvků tvoří celou oblast klikatelných odkazů (nejen text), umožňuje nám určit výplň (a výšku, šířku, okraje atd., Pokud chcete)
- polstrování: 8px; - Protože prvky bloku zabírají celou dostupnou šířku, nemohou se vznášet vedle sebe. Zahrňte proto některé doplňky, aby vypadaly krásně
- barva pozadí: #dddddd; - Ke každému prvku přidejte šedé barvy pozadí
Rada: Přidat barvu pozadí: #dddddd; v
- pro každý prvek takže barva pozadí je plná šířka:
- Domov
- zprávy
- Kontakty
- O nás
- Snadnost použití;
- Měla by být vytvořena navigace ve všech částech webu;
- Každá stránka webu musí mít výstup na hlavní stránku;
- Přejít na libovolnou stránku webu s maximálně 3 kliknutími.
- Vytvoření nabídky webových stránek - toto je jedna z pozic, kam budete muset vložit potřebný odkaz do href \u003d "#";
Příklady vodorovné navigační lišty
Vytvořte základní vodorovnou navigační lištu s tmavou barvou pozadí a změňte barvu pozadí odkazů, když na ně umístíte ukazatel myši:
Příklad
ul (
list-style-type: none;
okraj: 0;
výplň: 0;
přepad: skrytý;
barva pozadí: # 333;
}li (
plavat vlevo;
}li a (
Editor kódu "
displej: blok;
barva bílá;
zarovnání textu: na střed;
polstrování: 14px 16px;
textová výzdoba: žádná;
}Aktivní a aktuální navigační odkaz
Zarovnejte seznam doprava
Odkazy zarovnejte doprava přesunutím položek seznamu doprava float: right; :
Příklad
Pro pohodlnou navigaci na webu potřebujete navigaci, kterou jsem vytvořil pomocí skriptů HTML a CSS. Výsledkem mé práce jsou 2 typy nabídek (vertikální a horizontální). A teď se vám pokusím říct o úkolech, které by podle mého názoru měla nabídka pro web provádět:
Zde se pokusím co nejvíce shrnout materiál o vytvoření nabídky, připravit se, mnoho může mít potíže, alespoň pro mě vznikly. Pojďme tedy začít!
Nejprve vám řeknu, jak na to. Nejprve napíšeme skript do šablony stylů:
#navigation (width: 560px; height: 50px; margin: 0; padding: 0; background-image: url (img / gor_menu.jpg); background-repeat: no-repeat; background-position: center;) #navigation ul (list-style: none; margin: 0; padding: 0;) #navigation ul li (display: inline; margin: 0px;) #navigation ul li a (výška: 28px; display: block; float: left; color: # 333333; text-decoration: none; font-family: Arial; font-size: 12px; font-weight: bold; background-image: url (img / menu_separatorline.jpg); background-repeat: no-repeat; background- position: right center; padding-top: 17px; padding-right: 15px; padding-bottom: 0; padding-left: 15px;) #navigation ul li a: hover (color: #FFF; background-image: url (img /button_hover.jpg); background-repeat: repeat-x; background-position: left top;) #navigation ul li # active a (background-image: url (img / button_hover.jpg); background-repeat: repeat-x ; Pozice na pozadí: vlevo nahoře;)
Nebojte se, že s tímto kódem není nic špatného. Aby vám to bylo jasnější, okamžitě napíšu HTML kód pro tuto nabídku:
Jak vidíte, jedná se o seznam, který bez šablony stylů není nic dobrého. Operátor div volá proměnné z externí šablony stylů CSS, pak se náš seznam transformuje a promění se v pěkné, podle mého názoru vodorovné menu.
Nyní si musíte trochu vyjasnit, co se na co vztahuje, pak si myslím, že na to sami přijdete:
- obsahuje celou strukturu nabídky. Bude do něj vložen horní obrázek, který jsem předem připravil ve Photoshopu;
- tělo nabídky, obsahuje neuspořádaný seznam. Bude do něj vložen obrázek, který se bude vertikálně opakovat a vytvoří pozadí. Možná jsem zvolil příliš jasné barvy, ale podle mého názoru nebolí oči;
- obsahuje kostru samotného menu;
- , kromě posledního:
Příklad svislé navigační lišty
Vytvořte základní svislou navigační lištu se šedou barvou pozadí a změňte barvu pozadí odkazů, když na ně umístíte ukazatel myši:
Příklad
ul (
list-style-type: none;
okraj: 0;
výplň: 0;
šířka: 200px;
barva pozadí: # f1f1f1;
}li a (
displej: blok;
barva: # 000;
polstrování: 8px 16px;
textová výzdoba: žádná;
}/ * Změňte barvu odkazu při najetí myší * /
Editor kódu "
li a: hover (
barva pozadí: # 555;
barva bílá;
}Vycentrujte odkazy a přidejte ohraničení
Přidat zarovnání text-align: center to
- inline, kromě výše uvedeného „standardního“ kódu: