Vitajte na [www.pocitac.win] Obľúbené stránky

Domáce Hardware Siete Programovanie Softvér Otázka Systémy počítačový

Ako vytvoriť rozbaľovaciu ponuku HTML a podponuku

Rozbaľovacie ponuky - známe tiež ako ponuky „suckerfish“ - používajú pre štruktúru a štýl kombináciu HTML a CSS (Cascading Style Sheets). Časť HTML rozbaľovacej ponuky pozostáva zo zoznamov odrážok a vnorených zoznamov odrážok. Po úprave panela s ponukami a hlavných navigačných prepojení v CSS môžete vnorené zoznamy odrážok upraviť ako podponuky. Selektor ": hover" v CSS vám umožňuje zmeniť vlastnosť zobrazenia skrytého podponuku na "block", aby sa znova objavil.

Krok 1

Kódujte svoju ponuku v HTML pomocou "

"a"

"značky:

Link 1

Link 2

Link 3

Pred koniec zoznamu pridajte div-clear. Do triedy „clearfix“ pridáte štýl, aby sa pozadie ponuky roztiahlo nadol.

Krok 2

Pridajte svoje podponuky ako nový neusporiadaný zoznam vnorený v rámci značiek „

“ nadradeného odkazu:

Link 1

Link 2

Link 1

Link 2

Link 3

Link 3

Krok 3

Otvorte svoju šablónu so štýlmi a upravte svoje menu pomocou CSS. Odstráňte guľky aj ľavú zarážku: #menu {list-style: none; čalúnenie: 0; } Všimnite si, že "#menu" zodpovedá názvu ID príkladu kódu HTML.

Krok 4

Do panela s ponukami pridajte farbu pozadia: #menu {list-style: none; čalúnenie: 0; farba pozadia: tmavo modrá; }

Krok 5

Položte položky ponuky doľava tak, aby sa vodorovne zarovnali na lište ponuky: #menu li {float: left; }

Krok 6

Upravte prepojenia, ktoré tvoria položky ponuky. Pridajte do odkazov čalúnenie, aby ste ich na lište ponuky zarovnali zvislo nahor a aby ste na ne jednoduchšie klikali a umiestnili kurzor myši. Ak chcete pridať odkazy na odkazy, musíte zmeniť vlastnosť „display“ na „block“: #menu li a {display: block; čalúnenie: 8px 15px; zarovnanie textu: stred; farba: biela; font-weight: bold; dekorácia textu: žiadna; } Všimnite si, že v „odsadení“ boli nastavené dve hodnoty. Prvou hodnotou je vertikálne čalúnenie, zatiaľ čo druhým efektom je vodorovné čalúnenie.

Krok 7

Upravte štýl podponuky a jej položiek. Najprv musíte umiestniť podponuku. Odstráňte aj guľky a čalúnenie z podmenu: #menu ul {position: absolute; štýl zoznamu: žiadny; čalúnenie: 0; }

Krok 8

Odstráňte ľavé plaváky z položiek v podponukách: #menu ul li {clear: left; }

Krok 9

Pridajte do pravidla „#menu ul“ pravidlo „dsiplay: none“, čím vypnete podponuku, pretože nechcete, aby sa zobrazovala, pokiaľ sa používateľ nepresunie nad svoju nadradenú položku. Zobrazte menu znova pomocou tohto kódu: #menu li: hover ul {dipslay: block; }

Pridajte do svojho súboru div: .clearfix {clear: both; }

Tipy

Pridajte k svojim položkám ponuky zvýraznenie, keď na ne používateľ prejde. Pravidlo štýlu na zmenu farby pozadia odkazu s kurzorom vyzerá ako „#menu a: hover {}“.

Po dokončení vytvárania ponuky pomocou HTML a CSS môžete pridať doplnok jQuery, pomocou ktorého môžete vytvárať rozbaľovacie animácie.

Copyright © počítačové znalosti Všetky práva vyhradené