Kp3နည္းပညာ၊၃၉၃၊ဘေလာ့မွာ KP-3CSS Horizontal Navigation Menuသံုးခ်င္ရင္

ဒီေန႕တင္တာေလးကေတာ့ေကပီသရီးမိသားစုေျပာေနၾကသတဲ့ဘေလာ့နဲ႕ဝဘ္ဆိုက္ဒ္တစ္ခုျပည့္စံုလွပေစဖို႕Menuကအေရးၾကီးဆံုးအရာတစ္ခုျဖစ္သလိုေနာက္CssHorizontal
NavigationMenuအသစ္ေလးထပ္ျပီးမွ်ေဝလိုက္ပါတယ္။ေအာက္မွာနမူနာၾကည့္လို႕ရေအာင္လည္းDEMOလင့္ခ္ေလးေပးထားပါတယ္။ၾကိဳက္ၾကမယ္လို႕ေတာ့ထင္တာပါဘဲ။ခရစၥမတ္
လက္ေဆာင္လို႕ဘဲသေဘာထားၾကေပါ့ေနာ္။ဒီရက္ပိုင္းအတြင္းေတာ့အားမယ္မထင္ဘူးေမးခ်င္တာေလးေတြရွိရင္Commentsမွာေရးထားခဲ့ၾကပါလို႕လဲေတာင္းဆိုခ်င္ပါတယ္။အနည္းဆံုး
၃ရက္ေလာက္ေတာ့အားမယ္မထင္ဘူး။ဘေလာ့မိတ္ေဆြအားလံုးကိုခင္မင္ေလးစားလွ်က္ေကပီသရီးမိသားစု။ဘေလာ့မိတ္ေဆြမ်ားအားလံုးေရာက္လာမည့္ခရစၥမတ္ပြဲနဲ႕ႏွစ္သစ္မွာကိုယ္
စိိတ္ႏွျဖာက်န္မာရြင္လန္းၾကပါေစလို႕ေကပီသရီးမိသားစုမွဆုမြန္ေကာင္းေတာင္းလွ်က္ေက်းဇူးကမာၻ

ေအာက္က Menu ကို ဒီမွာ သြားၾကည့္လို႕ရပါတယ္။

၁။Design

၂။Edit HTML

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

</head>

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

<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb7T8DLszGSBzH11LTxF7hlwl4FXbOU0uB6F6Ooqn2M35QsIcRQAtb7S3ZyPxYYSj0Ll-V8RAntYRjn_6jUME51QFWfvVcV612-1_JHtCzoYptPb5yjHV1V5HOOpPALSSZnETqajDwrZQ_/) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4SePm0qxv6qA35VFkbQumV3kbpbDCM5WIL3HD7kMRqxEPRLnfNLMT-I0uahzPySKTz-GoNUViaQDIep_Ya0JZ0BvbluTfuy1YFtmfiFm9iMmGHVJ2J42eXHDefbETAy4tCAQLrIg03Gk/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb7T8DLszGSBzH11LTxF7hlwl4FXbOU0uB6F6Ooqn2M35QsIcRQAtb7S3ZyPxYYSj0Ll-V8RAntYRjn_6jUME51QFWfvVcV612-1_JHtCzoYptPb5yjHV1V5HOOpPALSSZnETqajDwrZQ_/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4SePm0qxv6qA35VFkbQumV3kbpbDCM5WIL3HD7kMRqxEPRLnfNLMT-I0uahzPySKTz-GoNUViaQDIep_Ya0JZ0BvbluTfuy1YFtmfiFm9iMmGHVJ2J42eXHDefbETAy4tCAQLrIg03Gk/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>

၅။Save Tamplate ႏိုပ္လိုက္ပါ။

၆။Design

၇။။Add a Gadget

၈။HTML/JavaScript Add ေနရာမွာေအာက္ကCode ထည့္ေပးလိုက္ပါ။

<!-kp-3နည္းပညာ-http://kp3family.blogspot.com--> 
<div id="foxmenucontainer">

<div id="menu">

<ul>

<li><a expr:href="data:blog.homepageUrl">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a>
<ul>
<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>
<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>
<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>
<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>
</ul>
</li>

<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#"kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

<li><a href="http://kp3family.blogspot.com#" kp3နည္းပညာ="#">kp3နည္းပညာ</a></li>

</ul>

</div>

</div>
<!--kp3CSS Horizontal Navigation Menu-http://kp3family.blogspot.com-->  

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


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

အခုတေလာတင္ျဖစ္တာေလးေတြ။ ။ ။---------
ဘေလာ့မွာKp-3 Tab Menu ေလးသံုးခ်င္ရင္ Kp3နည္းပညာ၊၃၅၉၊
Online ကေနအခမဲ့ Button,Menu,Banner,Texts,Flash နာရီေတြယူသံုးခ်င္ရင္ Kp3နည္းပညာ၊၃၆ဝ၊
ဘေလာ့မွာStats Gadgets အသစ္ေလးထည့္ခ်င္ရင္ kp3နည္းပညာ၊၃၅၃၊
Kp3 ရဲ႕ဘေလာ့ Labels ေတြကို Auto Scroll လုပ္နည္း နည္းပညာ၊၃၅၆၊
Kp-3ရဲ႕Blogspotဘေလာ့ကိုProfessional Website အျဖစ္ေျပာင္းနည္း Kp3နည္းပညာ၊၃၅၈၊
ဘေလာ့ Labels ေတြကို Marquee သံုးျပီးလုပ္နည္းေလးလာပါျပီ kp3နည္းပညာ၊၃၄၈၊
မိမိရဲ႕ဘေလာ့မွာ Kp3 ရဲ႕Page Views / Post Views Counter ထည့္နည္း၊kp3နည္းပညာ၊၃၅၂၊
 မိမိရဲ႕ဘေလာ့မွာOS X Styled Sharing Dock Widget ထည့္ခ်င္ရင္။kp3နည္းပညာ၊၃၅၁၊
 ဘေလာ့မွာ Floating Social Bookmark ပံုစံတစ္မ်ိဳးေျပာင္းသံုးခ်င္ရင္kp3နည္းပညာ၊၃၄၉၊
 မိမိရဲ႕ဘေလာ့ပိုစ္ေအာက္မွာEmail Subscrtiption Form ထည့္နည္း။kp3နည္းပညာ၊၃၅ဝ၊
ဘေလာ့ Labels ေတြကို Marquee သံုးျပီးလုပ္နည္းေလးလာပါျပီkp3နည္းပညာ၊၃၄၈၊
Email Subscrtiption Form စလုပ္မယ္ဆိုရင္kp3နည္းပညာ၊၉ဝ၊
မိမိရဲ႕ဘေလာ့ကိုဘယ္ကေနကူးလာတယ္ဆိုတာသိခ်င္ရင္kp3နည္းပညာ၊၃၃၈၊
မိမိရဲ႕ဘေလာ့မွာအလြယ္ကူလွပဆံုးFont Resizer ေလးသံုးခ်င္ရင္kp3နည္းပညာ၊၃၄၁၊
မိမိရဲ႕ဘေလာ့လင့္ခ္ကိုMouseနဲ႕ေထာက္ရင္မူးရင္းလင့္ခ္ေပၚေအာင္လုပ္နည္းkp3နည္းပညာ၊၃၄၄၊
မိမိရဲ႕ဘေလာ့List ေတြကို Scoll ပံုစံေျပာင္းနည္းkp3နည္းပညာ၊၃၄၃၊
မိမိရဲ႕ဘေလာ့ပိုစ္ Title ကို Marquee သံုးျပီးလုပ္နည္းေလးလာပါျပီkp3နည္းပညာ၊၃၄၆၊ 
ဘေလာ့ Comments ေတြကိုKp3ရဲ႕ Scroll List ပံုစံေျပာင္းနည္း Kp3နည္းပညာ၊၃၆၁၊
Kp-3သံုးေနတဲ့အခမဲ့ Top-3All In One Video Converters သံုးခ်င္ရင္ Kp3နည္းပညာ၊၃၆၂၊
Kp-3 ရဲ႕ Vertical Dropdown Menu ေလးသံုးခ်င္ရင္ Kp3နည္းပညာ၊၃၆၃၊
ဘေလာ့မွာ EmailSubscribeFormButtonေလးကိုဘယ္ဘက္အလယ္မွာထားနည္းKp3နည္းပညာ၊၃၆၅၊
Video Converter အသစ္ေလးလိုခ်င္ရင္ Kp3နည္းပညာ၊၃၆၇၊
ဘေလာ့မွာShare Buttons Widget ေလးျဖဳတ္နည္း Kp3နည္းပညာ၊၃၆၈၊
ဘေလာ့မွာအခမဲ့ Forum ဆိုက္ဒ္ထားခ်င္ရင္ Kp3နည္းပညာ၊၃၆၉၊
အေမစုရဲ႕က်က္သေရမဂၤါလာအေပါင္းနဲ႕ျပည့္စံုတဲ့ပံုေလးေတြၾကယ္ပြင့္ေလးနဲ႕ထည့္ရန္Kp3နည္းပညာ၊၃၇ဝ၊
ဘေလာ့မွာအလြယ္ကူဆံုး Visitor Counter အသစ္ေလးသံုးခ်င္ရင္ Kp3နည္းပညာ၊၃၇၂၊
ဘေလာ့မွာSocial Bookmarking Tool Bar အသစ္ေလးသံုးခ်င္ရင္ Kp3နည္းပညာ၊၃၇၃၊
ဘေလာ့မွာ125 by 125 Widget ေလးထည့္ခ်င္ရင္ Kp3နည္းပညာ၊၃၇၄၊
ဘေလာ့/ဆိုက္ဒ္ကို Submit ပံုမွန္လုပ္ေပးပါ Kp3နည္းပညာ၊၃၇၇၊
Kp-3မိသားစုသိသေလာက္မခမဲ့ဘေလာ့ Tamplate ဆိုက္ဒ္မ်ား Kp3နည္းပညာ၊၃၇၆၊
ဘေလာ့ Mouse Poiter မွာ Kp3 ရဲ႕ငွက္ပ်ံတာေလးထည့္ခ်င္ရင္ Kp3နည္းပညာ၊၃၇၅၊
ဘေလာ့မွာAnimated Notice Box ေလးထည့္ခ်င္ရင္ Kp3နည္းပညာ၊၃၇၈၊
ဘေလာ့ရက္စြဲေတြျပတဲ့ေနရာမွာUndefined ဆိုျပီးေပၚေနရင္ Kp3နည္းပညာ၊၃၇၉၊
ဘေလာ့ကို Hand-Phone မွာဖတ္ရတာအဆင္ေျပေအာင္လုပ္နည္း Kp3နည္းပညာ၊၃၈ဝ၊
ဘေလာ့ညာဘက္ေဘးမွာChatBox သို႕မဟုတ္အျခား Menu ထားခ်င္ရင္ Kp3နည္းပညာ၊၃၈၁၊
ဘေလာ့ Banner ေထာင့္မွာ X'mas Button ေလးထားခ်င္ရင္ Kp3နည္းပညာ၊၃၈၂၊
ဘေလာ့ Comment မွာ Facebook Like Button ထားနည္း Kp3နည္းပညာ၊၃၈၃၊
Google,Yahoo,Bing တို႕ကိုတစ္ေနရာမွာဘဲရွာေဖြရန္ေနရာသစ္ေလး SearchGBY Kp3နည္းပညာ၊၃၈၄၊
Gmail Inbox ကမဖတ္မိတဲ့ေမးလ္ေတြကိုလြယ္ကူစြာရွာနည္း Kp3နည္းပညာ၊၃၈၅၊
 All in One Online File Converter ဆိုက္ေလးပါ  Kp3နည္းပညာ၊၃၈၇၊
ဘေလာ့က Menu လင့္ခ္ေတြကိုႏိုပ္ရင္ NewTab နဲ႕ဖြင့္ေအာင္ေျပာင္းနည္း Kp3နည္းပညာ၊၃၈၈၊
ဘေလာ့Site Feed အတြက္အေကာင္းဆံုးဘေလာ့ Officer ရဲ႕ဝန္ေဆာင္မူအသစ္ Kp3နည္းပညာ၊၃၈၉၊
အခမဲ့ Online Logo Creator ဆိုက္ဒ္ေကာင္းေလး Kp3နည္းပညာ၊၃၉၀၊
ဘေလာ့မွာ YouTube သီခ်င္းေတြကိုလြယ္ကူစြာပိုစ္မွာတင္နည္းအသစ္ေလး Kp3နည္းပညာ၊၃၉၁၊
ဘေလာ့မွာ KP-3Horizontal Double Line Menu သံုးခ်င္ရင္ Kp3နည္းပညာ၊၃၉၂၊

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

Related Post

Posted in: KP3-TAB MENU, KP3VERTICALMENU, MENU