Vytvořte nabídku CSS, která vypadne z hlavního menu
Většina lidí, kteří mají počítače, se vždy snaží připojit k internetu. Poté může každý navštívit různá místa jako uživatel. To může být hledání informací, zábavy, školení, her, chatování na fórech a další.
Přístupem na stránku webu vidí uživatel svůj obsah. Je to jako v knize, kterou chcete číst. Obsah je tvořen různými sadami odkazů, které přenášejí uživatele na jiné stránky zdroje nebo dokonce na jiné stránky. Tyto odkazy pomáhají uživatelům navigovat na internetu. Odkazy jsou seskupeny do samostatných bloků reprezentujících nabídku webu.
Funkčnost libovolného zdroje závisí do značné míry na tom, které menu se na něm používá. Nabídka stránek může mít jiný design, má vodorovnou nebo svislou orientaci, umístěnou v dolní, horní nebo boční, skryté, otevřené, rozbalovací, rozvinuté.
Horizontální rozbalovací nabídka CSS
Horizontální rozbalovací nabídka se používá k uspořádání navigace. struktura místa. Neměli byste zneužívat počet úrovní, které chcete investovat, nemělo by existovat více než dvě. S více úrovní uživatelů bude mnohem těžší najít potřebné informace. Dále podrobněji uvažujeme o způsobu vytváření menu.
Představte si nabídku CSS, která vypadne z hlavního vodorovného bloku. Zkuste úkol zkomplikovat a rozbalit nabídku CSS při pohybu myší. Musí existovat nějaký hlavní horizontální blok s odkazy, které představují položky menu. Po přesunutí myši nad těmito body by se měly otevřít další navigační body.
Chcete-li vytvořit rozbalovací nabídku CSS, budete potřebovat:
- Soubor HTML;
- Soubor CSS;
- obrázek pro pozadí.
Obraz na pozadí je pomocným prvkem pro zdokonalení návrhu a stylové nabídky.
Vytvořte html soubor
Stránky všech stránek mohou být statické nebo dynamické. Statická stránka webu při prohlížení v prohlížeči je zobrazena ve formě, ve které byl původně vytvořen. Dynamická stránka se vytvoří, když je v prohlížeči otevřena ze samostatných zásuvných stránek a dodatečný výstup informací z databáze. Ale v každém případě, pokud otevřete stránku pomocí zdrojového kódu prostřednictvím prohlížeče, zobrazí se stránka HTML hypertextového značení. Chcete-li vytvořit nabídku, musíte vytvořit stránku HTML a uložit ji do souboru HTML. Vytvořte c-menu, které takto vypadne z hlavního menu. Stránky HTML mohou být vytvořeny v libovolných textových editorech, ale je lepší použít specializované programy: Notepad ++ nebo Adobe Dremweaver CSS. Otevřete prázdnou stránku v editoru, zadejte potřebný kód a uložte jej pod názvem myindex.html. Komentáře lze přidat přímo do kódu, mezi speciální značky. které jsou pro tento účel použity v HTML.
Uspořádání stránky při vytváření rozbalovací nabídky horizontální nabídky CSS se bude lišit od obvyklého standardního menu, protože jsou potřebné položky seznamu
- nebo
- .
HTML kód
Je třeba poznamenat, že v HTML jsou všechny konstrukce mezi <> závorkami nazývány tagy. Štítky mohou být jednoduché a dvojice. Párová značka musí obsahovat dvě dvojice závorek <> a ve druhé dvojici struktura uvnitř začíná lomítkem /. V párovém štítku je první značka úvodní a druhá je zavírací.
Vytvořit kód:
Takže můžete vytvořit nekonečný počet položek a podnabídky. Na samém konci zavřete všechny spárované značky.
Vytváření souboru CSS
Soubor byl připojen k souboru HTML. styly styl.css potřebné nejen pro správné umístění nabídky na stránce webových stránek, ale také pro to, aby menu nabídlo nádherný vzhled a vytvořil jedinečný design webových stránek. Soubor CSS je vytvořen ve stejném editoru jako soubor HTML, ale na rozdíl od stránky HTML se uživatel zobrazí na výsledné stránce pouze výsledek souboru stylů. Navíc při přidávání komentářů do CSS je použit konstrukce / * Comment ... * / construct.
Kód CSS
Vytvořit kód:
/ * Rozbalovací nabídka CSS * /
tělo {/ * styl pro tělo stránky webu * /
pozadí: # 0814da; / * Barva pozadí * /
okraj: 0; / * Vnější polstrování * /
polstrování: 0; / * Interní polstrování * /
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; / * Rodina písem * /
}}
.example {/ * celého bloku nabídky * /
poloha: relativní; / * Umístění vzhledem k původu * /
pozadí: # ebecf7 url (../ images / vanbackground.jpg); / * Pozadí s obrázkem celé nabídky * /
šířka: 525px; / * Šířka celého bloku nabídky * /
výška: 384px; / * Výška celého bloku nabídky * /
hranice: 1px # 000 pevné; / * Tloušťka a styl ohraničení celého bloku nabídky * /
margin: 21px auto;
polstrování: 16px;
}}
/ * styly pro menu * /
.navigator, .navigator ul {/ * Blokový styl s číslem nečíslovaným * /
seznam: žádný; / * Zrušit značky pro seznam * /
okraj: 0;
polstrování: 0;
}}
.navigátor {/ * styl navigačního bloku * /
poloha: relativní;
}}
.navigator ul {/ * Styl neomezeného seznamu * /
výška: 0; / * Výška * /
vlevo: 0; / * Levá * /
přetečení: skryté; / * Část bloku je skrytá, pokud se nezapadá úplně do prostoru * /
poloha: absolutní; / * Děláme absolutní polohování * /
horní: 47px; / * Nad * /
}}
.navigator li {/ * Styl nečíslovaných položek * /
float: vlevo; / * Obal na levé straně * /
poloha: relativní;
}}
.navigator li a {/ * Styl položky seznamu nevyplněno * /
barva pozadí: # 7c75b7; / * Barva pozadí * /
hranice: 1px solid # 7c75b7;
barva: #fbfbff;
zobrazení: blok; / * Zobrazit po bloku. * /
velikost písma: 15px; / * Nastavte velikost písma * /
line-height: 34px; / * Rozteč řádků * /
polstrování: 6px 21px;
textová výzdoba: žádná; / * Text bez návrhu * /
přechod: 0,6s;
}}
.navigator li: hover> a {/ * Styl položek v nečíslovaném seznamu při pohybu vzad * /
pozadí: # 8fcb38;
okrajová barva: # 7c75b7;
barva: #fbfbff;
}}
.navigator li: hover ul.vipadnoe {/ * Rozbalovací nabídka stylu přesunu kurzoru * /
výška: auto;
šířka: 181px;
}}
.navigator ul li {/ * Seznam stylů a položek * /
-moz-přechod: 0,7s;
}}
.navigator li ul li {/ * Styl položky-seznam-položka * /
-moz-transition-delay: 1s;
}}
.navigator li: hover ul li {/ * Podržte styl myši * /
}}
.navigator ul li a {/ * Seznam styl-položka-odkaz * /
pozadí: # 7c75b7;
okrajová barva: # 7c75b7;
barva: #fbfbff;
line-height: 2px;
-moz-přechod: 1,7s;
-o-přechod: 1,7s;
-webkit-transition: 1,7s;
přechod: 1,7s;
}}
.navigator li: hover ul li a {/ * Vznášející se styl item-list-item-link * /
řádková výška: 36px;
}}
.navigator ul li a: hover {/ * styl seznamu-položka plus odkaz na vznášení * /
pozadí: # 8fcb39;
obrázek-pozadí: rgba (41,137,216,0.5);}
Po vytvoření souborů myindex.html a style.css je třeba je umístit do samostatné složky. Pro pohodlí vytvoříme ve složce "Dokumenty" samostatnou ukázkovou složku a v ní složku CSS, do které umístíme soubor style.css a složku obrázků, do níž umístíme obrázek pozadí specifikovaný v souboru stylů. V souboru myindex.html nevytváříme jinou samostatnou složku a umístíme ji do demo složky, která byla původně vytvořena. Nyní otevřením souboru myindex.html v prohlížeči můžete vidět horizontální nabídku CSS, která se zobrazí při pohybu myši. To je všechno.
Stejným způsobem je na CSS vytvořeno vertikální rozbalovací menu, ale pouze pro něj budete muset vytvořit trochu jiný stylový styl.