kp3နည္းပညာ၊၉၂၊Floating Vertical Navigation Menu

Posted by KP-3မိသားစု | Labels: ,

အခ်ိန္မရလို႕အသစ္ေတြမတင္ျဖင့္တာၾကာသြားပါတယ္၊ဒါေၾကာင့္ဘယ္သူမွမသံုးဖူးတဲ့အသစ္
အဆန္းေလး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 = &quot;#floatMenu&quot;;
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () {
// code will go here
});
});
var name = &quot;#floatMenu&quot;;
var menuYloc = null;

$(document).ready(function(){
menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;
$(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မိသားစု