ဗုဒၶဟူး, ဧျပီ 02, 2025

Translate

Followers

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

kp3နည္းပညာ၊၉၈၊Pop Up Navigation Menu From Bucket

Wednesday, November 18, 2009  KP-3မိသားစု  5 comments

ဒါေလးကေတာ့ဘယ္လိုေခၚမွာလဲဆ္ိုရင္ေတာ့Pop Up Navigation Menu From Bucketေပါ့ေနာ္၊
က်ေနာ္တို႕ရဲ႕ႏွစ္သက္သည့္လင့္ခ္အခ်ိဳ႕ကိုေအာက္ပံုအတိုင္းျခင္းေလးထဲမွာထည့္ထားျခင္ရင္ေပါ့
ေအာက္ကျခင္းပံုကိုႏိုပ္လိုက္ရင္၊က်ေနာ္တုိ႕လင့္ခ္ေတြကိုအေပၚဘက္ကိုတက္လာတယ္။က်ေနာ္
အားလံုးပိုျပီးနားလည္ေအာင္ DEMO လင့္ခ္ေပးထားပါတယ္။မိမိရဲ႕ဘေလာ့ပိုျပီးလွပသြားမယ္လို႕
ေတာ့ထင္တာဘဲ...ဟီး




DEMO

ပထမအဆင့္

၁။dashboard>>>>>

၂။layout>>>>>

၃။add a page element>>>>>


၄။html/javascript>>>>>

ေအာက္က Code ေတြကိုထည့္လိုက္ပါ။လင့္ခ္ထည့္မည့္ေနရာေတြမေျပာေတာ့ဘူးေနာ္၊
အားလံုးသိၾကျပီးသားထင္ပါတယ္။

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/stack.png"/>
<ul id="stack">
<li><a href=""><span>Aperture</span><img alt="Aperature" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/adobeAcrobat.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/aperture.png"/></a></li>
<li><a href="#"><span>All Examples</span><img alt="Photoshop" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/aperture.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/photoshop.png"/></a></li>
<li><a href="example3.html"><span>Example 3</span><img alt="Safari" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/safari.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/safari.png"/></a></li>
<li><a href="example2.html"><span>Example 2</span><img alt="Coda" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/finder.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/coda.png"/></a></li>
<li><a href="index.html"><span>Example 1</span><img alt="Finder" src="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/images/dock/rss.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/images/dock/rss.png"/></a></li>
</ul>
</div><!-- end div .stack -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://files-teckzest.bravehost.com/fisheye-iutil.min.js" type="text/javascript"></script>


ဒုတိယအဆင့္

၁။ LAYOUT>>>

၂။Edit HTML ႏိုပ္ပါ>>>

၃။Expand Widget Templatesကိုမွန္ုျခစ္ပါ>>>

၄။Ctrl+F နဲ႔ေအာက္က Code ကိုရွာပါ။


]]></b:skin>


ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္ကCodeေတြကိုထည့္လိုက္ပါ။


.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
right:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }
၅။Save Template ကိုႏိုပ္ပါ။ျပီးပါျပီ။။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

Related Post

BLOGGER TUTORIAL
BLOGGER WIDGET
Posted in: ,

5 comments:

ေက်းဇူးတင္ပါတယ္

လင့္ထည့္ရမည့္ေနရာေလးကုိ...အခ်ိန္ရရင္ညြန္ ့ျပေပးပါလား...လုိရင္းေပါ့။
အခ်ိန္မရရင္လည္းစိတ္မရွိပါဘူး....ဦးေလး။

အၿပင္မွာေတြ႔ရင္ထုိင္ရွိခုိးမိမလားပဲဗ်ာ..ေကါင္းခ်က္ကလန္ထြက္ေနတာပဲ...။

အကိုတို ့ေရ ကူညီပါအံုး menu ထဲကို ပို ့ေတြ ဘယ္လိုထည္ ့ရမလဲ ကြ်န္ေတာ္လို ့မသိတဲ ့သူေတြ ရွိအံုးမယ္ထင္ပါတယ္ ေက်းဇူးျပဳၿပီးအမ်ားသိေအာင္ ေျပာျပေပးပါအံုးခင္မ်ာ kp3 မိသားစုထာဝရေပ်ာ္ရႊင္ပါေစ

Post a Comment

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