အဆန္းေလးFloating Vertical Navigation Menu လို႕ေခၚပါတယ္။ေရာက္ခဲ့ဖူးတဲ့ဘေလာ့ဂါ
မိတ္ေဆြေတြသံုးတာေတာ့့ျမင္ဖူးပါဘူး၊မေရာက္ဖူးတဲ့ေနရာေတြမွာသံုးတဲ့သူေတြလည္းရိွရင္လည္း
ရွိမွာပါ။ဒီFloating Vertical Navigation Menu ကသံုးရတာအရမ္းကိုအဆင္ေျပပါတယ္။သူက
side menu လိုဘဲအေပၚေအာက္ကို Auto အဆင္းအတက္လုပ္ပါတယ္၊ေအာက္မွာ Demo နဲ႕ပံု
DEMO
ပထမဆံုးCSSအပိုင္းကိုသြားျပီးေအာက္ကCodeကိုရွာပါ
]]></b:skin>
ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ၊
#floatMenu { position:absolute; top:150px; left:50%; margin-left:235px; width:200px; } #floatMenu ul { margin-bottom:20px; } #floatMenu ul li a { display:block; border:1px solid #999; background-color:#222; border-left:6px solid #999; text-decoration:none; color:#ccc; padding:5px 5px 5px 25px; } #floatMenu ul.menu1 li a:hover { border-color:#09f; } #floatMenu ul.menu2 li a:hover { border-color:#9f0; } #floatMenu ul.menu3 li a:hover { border-color:#f09; }
ဒုတိယအဆင့္ကေတာ့ေအာက္က Code
]]></b:skin>
ေအာက္မွာ ေအာက္က Code ေတြကိုထပ္ထည့္ေပးလိုက္ပါ၊ <script language='javascript' src='http://files-teckzest.bravehost.com/jquery.js'/> <script language='javascript' src='http://files-teckzest.bravehost.com/jquery.dimensions.js'/> <script language='javascript'> $(document).ready(function(){ // code will go here }); $(document).ready(function(){ $(window).scroll(function () { // code will go here }); }); var name = "#floatMenu"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { // code will go here }); }); var name = "#floatMenu"; var menuYloc = null; $(document).ready(function(){ menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px"))) $(window).scroll(function () { var offset = menuYloc+$(document).scrollTop()+"px"; $(name).animate({top:offset},{duration:500,queue:false}); }); }); </script>ေနာက္ဆံုးအဆင့္ကေတာ့ dashboard>>>>>layout>>>>>add a page element>>>>>html/javascript
<div id="floatMenu"> <ul class="menu1"> <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;"> အမည္ထည့္ရန္ </a></li> </ul> <ul class="menu2"> <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;"> အမည္ထည့္ရန္ </a></li> <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;"> အမည္ထည့္ရန္ </a></li> <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;"> အမည္ထည့္ရန္ </a></li> </ul> <ul class="menu3"> <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;"> အမည္ထည့္ရန္ </a></li> </ul> </div>မိမိၾကိဳက္တဲ့ေနရာမွာထားလိုက္ေပါ့ေနာ္ ျပီးပါျပီ၊၊၊၊
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊ ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု
( ::::: ပိုစ့္တင္သူ-ေခ်ာကိုကို ::::: )
ကၽြန္ေတာ္တင္သမွ် Post ေတြကို Facebook မွ တုိက္ရုိက္ဖတ္ရႈလို႔ပါက >>
နည္းပညာႏွင့္ေဆာ့ဝဲလ္မ်ား Page ကိုႏွိပ္ျပီး Like လုပ္ထားေပးပါ၊၊
႐ိုး႐ွင္းေသာနည္းပညာမ်ားကို ဆန္းသစ္စြာတင္ဆက္မည္။
အားလံုးကိုခင္မင္လ်ွက္။
Admin & CKK - နည္းပညာ