Pure Css Menu Dropdown Mingħajr użu Javascript
Din hija tutorja dwar kif tinħoloq pur Drop CSS down menu mingħajr l-użu javascript. I ndunat madankollu, li n-nies spiss jużaw JavaScript biex jinkiseb dan l-effett. Attwalment, hemm mod sempliċi biex tagħmel dan biss bl CSS.
Hawn hu l- eżempju
Ewwel pass: noħolqu struttura HTML bażiku.
> <Div id = "header"> <h1> Developer's demos Paradise </ h1> > <Ul id = "menu"> <li> <span> Home </ span> <ul> > Menu item 1 </a> </li> <li> <a href = "#"> partita Menu 1 </ a> </ li> > Menu item 2 </a> </li> <li> <a href = "#"> partita Menu 2 </ a> </ li> > Menu item 3 </a> </li> <li> <a href = "#"> partita Menu 3 </ a> </ li> </ Ul> </ Li> <li> <span> About Us </ span> <ul> > Menu item 1 </a> </li> <li> <a href = "#"> partita Menu 1 </ a> </ li> > Menu item 2 </a> </li> <li> <a href = "#"> partita Menu 2 </ a> </ li> > Menu item 3 </a> </li> <li> <a href = "#"> partita Menu 3 </ a> </ li> </ Ul> </ Li> <li> <span> Prodotti </ span> <ul> > Menu item 1 </a> </li> <li> <a href = "#"> partita Menu 1 </ a> </ li> > Menu item 2 </a> </li> <li> <a href = "#"> partita Menu 2 </ a> </ li> > Menu item 3 </a> </li> <li> <a href = "#"> partita Menu 3 </ a> </ li> </ Ul> </ Li> </ Ul> </ Div>
Tieni pass: issa għandna joħolqu magic kodiċi CSS
; padding : 0 ; } *} {Marġini: 0; ikkuttunar: 0; korp { ; isfond: # 222; Arial, Helvetica, sans-serif ; font: 100% normali Arial, Helvetica, sans-Serif; } : #fff ; } h1 {kulur: fff #;} # Header { ; għoli: 120px; pożizzjoni: relattivi; ; isfond: # 333; } # Menu { marġini: 0px; ikkuttunar: 0px; pożizzjoni: assoluta; ; top: 70px; display: block; } > # LI menu { -Lista istil tat-tip: xejn; float: xellug; display: block; ; marġini: 10px 0px; pożizzjoni: relattivi; ikkuttunar: 10px; wisa ': 100px; } ul { # Menu> LI: ul imbagħad jerġgħu { display: block; } { # Menu> LI: imbagħad jerġgħu { ; -Sfond kulur: # 808080; -Moz-konfinali-raġġ: 10px; -WebKit-konfinali-raġġ: 10px; } # Menu LI ul { marġini: 0px; ikkuttunar: 0px; display: none; } # Menu LI ul LI { -Lista istil tat-tip: xejn; ; marġini: 10px 0 0 0; Font-size: 11px; } # Menu LI ul LI a { display: block; ; padding: 10px 5px; ; kulur: fff #; Test-tiżjin: xejn; Font-piż: bold; } a { # Menu LI ul LI: imbagħad jerġgħu a { ; -Sfond kulur: # 606060; -Moz-konfinali-raġġ: 5px; -WebKit-konfinali-raġġ: 5px; } # Menu LI span { cursor: werrej; ; marġini: 10px 0px; Font-piż: bold; ; font-size : 11px ; kulur: fff #; font-size: 11px; }
Jekk jogħġbok innota li dan il-kodiċi ma taħdimx fil IE6 (dan il-browser foqra biss ma tkunx taf liema mezzi ul li>).
Inkun grat jekk inti tista 'tieħu t-tieni li jgħin jippromwovi blog tiegħi u jaqsmu din ir-rabta ma' xi siti favoriti tiegħek netwerking tuża l-link hawn taħt. Hawnhekk huwa link mas-sit tagħna preferuta jekk inti tixtieq li jirreġistraw isem ta 'dominju .
Artikli relatati:
jekk inti jgawdu qari dan l-artikolu, jekk jogħġbok iċċekkja oġġetti relatati oħra hawn taħt:























































Laura says dwar: 18 Settembru, 2009 fi 5:35 pm : Said
Attwalment inti tista 'tagħmel dan ix-xogħol fil IE6 jekk inti ma mind żżid ftit ta' JS / jquery u klassi oħra.
$ (Dan) addClass ("imbagħad jerġgħu").;
},
funzjoni () {
$ (Dan) removeClass ("imbagħad jerġgħu").;
});
Imbagħad biss dan li stylesheet tiegħek ...
Joe Amon jgħid dwar: 18 Set 2009 07:01 pm fi : Said
Għandi moħlija sigħat tipprova tikseb menu bħal dan ix-xogħol thats mhux kkumplikati wisq, mimli, tinvolvi JS jew folji stil crazy. Thank you daqshekk, tiegħek huwa faċli, nadif u l-aħjar stajt tidher. Biex ħażin għalija I ma jiskopru din il-kariga qabel.
Xorta, waħda ostaklu aktar qabel menu tiegħi isir. Tista 'tgħin jekk jogħġbok? Irrid li l-sub menu li jidher fuq imbagħad jerġgħu menu prinċipali li jkollhom wisa 'fissa - akbar mill-menu prinċipali - biex jakkomodaw tags rabta akbar. I jistgħu jaġġustaw il-wisa dwar LI menu ul # ul, menu ul # LI ul LI jew saħansitra ul # menu LI ul LI au żid kulur fl-isfond - iżda l-isfond ma tkunx kompluta minħabba l-ikkuttunar bejn il-ul # menu LI ul LI's .
Grazzi għal darb'oħra.