kp3နည္းပညာ၊၂၄၁၊ဘေလာ့မွာ CSS-driven tabs Menu ေလးထည့္နည္း

အခုတင္တဲ့ Post ေလးကေတာ့က်ေနာ္တို႕ရဲ႕ဘေလာ့မွာCSS-driven tabs Menu ေလးကိုသံုးခ်င္တဲ့ဘေလာ့ဂါ မိတ္ေဆြေတြအတြက္ပါ၊ေအာက္ၾကည့္လို႕ရေအာင္နမူနာပံုလည္းျပထားသလိုသြားၾကည့္လို႕ရေအာင္DEMO လင့္ခ္ေလးပါထာ့္ေပးထားပါတယ္။ဘေလာ့မွာနည္းပညာအသစ္လို႕ေျပာလို႕ရတဲ့ႏွစ္မ်ိဳးကိုkp3နည္းပညာ၊၂၄၀၊ ႏွင့္ kp3နည္းပညာ၊၂၃၉၊ မွာရွိပါတယ္။

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

ပထမအဆင့္

၁။Layout

၂။Edit HTML

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

]]></b:skin>

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

/*globalnav*/

#globalnav {
 position:relative;
 float:left;
 width:100%;
 padding:0 0 1.75em 1em;
 margin:0;
 list-style:none;
 line-height:1em;
}

#globalnav LI {
 float:left;
 margin:0;
 padding:0;
}

#globalnav A {
 display:block;
 color:#444;
 text-decoration:none;
 font-weight:bold;
 background:#ddd;
 margin:0;
 padding:0.25em 1em;
 border-left:1px solid #fff;
 border-top:1px solid #fff;
 border-right:1px solid #aaa;
}

#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
 background:#bbb;
}

#globalnav A.here:link,
#globalnav A.here:visited {
 position:relative;
 z-index:102;
}

/*subnav*/

#globalnav UL {
 position:absolute;
 left:0;
 top:1.5em;
 float:left;
 background:#bbb;
 width:100%;
 margin:0;
 padding:0.25em 0.25em 0.25em 1em;
 list-style:none;
 border-top:1px solid #fff;
}

#globalnav UL LI {
 float:left;
 display:block;
 margin-top:1px;
}

#globalnav UL A {
 background:#bbb;
 color:#fff;
 display:inline;
 margin:0;
 padding:0 1em;
 border:0
}

#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
 color:#444;
}

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

ဒုတိယအဆင့္

၁။Layout

၂။Add a Gadget

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

<ul id="globalnav">
  <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Home</a></li>
  <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#" class="here">About</a>
    <ul>
      <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Vision</a></li>
      <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Team</a></li>
      <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Culture</a></li>
      <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Careers</a></li>
      <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#" class="here">History</a></li>
      <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Sponsorship</a></li>
    </ul>
  </li>
  <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">News</a></li>
  <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Proof</a></li>
  <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Process</a></li>
  <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Expertise</a></li>
  <li><a href="ဒီမွာမိမိရဲ့လင့္ခ္ထည့္ေပးပါ#">Help</a></li>
</ul>

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

မွတ္ခ်က္။  ။ မိမိရဲ့လင့္ခ္ေတြထည့္ျပီသြား၇င္လည္းနာမည္ေတြကိုလည္းမိမိရဲ့လင့္ခ္ရဲ့နာမည္ေျပာင္းေပးၾကပါ။

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

Related Post

Posted in: MENU