ဘေလာ့မွာ Dropdown Menu ေလးအလြယ္တကူ ထည့္သုံးၾကမယ္

  

 မဂၤလာပါ  သည္နည္းလမ္းေလးကေတာ့ dropdown menu လွလွေလးေတြကို အလြယ္ကူဆုံးနည္းျဖင့္ ဖန္တီးနိဳင္ရန္.. နိဳင္ငံျခားဆိုဒ္ တစ္ခုမွ ျပန္လည္ မွ်ေ၀ျခင္းျဖစ္ပါတယ္..လိုအပ္သလို သုံးစြဲ နိဳင္ပါတယ္ေနာ္

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

သည္ေဘာက္ေလး တိုင္းကလ္စျပီး က်လာတဲ့ ေဘာက္ထဲမွာ ေအာက္က ကုဒ္ေတြ ထည့္ေပးလုိက္ပါ။

 နမူနာ ပုံစံကို ၾကည့္လိုပါက   သည္မွာ  သြားလုိက္ပါေနာ္

      <style type="text/css">#cssmenu ul{margin:0;padding:7px 6px 0;background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwj4ilLZFBwe2cf_d2UyGiswlvvQWqgpGL9DH-B9vZVwnqSPAw7dYCwQLskwLD8eAFxtjYLfDlV34QnOumDGEKTworgr1LtiQ1KXdS690qMvwSk2oZS24Rj8maDPzCXsWbFBqI8Id_JLs/s1600/overlay.png) repeat-x 0 -110px;line-height:100%;border-radius:1em;font:normal 0.5333333333333333em Arial,Helvetica,sans-serif;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);width:auto}#cssmenu li{margin:0 5px;padding:0 0 8px;float:left;position:relative;list-style:none}#cssmenu a,#cssmenu a:link{font-weight:bold;font-size:13px;color:#e7e5e5;text-decoration:none;display:block;padding:8px 20px;margin:0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.3)}#cssmenu a:hover{background:#000;color:#fff}#cssmenu .active a,#cssmenu li:hover > a{background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwj4ilLZFBwe2cf_d2UyGiswlvvQWqgpGL9DH-B9vZVwnqSPAw7dYCwQLskwLD8eAFxtjYLfDlV34QnOumDGEKTworgr1LtiQ1KXdS690qMvwSk2oZS24Rj8maDPzCXsWbFBqI8Id_JLs/s1600/overlay.png) repeat-x 0 -40px;background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwj4ilLZFBwe2cf_d2UyGiswlvvQWqgpGL9DH-B9vZVwnqSPAw7dYCwQLskwLD8eAFxtjYLfDlV34QnOumDGEKTworgr1LtiQ1KXdS690qMvwSk2oZS24Rj8maDPzCXsWbFBqI8Id_JLs/s1600/overlay.png) repeat-x 0 -40px;color:#444;border-top:solid 1px #f8f8f8;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-shadow:0 1px 0 #fff}#cssmenu ul ul li:hover a,#cssmenu li:hover li a{background:none;border:none;color:#666;-webkit-box-shadow:none;-moz-box-shadow:none}#cssmenu ul ul a:hover{background:#7d7d7d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwj4ilLZFBwe2cf_d2UyGiswlvvQWqgpGL9DH-B9vZVwnqSPAw7dYCwQLskwLD8eAFxtjYLfDlV34QnOumDGEKTworgr1LtiQ1KXdS690qMvwSk2oZS24Rj8maDPzCXsWbFBqI8Id_JLs/s1600/overlay.png) repeat-x 0 -100px !important;color:#fff !important;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;text-shadow:0 1px 1px rgba(0,0,0,0.1)}#cssmenu li:hover > ul{display:block}#cssmenu ul ul{display:none;margin:0;padding:0;width:185px;position:absolute;top:40px;left:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtwj4ilLZFBwe2cf_d2UyGiswlvvQWqgpGL9DH-B9vZVwnqSPAw7dYCwQLskwLD8eAFxtjYLfDlV34QnOumDGEKTworgr1LtiQ1KXdS690qMvwSk2oZS24Rj8maDPzCXsWbFBqI8Id_JLs/s1600/overlay.png) repeat-x 0 0;border:solid 1px #b4b4b4;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 3px rgba(0,0,0,0.3)}#cssmenu ul ul li{float:none;margin:0;padding:3px}#cssmenu ul ul a,#cssmenu ul ul a:link{font-weight:normal;font-size:12px}#cssmenu ul:after{content:'.';display:block;clear:both;visibility:hidden;line-height:0;height:0}* html #cssmenu ul{height:1%}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work --> <!-- customize your menus Links --> <div id="cssmenu"><ul><li class="active"><a href="index.html"><span>Home</span></a></li><li class="has-sub"><a href="#"><span>Products</span></a><ul><li><a href="#"><span>Widgets</span></a></li><li><a href="#"><span>Menus</span></a></li><li class="last"><a href="#"><span>Products</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Company</span></a><ul><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Location</span></a></li></ul></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>
မွတ္ခ်က္   ။                ။  ကုဒ္အတြင္းမွ  ေခါင္းစဥ္အမည္ေတြကို မိမိတို႕ လိုသလို အမည္ေပးလိုက္ပါ
                                  လိုအပ္သလိုဘဲ.. ပြါးမ်ားနိဳင္ပါတယ္ေနာ္.....

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

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } 

သြားလိုက္ပါလယ္တီေျမသားသို႕{ ဒီမွာ } သြားလိုက္ပါ 

စာေပနန္းေတာ္သို႕{ ဒီမွာ } သြားလိုက္ပါ

Posted in: Blogs Tab Menu