Kp3နည္းပညာ၊၄၂၃၊Kp-3 Blue Center Drop Bar Menu

ဒီေန႕တင္တဲ့ပိုစ္ေလးကေတာ့BlueCenterDropBarMenuလို႕ေခၚပါတယ္။ေအာက္မွာနမူနာၾကည့္လို႕ရေအာင္လည္းပံုနဲ႕တကြDemoလင့္ခ္ေလးထားေပးပါတယ္။အသစ္အဆန္းေလး
ေတြတင္သြားမွာျဖစ္တဲ့အတြက္မိမိရဲ႕ဘေလာ့ကေနေကပီသရီးကပိုစ္အသစ္ေတြတင္တာသိခ်င္ၾကည့္ခ်င္ရင္ေအာက္ကGoogleFriendConnectမွာSignInဝင္ထားလိုက္ပါ။ဒါမွမဟုတ္ရင္
ဆိုက္ဘားကအီးေမးလ္လိပ္စာထားသြားပါလို႕ေရးထားတဲ့EmailSubscribeလုပ္ေပးလိုက္ပါ။မိမိရဲ႕အီးေမးလ္လိပ္စားထားသြားပါလို႕ေျပာခ်င္ပါတယ္။ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလး
စားလွ်က္ေကပီသရီးမိသားစု

မွတ္ခ်က္။Menuပတ္သက္ျပီးသြားၾကည့္ရမယ္ေနရာKp3နည္းပညာ၊၄၁၅၊မွာရွိပါတယ္။

 အခုတင္တဲ့ Menu ကို ဒီမွာ သြားၾကည့္လိုက္ပါ။

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

]]></b:skin>

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

.nav {

height:35px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhve6CWZN_dqyLQDsnysE3WTco71aoWE2vBwwI2zYViMSffhj8MZ0xVMFGDIB9EHbD_99Wlisc6FaSAhNUmjb8B01LNnwEAzZ56HFgW2u9hU2koPI61DgKyiRUFDV0cuDm29mr8M305XWLV/s1600/bg.gif) repeat-x;

position:relative;

font-family:arial, verdana, sans-serif;

font-size:11px;

width:100%;

z-index:100;

margin:0;

padding:0;

}



.nav .table {

display:table;

margin:0 auto;

}



.nav .select,

.nav .current {

margin:0;

padding:0;

list-style:none;

display:table-cell;

white-space:nowrap;

}



.nav li {

margin:0;

padding:0;

height:auto;

float:left;

}



.nav .select a {

display:block;

height:35px;

float:left;

font-weight:bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhve6CWZN_dqyLQDsnysE3WTco71aoWE2vBwwI2zYViMSffhj8MZ0xVMFGDIB9EHbD_99Wlisc6FaSAhNUmjb8B01LNnwEAzZ56HFgW2u9hU2koPI61DgKyiRUFDV0cuDm29mr8M305XWLV/s1600/bg.gif);

padding:0 30px 0 30px;

text-decoration:none;

line-height:35px;

white-space:nowrap;

color:#2b3238;

}





.nav .select a:hover,

.nav .select li:hover a {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOnOFqBVnbCbkZG2GiObdaJuu50qwmA7YbVi6j2fsBkA5oCYG4hVlWJVCoFXfe62ZA93_vmET193iOA2g2Q_LWEycaeSXGPNv4lyzhFRTxwTyDW1BU96OGes2D6COAfZpsWiMSVfHo3AIl/s1600/hover.gif);

padding:0 0 0 15px;

cursor:pointer;

color:#2b3238;

}



.nav .select a b{

font-weight:bold;

}



.nav .select a:hover b,

.nav .select li:hover a b {

display:block;

float:left;

padding:0 30px 0 15px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOnOFqBVnbCbkZG2GiObdaJuu50qwmA7YbVi6j2fsBkA5oCYG4hVlWJVCoFXfe62ZA93_vmET193iOA2g2Q_LWEycaeSXGPNv4lyzhFRTxwTyDW1BU96OGes2D6COAfZpsWiMSVfHo3AIl/s1600/hover.gif) right top;

cursor:pointer;

}



.nav .select_sub {

display:none;

}



/* IE6 only */

.nav table {

border-collapse:collapse;

margin:-1px;

font-size:1em;

width:0;

height:0;

}



.nav .sub {

display:table;

margin:0 auto;

padding:0;

list-style:none;

}



.nav .sub_active .current_sub a,

.nav .sub_active a:hover {

background:transparent;

color:#2b3238;

}



.nav .select :hover .select_sub,

.nav .current .show {

display:block;

position:absolute;

width:100%;

top:35px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNQFBnJdxr6d_ynQ_q6x6LA41KifxATMN7mKYO2jnxU7JxMEQfp7kfIXNSDnsiopkOVZjXWFhMzr06dYR-ey3xU8tcgzyDHJCke4qPSUfICsfZStLdLS6BedF5ha_K0C6oXDSqHjmcADQh/s1600/back.gif);

padding:0;

z-index:100;

left:0;

text-align:center;

}



.nav .current .show {

z-index:10;

}



.nav .select :hover .sub li a,

.nav .current .show .sub li a {

display:block;

float:left;

background:transparent;

padding:0 10px 0 10px;

margin:0;

white-space:nowrap;

border:0;

color:#2b3238;

}



.nav .current .sub li.sub_show a {

color:#2b3238;

cursor:default;

}



.nav .select .sub li a {

font-weight:normal;

}



.nav .select :hover .sub li a:hover,

.nav .current .sub li a:hover {

visibility:visible;

color:#73a0d2;

}

ေအာက္ကပံုမွာျပထားေပတဲ့အတိုင္းေအာက္ကကုဒ္ေတြကိုထည့္ေပးလိုက္ပါ။

<div class="nav">

<div class="table">



<ul class="select"><li><a href="http://kp3family.blogspot.com#"><b>KP3FAMILY</b></a></li></ul>



<ul class="select"><li><a href="http://kp3family.blogspot.com#"><b>KP3FAMILY</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>

</ul>

</div>

</li>

</ul>



<ul class="select"><li><a href="http://kp3family.blogspot.com#"><b>KP3FAMILY</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY2</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY2</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY2</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY2</a></li>

</ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="http://kp3family.blogspot.com#"><b>KP3FAMILY</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY3</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY3</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY3</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY3</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY3</a></li>

</ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="http://kp3family.blogspot.com#"><b>KP3FAMILY</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY4</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY4</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY4</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY4</a></li>

<li><a href="http://kp3family.blogspot.com#">KP3FAMILY4</a></li>

</ul>

</div>

</li>

</ul>



</div>

</div>



<br />

မွတ္ခ်က္။ ။http://kp3family.blogspot.com ေနရာနဲ႕KP3FAMILYေတြမွာမိမိရဲ႕လင့္ခ္နာမည္နဲ႕အစားထိုးေပးၾကပါ။

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

Related Post

Posted in: KP3VERTICALMENU, MENU