Kp3နည္းပညာ၊၄၇၅၊ဘေလာ့မွာFacebookStyleDropDownMenuသံုးခ်င္ရင္
က်ေနာ္Menuေကာင္းေလးထပ္တင္ေပးလိုက္ပါတယ္။နည္းပညာသစ္ျဖစ္တဲ့မိမိရဲ႕ဘေလာ့ပိုစ္ကိုPasswordနဲ႕ေသာ့ခတ္နည္းကိုလည္းမနက္ကတင္တဲ့
Kp3နည္းပညာ၊၄၇၄၊မွာရွိပါတယ္။အခုတင္တဲ့Menuကေတာ့FacebookStyleDropDownMenuေလးပါသူမ်ားရဲ႕Menuနဲ႕မတူေအာင္သံုးခ်င္တဲ့ဘေလာ့
မိတ္ေဆြေတြအတြက္ပါ။ထံုးစံတိုင္းသြားၾကည့္လို႕ရေအာင္DEMOလင့္ခ္ေပးထားပါတယ္။ေအာက္မွာထည့္နည္းနဲ႕တကြMenuCodeေလးေပးထားပါတယ္။
ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစားျမဲေကပီသရီးမိသားစု
ဒီမွာ သြားၾကည့္လိုက္ပါ။
၁ ။Design
၂။Add a Gadgetကိုသြားျပီး HTML/JavaScript မွာေအာက္ကကုဒ္ကိုထည့္္ေပးလိုက္ပါ။
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္
Kp3နည္းပညာ၊၄၇၄၊မွာရွိပါတယ္။အခုတင္တဲ့Menuကေတာ့FacebookStyleDropDownMenuေလးပါသူမ်ားရဲ႕Menuနဲ႕မတူေအာင္သံုးခ်င္တဲ့ဘေလာ့
မိတ္ေဆြေတြအတြက္ပါ။ထံုးစံတိုင္းသြားၾကည့္လို႕ရေအာင္DEMOလင့္ခ္ေပးထားပါတယ္။ေအာက္မွာထည့္နည္းနဲ႕တကြMenuCodeေလးေပးထားပါတယ္။
ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစားျမဲေကပီသရီးမိသားစု
ဒီမွာ သြားၾကည့္လိုက္ပါ။
၁ ။Design
၂။Add a Gadgetကိုသြားျပီး HTML/JavaScript မွာေအာက္ကကုဒ္ကိုထည့္္ေပးလိုက္ပါ။
<style> #mbtnavbar { background: #3B5998; width: 100%; color: #FFF; margin: 10px 0; padding: 0; position: relative; border-top:0px solid #960100; height:35px; } #mbtnav { margin: 0; padding: 0; } #mbtnav ul { float: left; list-style: none; margin: 0; padding: 0; } #mbtnav li { list-style: none; margin: 0; padding: 0; } #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { color: #FFF; display: block; font:bold 12px Helvetica, sans-serif; margin: 0; padding: 9px 12px 11px 12px; text-decoration: none; border-right:0px solid #627AAD; } #mbtnav li a:hover, #mbtnav li a:active { background: #627AAD; color: #FFF; display: block; text-decoration: none; margin: 0; padding: 9px 12px 11px 12px; } #mbtnav li { float: left; padding: 0; } #mbtnav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 160px; margin: 0; padding: 0; } #mbtnav li ul a { width: 140px; } #mbtnav li ul ul { margin: -25px 0 0 161px; } #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul { left: -999em; } #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul { left: auto; } #mbtnav li:hover, #mbtnav li.sfhover { position: static; } #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited { background: #EDEFF4; width: 120px; color: #3B5998; display: block; font:normal 12px Helvetica, sans-serif; margin: 1px 0 0 0; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border:1px solid #ddd; -moz-border-radius:4px; -webkit-border-radius:4px; } #mbtnav li li a:hover, #mbtnav li li a:active { background: #627AAD; color: #FFF; display: block; } #mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited { background: #EDEFF4; width: 120px; color: #3B5998; display: block; font:normal 12px Helvetica, sans-serif; padding: 9px 12px 10px 12px; text-decoration: none; z-index:9999; border:1px solid #ddd; margin: 1px 0 0 -14px; } #mbtnav li li li a:hover, #mbtnav li li li a:active { background: #627AAD; color: #FFF; display: block; } </style> <div id='mbtnavbar'> <ul id='mbtnav'> <li> <a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ</a> </li> <li> <a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ</a> </li> <li> <a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ</a> </li> <li> <a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ</a> <ul> <li><a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ #1</a></li> <li><a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ #2</a></li> <li><a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ #3</a> <ul> <li><a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ #1</a></li> <li><a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ #2</a></li> <li><a href='ဒီမွာလင့္ခ္ထည့္ေပးပါ#'>လင့္ခ္အမည္ထည့္ပါ#3</a></li> </ul> </li> </ul> </li> </ul> </div>
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစခ်င္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္
No comments:
Post a Comment
aung-နည္းပညာမွ>>>> ေႏြေထြးစြာၾကိဳဆိုပါတယ္ဗ် ။ လင့္ေသေနတာေတြ အဆင္မေျပတာေတြေတြ႕ရွိခဲ့ရင္ [Comment]♥♥♥♥♥မွာ ေရးသားျပီးေျပာခဲ့ပါေနာ့္...မိတ္ေဆြတို႕ Commentေတြ႕ျပီဆိုတာႏွင့္ ျပန္ျပင္ေပးပါမယ္ခဗ်... လိုအပ္တာေတြရွိရင္လဲ Commentမွာ ေတာင္ဆိုႏိူင္ပါတယ္ေနာ္....အားလံုးကို ေက်းဇူးတင္ရွိပါတယ္ ။