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မိသားစု

( ::::: ပိုစ့္တင္သူ-ေခ်ာကိုကို ::::: )

ကၽြန္ေတာ္တင္သမွ် Post ေတြကို Facebook မွ တုိက္ရုိက္ဖတ္ရႈလို႔ပါက >> 
နည္းပညာႏွင့္ေဆာ့ဝဲလ္မ်ား Page ကိုႏွိပ္ျပီး Like လုပ္ထားေပးပါ၊၊ 


႐ိုး႐ွင္​း​ေသာနည္​းပညာမ်ားကို ဆန္​းသစ္​စြာတင္​ဆက္​မည္​။


အားလံုးကိုခင္​မင္​လ်ွက္​။
Admin & CKK - နည္​းပညာ
kp3နည္းပညာ၊၉၂၊Floating Vertical Navigation Menu Title : kp3နည္းပညာ၊၉၂၊Floating Vertical Navigation Menu
Description : အခ်ိန္မရလို႕အသစ္ေတြမတင္ျဖင့္တာၾကာသြားပါတယ္၊ဒါေၾကာင့္ဘယ္သူမွမသံုးဖူးတဲ့အသစ္ အဆန္းေလးFloating Vertical Navigation Menu လို႕ေခၚပါတယ္။ေရာက္ခဲ့...
Rating : 5

Post a Comment



လာေရာက္လည္ပတ္သူအားလံုးကို CKK-နည္းပညာ မွ ထူးေက်းဇူးတင္ရိွပါတယ္ခင္ဗ်ာ....


မန္ဘာဝင္ေရာက္အားေပးပါေနာ္

မဂၤလာပါေနာ္ Link ေသေနတာေတြ႕ရင္စာခ်န္ခဲ့ေပးပါေနာ္ ။ အခုလိုလာေရာက္ဖတ္႐ွဳ႕ေပးတဲ့အတြက္​ အထူးေက်းဇူးတင္ရွိပါသည္။ CKK - နည္းပညာ ၊ ရိုးရွင္းေသာနည္းပညာမ်ားကို ဆန္းသစ္စြာတင္ဆက္မည္ ။

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

( ::::: ပိုစ့္တင္သူ-ေခ်ာကိုကို ::::: )

ကၽြန္ေတာ္တင္သမွ် Post ေတြကို Facebook မွ တုိက္ရုိက္ဖတ္ရႈလို႔ပါက >> 
နည္းပညာႏွင့္ေဆာ့ဝဲလ္မ်ား Page ကိုႏွိပ္ျပီး Like လုပ္ထားေပးပါ၊၊ 


႐ိုး႐ွင္​း​ေသာနည္​းပညာမ်ားကို ဆန္​းသစ္​စြာတင္​ဆက္​မည္​။


အားလံုးကိုခင္​မင္​လ်ွက္​။
Admin & CKK - နည္​းပညာ

«
Next

Newer Post

»
Previous

Older Post

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

No comments :

Leave a Reply

back to top