အဂၤါ, ဧျပီ 01, 2025

Translate

Followers

အီးေမးလ္မွာဖတ္ခ်င္ရင္အေပၚမွာ Sign In (Menber)ဝင္ၾကပါလို႕ေတာင္းဆိုပါရေစ။ခင္မင္ေလးစားလွ်က္ေကပီသရီးမိသားစု

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

Thursday, November 12, 2009  KP-3မိသားစု  1 comment

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

MENU
BLOGGER TUTORIAL
Posted in: ,

1 comments:

ေက်းဇူးပါဘဲ။

Post a Comment

မွတ္ခ်က္မ်ားကို စိစစ္ၿပီးမွ ေဖာ္ျပေပးမည္ ျဖစ္ပါသျဖင့္ ဤစာမ်က္ႏွာေပၚမွာ ခ်က္ခ်င္း ျမင္ရမည္မဟုတ္ပါ။ မၾကာခင္ ေနာက္တခါ ျပန္လာၿပီး မိမိ၏ မွတ္ခ်က္ကို ျပန္ၾကည့္ပါရန္ ေမတၲာရပ္ခံပါသည္။