ßê çðîáèòè ìåíþ, ùî âèïàäàº
Êðàñèâå ìåíþ, ùî âèïàäຠìîæíà ñòâîðèòè íå ò³ëüêè â javascript, àëå ³ âèêîðèñòîâóþ÷è ñòàíäàðòí³ òåãè HTML. Òàêèé ñïîñ³á ñòâîðåííÿ ìåíþ, ùî âèïàäຠáóäå êîðèñíèé òèì, õòî ò³ëüêè ïî÷èíຠñâî¿ ïåðø³ êðîêè â ñòâîðåíí³ ñàéò³â ³ õî÷å ñïðîñòèòè ðîáîòó ç³ ñòâîðåííÿ ìåíþ íà ñòîð³íêàõ.
1
Ó êîä³ HTML òàêå ìåíþ º íåíóìåðîâàíèé ñïèñêîì ç âêëàäåíèìè ñïèñêàìè âñåðåäèí³. Äëÿ ïî÷àòêó ñòâîð³òü ôàéë style.css ³ ñêîï³þéòå òóäè íàñòóïíèé CSS-êîä, íåîáõ³äíèé äëÿ îôîðìëåííÿ òà ôîðìàòóâàííÿ ìåíþ:
#nav, #nav ul {
list-style: none-
margin: 0-
padding: 0-
border: 1px solid # 000-
background: # 515151-
float: left-
width: 100% -
}
#nav li {
float: left-
position: relative-
background-color: # 003366-
back ground: none-
}
#nav li ul {
display: none-
position: absolute-
background-color: # 003366-
padding: 8px 0-
width: 138px-
}
#nav, #nav ul {
list-style: none-
margin: 0-
padding: 0-
border: 1px solid # 000-
background: # 515151-
float: left-
width: 100% -
}
#nav li {
float: left-
position: relative-
background-color: # 003366-
back ground: none-
}
#nav li ul {
display: none-
position: absolute-
background-color: # 003366-
padding: 8px 0-
width: 138px-
}
2
Òåïåð ïîòð³áíî äîïîâíèòè ïóíêòè ìåíþ îôîðìëåííÿì. Âèçíà÷òå äëÿ íèõ øèðèíó ³ âèñîòó, ïðèáåð³òü ë³í³¿ ï³äêðåñëåííÿ, çàäàéòå ÷³òêó øèðèíó êîæíîãî ïîñèëàííÿ, à òàêîæ âêàæ³òü ïîòð³áí³ êîëüîðè áåêãðàóíäó.
3
Äëÿ âñ³õ öèõ çì³í äîäàéòå â ôàéë íàñòóïíèé êîä:
#nav a {
color: # fff-
text-decoration: none-
display: block-
width: 120px-
padding: 4px 10px-
background-color: # 003366 repeat-y right-
}
#nav a: hover {
color: # 000-
background-color: # 0033FF-
}
#nav li: hover {
background-color: # 333333-
}
Ïîò³ì äîäàéòå íàñòóïíèé øìàòîê êîäó äëÿ îñòàòî÷íîãî äîîïðàöþâàííÿ ìåíþ:
#nav li: hover li ul {
display: none-
width: 138px-
top: -9px-
left: 133px-
}
#nav li: hover li: hover ul {
display: block-
}
#nav a {
color: # fff-
text-decoration: none-
display: block-
width: 120px-
padding: 4px 10px-
background-color: # 003366 repeat-y right-
}
#nav a: hover {
color: # 000-
background-color: # 0033FF-
}
#nav li: hover {
background-color: # 333333-
}
Ïîò³ì äîäàéòå íàñòóïíèé øìàòîê êîäó äëÿ îñòàòî÷íîãî äîîïðàöþâàííÿ ìåíþ:
#nav li: hover li ul {
display: none-
width: 138px-
top: -9px-
left: 133px-
}
#nav li: hover li: hover ul {
display: block-
}
4
Ó âàð³àíò³ HTML çàãàëüíèé íåíóìåðîâàíèé ñïèñîê ìåíþ âèãëÿäຠíàñòóïíèì ÷èíîì - íà éîãî îñíîâ³ ³ ñòâîðþºòüñÿ ìåíþ, ïðî ÿêèé ãîâîðèëîñÿ â ñòàòò³.
...
...
Ñòàòò³ çà òåìîþ "ßê çðîáèòè ìåíþ, ùî âèïàäàº"
Îö³í³òü, áóäü ëàñêà ñòàòòþ