Počítače, Softvér
Ako zarobiť rozbaľovacieho CSS menu
Dnes sa budeme zaoberať otázkou "Ako môžem vytvoriť drop-down menu CSS?". Treba povedať hneď, že táto položka bude bez pripájania akýchkoľvek dodatočných finančných prostriedkov. To znamená, že ponuka bude vytvorený iba pomocou CSS a HTML.
výcvik
Ak chcete plne pochopiť, čo je v ňom v tomto článku, budete potrebovať trochu zoznámiť s teoretickými materiálu. Ale ak ste oboznámení s pseudotried, môžete tento odsek preskočiť. Takže, pre vytvorenie vertikálneho drop-down menu CSS, potrebujeme prvok ako «: hover». Pseudo «: hover» môže byť priradená k žiadnemu HTML tagu. To umožňuje definovať okamih, kedy je položka nabehnutí. Napríklad sme menovaní vlastnosť: «a: hover {color: red;}». Tento záznam znamená, že keď nabehnete myšou to sčervená na obsahu akejkoľvek značky . Stojí za zmienku, že tento pseudo-element je tiež inaktivuje. Mimochodom, «: hover» rozprával podobné prvky. Ale z toho, že sa vytvorí drop-down menu pseudo CSS.
inštrukcia
Po prvé, poďme sa pochopiť, čo je to drop-down menu. Podľa tejto definície sa dostáva mnoho rôznych metód konštruujú rôzne rozloženia. V tomto prípade budeme analyzovať štruktúru skladajúci sa z niekoľkých trvalo viditeľné predmety a niekoľkých ďalších (skryté). Poďme dokončiť s teóriou a začať cvičiť.
- Tvoríme rozloženie nášho jedálneho lístka. K tomu, označovanie HTML kódu. Vytvorenie vnoreného zoznamu:
-
- < / ul>. Niečo také by mal vyzerať váš drop-down menu. CSS zasiahnuť neskôr. V tomto prípade je hlavnou zoznam sa skladá z troch hlavných oblastí a dvoch uzatvorených.
- Skryť sub-menu. K tomu používame štýlov, definovať nasledujúce vlastnosti: ul ul {display: none;} Tým sa odstráni prvky druhom zozname od premietacej plochy.
- Vytvorte CSS ponuky, rozbaľovací z hlavného zoznamu. Listy Cascading Style písať nasledujúce pravidlo: ul li: hover ul {display: block;}. Tento záznam znamená, že keď sa myš nad objaví sa na obrazovke ul prvkom li, ktorý sa nachádza v ul zoznamu (v prílohe). Na prvý pohľad sa takýto systém môže zdať zložitá a mätúce. Ale v skutočnosti je všetko veľmi jednoduché.
- Použitie tohto rozvrhnutie sami tým, že vloží tagy
- obsah. Môžete zmeniť počet prvkov zoznamu.
dekoračné zmeny
Akonáhle je štruktúra hlavného menu je pripravený, môžete pristúpiť k zápisu. Pravdepodobne mnohí v prvom rade ochotný zbaviť značiek označujúcich položku zoznamu. To sa vykonáva pomocou jediného vlastnosť CSS, a to list-style-type. Je nutné pridať nasledujúcu položku: Li {list-style-type: none;}. Potom môžete vložiť rámček a urobiť pozadie. Hraničný a pozadie vám s tým pomohli. Možno, že niektorí nie ako pull-down menu sa objaví ako pripojený zoznam, tlačí na rovnakých základných prvkov. Ak chcete tento problém odstrániť, môžete ho umiestniť. K tomu, kaskádové štýly napísať nasledovné položky: ul ul {pozície: absolútna; left: 15px; vpravo: 15px; Horná: 15 pixelov; dole: 15 pixelov;}. Samozrejme, že hodnoty, ktoré bude používať svoj vlastný. V závislosti na tom, kde chcete vidieť drop-down menu, bude CSS ponúka mnoho ďalších funkcií, ktoré možno pridať rôzne efekty a zdobia naše zoznamy.
záver
Opäť je potrebné poznamenať, výstavbu rozloženie menu. Ak chcete priradiť pravidlá CSS použité v tomto prípade vloženej hodnoty, napríklad ul ul. Ak ste v dokumente sa stretnúť s inými podobnú štruktúru, môže byť veľký problém. V týchto situáciách je nutné použiť konkrétny účel, napríklad, ovládača alebo id-ID. Vyššie uvedený drop-down menu layout článok je navrhnutý tak, aby zoznámiť všeobecný návrh. Zvyšok práce spočíva na vašich pleciach.
Similar articles
Trending Now