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

ဒါေလးကေတာ့ဘယ္လိုေခၚမွာလဲဆ္ိုရင္ေတာ့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

Posted in: BLOGGER TUTORIAL, BLOGGER WIDGET