Ang mga drop-down na menu sa mga pahina ng site ay ginagamit upang makatipid ng puwang at magbigay ng isang lohikal na pagtatanghal ng istraktura ng isang mapagkukunan sa web. Maraming mga paraan upang maipatupad ang sangkap na ito, ang isa sa pinakasimpleng ibinigay sa ibaba.
Kailangan iyon
Pangunahing kaalaman sa mga wikang HTML at CSS
Panuto
Hakbang 1
Ang HTML code ng menu ay gumagamit ng mga naka-salang elemento ng listahan (UL at LI), sa loob kung saan inilalagay ang mga link sa mga pahina. Hindi ito naglalaman ng anumang mga kumplikadong istraktura. Ang dynamics ay ipinatupad sa pamamagitan ng CSS, ang bloke ng paglalarawan na kung saan ay nakalagay nang direkta sa source code ng pahina. Walang espesyal tungkol dito, bukod dito, naglalaman ang teksto ng ilang mga paliwanag ng layunin ng ilang mga bloke ng estilo.
Hakbang 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Drop-down na menu * {
font-family: Verdana;
laki ng font: 14px;
} ul, li, a {
padding: 0;
ipakita: harangan;
hangganan: 0;
margin: 0;
} ul {
hangganan: 1px solid #AAA;
lapad: 150px;
list-style: wala;
background: #FFF;
} li {
background-color: #AAA;
posisyon: kamag-anak;
z-index: 9;
padding: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
posisyon: ganap;
itaas: 5px;
kaliwa: 111px; / * para sa mga browser ng IE * /
}
li.folder> ul {left: 140px;} / * para sa iba pang mga browser * / a {
padding: 2px;
hangganan: 1px solid #FFF;
dekorasyon sa teksto: wala;
lapad: 100%; / * para sa mga browser ng IE * /
kulay: # 000;
font-weight: naka-bold;
}
li> isang {lapad: auto;} / * para sa iba pang mga browser * / li a {
lapad: 140px;
ipakita: harangan;
} li a.submenu {
kulay ng background: dilaw;
} / * Mga Link * /
a: mag-hover {
kulay-hangganan: kulay-abo;
kulay sa background: # FF0000;
kulay itim;
}
li.fold a: mag-hover {
kulay sa background: # FF0000;
} / * Mga Folder * /
ul ul, li: hover ul ul {display: none;}
li.fold: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Pahina
-
2. Folder
- 2.1 Pahina
-
2.2 Folder
- 2.2.1 Pahina
- 2.2.2 Pahina
- 2.2.3 Pahina
- 2.3 Pahina
-
3. Folder
- 3.1 Pahina
- 3.2 Pahina
- 3.3 Pahina
- 4. Pahina
Hakbang 3
Maaari kang magdagdag ng suporta para sa mga mas lumang bersyon ng mga browser ng Internet Explorer sa code na ito - ipinapatupad ito gamit ang JavaScript (ni Peter Nederlof). Kailangan mong i-download ang file na may kinakailangang code, halimbawa, mula sa link na ito - https://peterned.home.xs4all.nl/htc/csshover3.htc. Dapat itong mailagay sa parehong folder bilang pangunahing pahina. At sa paglalarawan ng mga estilo ng pangunahing pahina, magdagdag ng isang link dito - maaari itong mailagay nang direkta pagkatapos ng tag ng istilo ng pagbubukas: / * para sa mga lumang browser ng IE *
katawan {pag-uugali: url ("csshover3.htc");}
