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

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

Related Post

Posted in: BLOGGER TUTORIAL, MENU