Dropdown Menu စတိုင် လှလှလေးများ ( အလွယ်တကူထည့်နိုင်)

  မင်္ဂလာပါ  သည်တစ်ခါတော့  မိမိတို့ဘလော့အတွက် လိုအပ်ချက်လေးဖြစ်တဲ့ ခေါင်းစဉ်ဖြစ်တဲ့  

Dropdown Menu လေးတွေဘဲ ဖြစ်ပါတယ်.. သည်နည်းလေးကို အရင်ကဆို HTML ထဲဝင်ထည့်နေရာကေန  အခုတော့  အလွယ်တကူဘဲ..ထည့်နိုင်ရန်အတွက်.. ကုဒ်များကို  အဆင်ပြေ

အောင် ဖန်တီးထားပါတယ်... မူရင်း http://24work.blogspot.com/  ကနေ မျှဝေခြင်းဖြစ်ပါတယ်

   ►1.  Login လုပ်လိုက်ပါ ဘလော့ကာကို

   ►2.  Layout ကိုကလစ်ရပါ့မယ် မိမိတို့  Dashboard ကနေပေါ့

   ►3.  Add a Gadget ကိုကလစ်ပေးလိုက်ပါ

   ►4.  HTML/Javascript. ကိုကလစ်ပြီး ကျလာတဲ့ ဘောက်လေးထဲမှာဘဲ

   ►5.  အောက်ကပေးထားတဲ့ ကုဒ်တွေကို ကော်ပီယူ ထည့်လိုက်ပါ

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

 ပုံစံ  ( ၁ ) 

 

 နမူနာကြည့်ရန်   သည်မှာ   သွားလိုက်ပါ

            <style type="text/css">#cssmenu{border:1px solid #b9121b;background:#b9121b}#cssmenu > ul{padding:1px 0;margin:0;list-style:none;width:100%;height:21px;border-top:1px solid #FFF;border-bottom:1px solid #FFF;font:normal 8pt verdana,arial,helvetica}#cssmenu > ul li{margin:0;padding:0;display:block;float:left;position:relative;width:148px}#cssmenu > ul li a:link,#cssmenu > ul li a:visited{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#b9121b;color:#fff;width:148px;height:13px}#cssmenu > ul li:hover a,#cssmenu > ul li a:hover,#cssmenu > ul li a:active{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#ec454e;color:#fff;width:146px;height:13px;border-left:1px solid #fff;border-right:1px solid #fff}#cssmenu > ul li ul{margin:0;padding:1px 1px 0;list-style:none;display:none;background:#fff;width:146px;position:absolute;top:21px;left:-1px;border:1px solid #b9121b;border-top:none}#cssmenu > ul li:hover ul{display:block}#cssmenu > ul li ul li{clear:left;width:146px}#cssmenu > ul li ul li a:link,#cssmenu > ul li ul li a:visited{clear:left;background:#b9121b;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li:hover a,#cssmenu > ul li ul li a:active,#cssmenu > ul li ul li a:hover{clear:left;background:#ec454e;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li ul.navigation-3{display:none;margin:0;padding:0;list-style:none;position:absolute;left:145px;top:-2px;padding:1px 1px 0 1px;border:1px solid #b9121b;border-left:1px solid #b9121b;background:#fff;z-index:900}#cssmenu > ul li ul li:hover ul.navigation-3{display:block}#cssmenu > ul li ul li ul.navigation-3 li a:link,#cssmenu > ul li ul li ul.navigation-3 li a:visited{background:#b9121b}#cssmenu > ul li ul li ul.navigation-3 li:hover a,#cssmenu > ul li ul li ul.navigation-3 li a:hover,#cssmenu > ul li ul li ul.navigation-3 li a:active{background:#ec454e}</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>

 ပုံစံ  ( ၂ ) 

 ပု့စံ ( ၂ ) အားနမူနာ ကြည့်ရန်    သည်မှာ   သွားလိုက်ပါ

            <style type="text/css">#cssmenu{border:1px solid #009;background:#009}#cssmenu > ul{padding:1px 0;margin:0;list-style:none;width:100%;height:21px;border-top:1px solid #FFF;border-bottom:1px solid #FFF;font:normal 8pt verdana,arial,helvetica}#cssmenu > ul li{margin:0;padding:0;display:block;float:left;position:relative;width:148px}#cssmenu > ul li a:link,#cssmenu > ul li a:visited{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#009;color:#fff;width:148px;height:13px}#cssmenu > ul li:hover a,#cssmenu > ul li a:hover,#cssmenu > ul li a:active{padding:4px 0;display:block;text-align:center;text-decoration:none;background:#06F;color:#fff;width:146px;height:13px;border-left:1px solid #fff;border-right:1px solid #fff}#cssmenu > ul li ul{margin:0;padding:1px 1px 0;list-style:none;display:none;background:#fff;width:146px;position:absolute;top:21px;left:-1px;border:1px solid #009;border-top:none}#cssmenu > ul li:hover ul{display:block}#cssmenu > ul li ul li{clear:left;width:146px}#cssmenu > ul li ul li a:link,#cssmenu > ul li ul li a:visited{clear:left;background:#009;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li:hover a,#cssmenu > ul li ul li a:active,#cssmenu > ul li ul li a:hover{clear:left;background:#06F;padding:4px 0;width:146px;border:none;border-bottom:1px solid #fff;position:relative;z-index:1000}#cssmenu > ul li ul li ul.navigation-3{display:none;margin:0;padding:0;list-style:none;position:absolute;left:145px;top:-2px;padding:1px 1px 0 1px;border:1px solid #009;border-left:1px solid #009;background:#fff;z-index:900}#cssmenu > ul li ul li:hover ul.navigation-3{display:block}#cssmenu > ul li ul li ul.navigation-3 li a:link,#cssmenu > ul li ul li ul.navigation-3 li a:visited{background:#009}#cssmenu > ul li ul li ul.navigation-3 li:hover a,#cssmenu > ul li ul li ul.navigation-3 li a:hover,#cssmenu > ul li ul li ul.navigation-3 li a:active{background:#06F}</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>

ပုံစံ  ( ၃ ) 

ပုံစံ (၃) အားနမူနာကြည့်ရန်  သည်မှာ   သွားလိုက်ပါနော်။

           <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Capriola);/* Let's import the lovely google font,please keep this line at the top of your stylesheet *//* Menu CSS */#cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a{padding:0;margin:0;line-height:1;font-family:'Capriola',sans-serif}#cssmenu:before,#cssmenu:after,#cssmenu > ul:before,#cssmenu > ul:after{content:'';display:table}#cssmenu:after,#cssmenu > ul:after{clear:both}#cssmenu{zoom:1;height:69px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIjqV424VkeZVf3frI6suCMQeEJzLEiYk2JOCxSdnJp_U8b78ooKGDhb3uh9BikLqo0E8qyvy5Q2-QbAUQyZUk2UWpoYyH3W6VdDSYbgph-7ZvwWuAm836baFHS2ucRP9LXp8C-DELPduO/s1600/bottom-bg.png) repeat-x center bottom;border-radius:2px;width:auto}#cssmenu ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4Q3T2OtAFi8JUpFEJynYzVRrw6XagE7H0IC6CfZPOJxpp1OVwsiBG5MQh36KS4RBVxBAJyj2W2W1F7zSZvHkUdKKE-EIhjkmKnmp2PTC4LmTCkALGQQRmKCULagkHqYh4Xn9Mll2rLjt/s1600/nav-bg.png) repeat-x 0 4px;height:69px}#cssmenu ul li{float:left;list-style:none}#cssmenu ul li a{display:block;height:37px;padding:22px 30px 0;margin:4px 2px 0;border-radius:2px 2px 0 0;text-decoration:none;font-size:15px;color:white;text-shadow:0 1px 1px rgba(0,0,0,0.75);font-weight:400;opacity:.9}#cssmenu ul li:first-child a{margin:4px 2px 0 0}#cssmenu ul li a:hover,#cssmenu ul li.active a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfqRTO8sk67MBKvmuMddpB8YfbxhHpfOpBu_ezvV1WlSx9GIKl24XH3tqcVgV4nrQepIiirVGnky3pDUiUApRv3eEfMl1dEQ2SQ1dKRiyJzVhbpgLETEfLcKad-Htdx4Jpe-2yNj0HkRLi/s1600/color.png) center bottom;display:block;height:37px;margin-top:0;padding-top:26px;color:#004f7c;text-shadow:0 1px 1px rgba(255,255,255,0.55);opacity: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><a href="#"><span>Products</span></a></li> <li><a href="#"><span>About</span></a></li> <li class="last"><a href="#"><span>Contact</span></a></li> </ul> </div>

မှတ်ချက်  ။                ။ ကုဒ်မှာပါသော ခေါင်းစဉ်အမည်များကို ကြိုက်သလို ပြုပြင်ပါနော်..

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

ဘလော့ခရီးသည်သို့ { ဒီမှာ } သွားလိုက်ပါ လယ်တီမြေသားသို့{ ဒီမှာ } သွားလိုက်ပါ