kp3နည္းပညာ၊၂၅၀၊ဘေလာ့မွာ KP-3 ရဲ႕ Drop Down Menu အသစ္ေလးသံုးခ်င္၇င္ ~ KP-3 နည္းပညာ

အခုတင္တဲ့ Post ေလးကေတာ့မေမ်ာ္လင့္ဘဲနဲ႕တင္ျဖစ္သြားတယ္လို႕ေျပာရင္မွားမယ္မထင္ပါဘူး။ ဒီေန႕ တင္တဲ Post ကဒါနဲ႕ဆိုရင္ ႏွစ္ခုေပါ့ေနာ္ေနာက္တစ္ခုကေတာ့ kp3နည္းပညာ၊၂၄၉၊ရွိပါတယ္၊ ဘာတင္ရင္ ေကာင္းမွာလဲဆိုျပီစဥ္းစားရင္နဲ႕စိတ္ထဲမွာေပၚလာလို႕ Drop Down Menu အသစ္ေလးကိုသူမ်ားေတြနဲ႕ မတူေအာင္လုပ္မယ္ဆိုျပီးလုပ္ျဖစ္သြားတာပါ.အသစ္ေလးပါဘဲေအာက္မွာသြားၾကည့္လို႕ရေအာင္လည္းနမူ နာလင့္ခ္ႏွင့္တကြ Code ေလးေပးထားပါတယ္ပံုကိုေတာ့မထားေတာ့ဘူးေနာ္။ ဘေလာ့မိတ္ေဆြအားလံုးလည္းေက်းဇူးကမ႓ာ

ဒီမွာသြားၾကည့္လိုက္ပါ။

၁။ Layout

၂။Edit HTML

ေအာက္က Code ကိုရွာပါ။

]]></b:skin>

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

#outside{
 border:1px solid #000099;
 background:#000099;
 }
#navigation-1 {
 padding:1px 0;
 margin:0px;
 list-style:none;
 width:100%;
 height:21px;
 border-top:1px solid #FFFFFF;
 border-bottom:1px solid #FFFFFF;
 font:normal 8pt verdana, arial, helvetica;
}
#navigation-1 li {
 margin:0;
 padding:0;
 display:block;
 float:left;
 position:relative;
 width:148px;
}
#navigation-1 li a:link, #navigation-1 li a:visited {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#000099;
 color:#ffffff;
 width:148px;
 height:13px;
}
#navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active {
 padding:4px 0;
 display:block;
 text-align:center;
 text-decoration:none;
 background:#0066FF;
 color:#ffffff;
 width:146px;
 height:13px;
 border-left:1px solid #ffffff;
 border-right:1px solid #ffffff;
}
#navigation-1 li ul.navigation-2 {
 margin:0;
 padding:1px 1px 0;
 list-style:none;
 display:none;
 background:#ffffff;
 width:146px;
 position:absolute;
 top:21px;
 left:-1px;
 border:1px solid #000099;
 border-top:none;
}
#navigation-1 li:hover ul.navigation-2 {
 display:block;
}
#navigation-1 li ul.navigation-2 li {
 width:146px;
 clear:left;
 width:146px;
}
#navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited {
 clear:left;
 background:#000099;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover {
 clear:left;
 background:#0066FF;
 padding:4px 0;
 width:146px;
 border:none;
 border-bottom:1px solid #ffffff;
 position:relative;
 z-index:1000;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 {
 display:none;
 margin:0;
 padding:0;
 list-style:none;
 position:absolute;
 left:145px;
 top:-2px;
 padding:1px 1px 0 1px;
 border:1px solid #000099;
 border-left:1px solid #000099;
 background:#ffffff;
 z-index:900;
}
#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
 display:block;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited {
 background:#000099;
}
#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
 background:#0066FF;
}
#navigation-1 li ul.navigation-2 li a span {
 position:absolute;
 top:0;
 left:132px;
 font-size:12pt;
 color:#fe676f;
}
#navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span {
 position:absolute;
 top:0;
 left:132px;
 font-size:12pt;
 color:#ffffff;
}

၃။Save Template ေအာက္က Code Layout>>>Add a Gadget>>>HTML/JavaScript Add ထည့္ေပးလိုက္ပါ။

<head>
   <link rel="stylesheet" type="text/css" href="/menu/menu_style.css" />
</head>
<div id="outside">
<ul id="navigation-1">
   <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a>
      <ul class="navigation-2">
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a></li>
         <li><a href=""http://kp3family.blogspot.com" title="" target="" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="" target="" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="" target="" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="" target="" >kp3family</a></li>
         <li><a href="http://kp3family.blogspot.com" title="" target="" >kp3family</a></li>
      </ul>
   </li>
   <li><a href="http://kp3family.blogspot.com" title="kp3famiy" target="_self" >kp3famiy</a>
   </li>
   <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a>
   </li>
   <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a>
   </li>
   <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a>
   </li>
   <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a>
   </li>
   <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a>
   </li>
   <li><a href="http://kp3family.blogspot.com" title="kp3family" target="_self" >kp3family</a>
   </li>
</ul>
</div>

Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။ ။

မွတ္ခ်က္။ ။kp3family ႏွင့္ kp3လင့္ခ္ေတြကိုမိမိရဲ ့လင့္ခ္ေတြနဲ ့အစားထိုးေပးလိုက္ပါ။

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

Posted in: MENU

KP-3 နည္းပညာ

Translate

Followers

kp3နည္းပညာ၊၂၅၀၊ဘေလာ့မွာ KP-3 ရဲ႕ Drop Down Menu အသစ္ေလးသံုးခ်င္၇င္

Related Post

0 comments:

Post a Comment

kp-3 ဆိုက္ေလးကိုညႊန္းခ်င္ရင္

အီးေမးလ္လိပ္စာထားသြားပါ

HTML COLOUR CODE လြယ္ကူစြာရွာရန္

Total Pageviews

PDF file တင္ရန္

၂၆၊၈၊၂ဝဝ၉တြင္စတင္သည္

ဖိတ္ေခၚပါတယ္။

ႏိုင္ငံအလိုက္မိတ္ေဆြမ်ား

ပိုစ္နဲ႕ကြန္မင့္အေရတြက္

ေၾကာ္ျငာလက္ခံသည္

ယေန႕စုစုေပါင္း

ဘယ္ကလာသလဲ

ဆိုက္ညြန္းရန္

ယေန႕စုစုေပါင္း