Dropdown Menu လွလွေလးလုပ္ၾကမယ္..

 ဒါကေတာ့ Dropdown Menu ေလးတည္ေဆာက္နည္းျဖစ္ပါတယ္... အရင္ကလဲ တင္ထားခဲ့ဘူးပါတယ္.. လုပ္နည္းေတြ  အဆင္ေျပတဲ့ နည္းလမ္းနဲ႕ လိုအပ္သလို သုံးစြဲနိဳင္ရန္ ရွာေဖြ တင္ျပလုိက္ရပါတယ္..ေနာ္... ကဲ ...နည္းလမ္းေလးကို ၾကည့္ျပီး လုိက္လုပ္ၾကည့္ၾကပါေနာ္...

 အဆင့္  (၁)  ။              ။ 

   ►1.  Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2.  Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕  Dashboard ကေနေပါ့
   ►3.  Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4.  HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5.  ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

 <div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>
        </li>
      </ul>
    </div>

ဒါေလးေတြကို ထပ္ဆင့္လို႕ လိုသေလာက္ ပြါး နိဳင္ပါတယ္ေနာ္...

အဆင့္  (၂) ။           ။

►1-  Blogger Singin ၀င္လိုက္ပါ။
►2-  DASHBOARD ကိုသြားလိုက္ပါ။
►3-  LAYOUT    ကိုကလစ္ပါ..။
►4-  EDIT HTML  ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5-  EXPAND WIDGET TEMPLATES ကိုအမွန္ျခစ္ေပးဖို႕မေမ့ပါနဲ႕ေနာ္...။
►6-  Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

]]></b:skin> ကုဒ္ကိုရွာပါ ေတြ႕တာနဲ႕ သူ႕အထက္ကေန ေပးထားတဲ့ ကုဒ္မ်ားကို ထည့္ေပးလိုက္ပါ။

/*----- Fobbleup.blogspot.com  Drop Down Menu ----*/
#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}
#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
   
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

 မွတ္ခ်က္ ။          ။

• သည္ကုဒ္ကေတာ့  #060505 background color of the Main menu ပါ။
• သည္အ၀ါေရာင္ကေတာ့  yellow highlighted စာလုံးရဲ႕ အရြယ္အစားနဲ႕ကာလာပါ
• သည္အနီကေတာ့  #BF0100 tab ရဲ႕ေနာက္ခံ mouse hover ကာလာျဖစ္ပါတယ္..
• သည္ အစိမ္းနဲ႕ျပတာေတာ့  #BF0100  drop down menuရဲ႕ေနာက္ခံ႕ာလာျဖစ္ပါတယ္..
• ခရမ္းကေတာ့  #060505  drop down menu on mouse hoverကာလာျဖစ္ပါတယ္..
• မိတ္ေဆြအေပါင္းးအဆင္ေျပသလို လိုအပ္သလို ေျပာင္းလဲ ဖန္တီးနိဳင္ပါတယ္...

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...

www.aungsanmks.blogspot.com 

www.ledimyethar.com 

တို႕ရဲ႕ cbox မွာ ေျပာခဲ့ၾကပါေနာ္...

Posted in: Blogs Tab Menu