လွၿပီးလန္းတဲ့ အနီႏွင့္အျပာ Drop Down Menu (For Blogger)

မဂၤလာပါ။ ကြ်န္ေတာ္က ဦးဦး DC ပါ။ အခု ကြ်န္ေတာ္ Drop down menu ေလး share ပါမယ္။ အခု Drop down menu က Blogger အတြက္ပါ။ ထည့္ပံုထည့္နည္းပါေျပာပါမယ္။ အခုေအာက္ပါပံုေလးက Drop down menu နမူနာပံုေလးပါ။

ထည့္နည္း

1) သင့္ Blogger account ကို Sign in လုပ္ေပးပါ။
2) သင့္  Blogger Dashboard ကေန Layout ကိုကလစ္ရပါ့မယ္
3) Page Elements ကိုကလစ္ပါ
4) Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
5) HTML/Javascript ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာ ေအာက္ပါေပးထားတဲ့ code ေတြကို Copy ယူ ထည့္လိုက္ပါ။

<style>
@charset "UTF-8";
/* Starter CSS for Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
}
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 100%;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
/* Custom CSS Styles */
#cssmenu {
  width: auto;
  font-family: Helvetica, Arial, sans-serif;
}
#cssmenu:before {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6EiwtJmzAcjc0IcWum7u1E3NtFVHePPE_ZkygAFaF4ccDWPbH7Q_bRt9anHfEMGYul_7K0TT8v1A26b21Kqi8VHn3Kj7_1eVZ9CRph790IGyl7BRQe8x7Bw3XfG9B9dA1Hr3aZMdMDYY/s1600/Droid+Chit+Thu+2.png);
  background-color: #606a77;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f5864), color-stop(1, #49515b));
  background-image: -webkit-linear-gradient(top, #4f5864, #49515b);
  background-image: -moz-linear-gradient(top, #4f5864, #49515b);
  background-image: -o-linear-gradient(top, #4f5864, #49515b);
  background-image: linear-gradient(#4f5864, #49515b);
  -moz-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  -webkit-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
  content: '';
  display: block;
  height: 8px;
}
#cssmenu > ul {
  border-bottom: 1px solid #252A30;
  border-top: 1px solid #252A30;
  -moz-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX89yQbS3RMZRc1Fxr8JF7_g8IlTbNAM7zlSUrWy-ql_8EfKK0eTVRR9YrnRiU2IAlVlP42QbhDfFbM7VLn9e51wKBuCg2B3S5QCUHdiHRXpQG7b3qQDCNH2_Rhn2wU4jkkfbYqY_ksgg/s1600/Droid+Chit+Thu+4.png);
  background-color: #566171;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6e7d8f), color-stop(1, #404854));
  background-image: -webkit-linear-gradient(top, #6e7d8f, #404854);
  background-image: -moz-linear-gradient(top, #6e7d8f, #404854);
  background-image: -o-linear-gradient(top, #6e7d8f, #404854);
  background-image: linear-gradient(#6e7d8f, #404854);
  height: 27px;
  padding: 15px 15px 15px 5px;
}
#cssmenu > ul > li {
  margin: 0 10px;
}
#cssmenu > ul > li.has-sub:hover > a {
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu > ul > li:hover > a {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkjSdWdBDFxasen0xomC4e3A2xp_t46bkWPzYZugOsnskq_dW3vdJQN8DJJr1MpU1xLD-x1LcSNWNTn8gc3Pxk5RYpWGWdqfuKKccz0yKyjOB6TXoA1lwteav76ZGuYY5JzL2n8wMhR8g/s1600/Droid+Chit+Thu+5.png);
  background-color: #e2e2e2;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #c8c8c8));
  background-image: -webkit-linear-gradient(top, #ffffff, #c8c8c8);
  background-image: -moz-linear-gradient(top, #ffffff, #c8c8c8);
  background-image: -o-linear-gradient(top, #ffffff, #c8c8c8);
  background-image: linear-gradient(#ffffff, #c8c8c8);
}
#cssmenu > ul > li.active:hover > a {
  background-image: url(3.bp.blogspot.com/-Edef0QPpVEM/VgZFpNz85RI/AAAAAAAAAK0/bdMGjNveryw/s1600/Droid%2BChit%2BThu%2B7.png);
  background-color: #cb7b72;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f49b8e), color-stop(1, #bd584d));
  background-image: -webkit-linear-gradient(top, #f49b8e, #bd584d);
  background-image: -moz-linear-gradient(top, #f49b8e, #bd584d);
  background-image: -o-linear-gradient(top, #f49b8e, #bd584d);
  background-image: linear-gradient(#f49b8e, #bd584d);
}
#cssmenu ul a {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkjSdWdBDFxasen0xomC4e3A2xp_t46bkWPzYZugOsnskq_dW3vdJQN8DJJr1MpU1xLD-x1LcSNWNTn8gc3Pxk5RYpWGWdqfuKKccz0yKyjOB6TXoA1lwteav76ZGuYY5JzL2n8wMhR8g/s1600/Droid+Chit+Thu+5.png);
  background-color: #c2c2c2;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(1, #a8a8a8));
  background-image: -webkit-linear-gradient(top, #f1f1f1, #a8a8a8);
  background-image: -moz-linear-gradient(top, #f1f1f1, #a8a8a8);
  background-image: -o-linear-gradient(top, #f1f1f1, #a8a8a8);
  background-image: linear-gradient(#f1f1f1, #a8a8a8);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
  color: #3c444d;
  font-size: 12px;
  line-height: 27px;
  padding: 0 20px;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
#cssmenu ul ul {
  width: 170px;
}
#cssmenu ul ul a {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  line-height: 150%;
}
#cssmenu ul .active > a {
  color: #FFF;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ0dwvkdLu5axSVQ0cYIxy6QLH97t3Y67xMSNn6sviumTxCA1LgIAGmyXdYBD_h5OH3Z-pAl0Qn7yOd1mG02sIA3SF8H79p0ABTb66vmBS4ymvXAyzjD6wkBdGd_lNz-L0XL-fGTL5DYM/s1600/Droid+Chit+Thu+3.png);
  background-color: #c46a60;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef7260), color-stop(1, #b04c41));
  background-image: -webkit-linear-gradient(top, #ef7260, #b04c41);
  background-image: -moz-linear-gradient(top, #ef7260, #b04c41);
  background-image: -o-linear-gradient(top, #ef7260, #b04c41);
  background-image: linear-gradient(#ef7260, #b04c41);
}
#cssmenu ul .has-sub {
  position: relative;
}
#cssmenu ul .has-sub ul {
  -moz-border-radius: 0 3px 3px 3px;
  -webkit-border-radius: 0 3px 3px 3px;
  border-radius: 0 3px 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuXRABzQsmua_zdh61DUmPXwb4Ocy2BAGQPPt6GLsoC9dfUW0sCmvhdibwu4S7th0MW4w64VjsRM5rBW7ieBGDtrTnoG7T1b7PTQyc9jnNxbKVfEUEyJmH9k3HlyNfoc5rC5pQXYQIXAI/s1600/Droid+Chit+Thu+6.png) repeat-x;
  background-color: #c3c3c3;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9e9e9), color-stop(1, #aaaaaa));
  background-image: -webkit-linear-gradient(top, #e9e9e9, #aaaaaa);
  background-image: -moz-linear-gradient(top, #e9e9e9, #aaaaaa);
  background-image: -o-linear-gradient(top, #e9e9e9, #aaaaaa);
  background-image: linear-gradient(#e9e9e9, #aaaaaa);
  padding: 3px 0;
}
#cssmenu ul .has-sub ul a {
  background: none;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid transparent;
  text-align: left;
}
#cssmenu ul .has-sub ul .has-sub a:after {
  content: none;
}
#cssmenu ul .has-sub li:hover > a {
  border-bottom: 1px solid #1D2024;
  color: #FFF;
  background-color: #55616f;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #56606f), color-stop(1, #3f4852));
  background-image: -webkit-linear-gradient(top, #56606f, #3f4852);
  background-image: -moz-linear-gradient(top, #56606f, #3f4852);
  background-image: -o-linear-gradient(top, #56606f, #3f4852);
  background-image: linear-gradient(#56606f, #3f4852);
  -moz-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
  -webkit-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
  box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
  position: relative;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
#cssmenu ul .has-sub li:hover > a:after {
  border-left: 0 none;
  background-color: #c35f54;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ea5f51), color-stop(1, #a9463b));
  background-image: -webkit-linear-gradient(top, #ea5f51, #a9463b);
  background-image: -moz-linear-gradient(top, #ea5f51, #a9463b);
  background-image: -o-linear-gradient(top, #ea5f51, #a9463b);
  background-image: linear-gradient(#ea5f51, #a9463b);
  -moz-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
  -webkit-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
  box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
  content: '';
  height: 100%;
  width: 6px;
  position: absolute;
  right: 0;
  top: 0;
}
#cssmenu ul .has-sub > a {
  padding-right: 0;
}
#cssmenu ul .has-sub > a:after {
  content: '▼';
  border-left: 1px solid rgba(100, 100, 100, 0.2);
  color: #5D6A7A;
  -moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
  -webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
  display: inline-block;
  font-size: 9px;
  margin-left: 5px;
  text-align: center;
  height: 25px;
  width: 24px;
  text-shadow: 0 -1px 0 #101417;
}
#cssmenu ul .active > a:after {
  color: #FFF;
}
#cssmenu ul ul a {
  font-size: 12px;
}

</style>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='/'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a>
            <ul>
               <li><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a></li>
               <li><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a>
            <ul>
               <li><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a></li>
               <li><a href='#'><span>ထည့္ရမည့္ ေနရာ အခြဲ</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a></li>
   <li><a href='#'><span>ထည့္ရမည့္ ေနရာ</span></a></li>
</ul>
</div>

ပိုၿပီးရွင္းလင္းေအာင္ အေရာင္ေလးေတြနဲ႕ ခြဲေပးထားပါတယ္။

# က သင္ထည့္လိုတဲ့ Website လင့္ေတြထည့္ပါ။
ထည့္ရမည့္ေနရာ မွာေတာ့ သင္လိုအပ္တာနာမည္ တိုတုိေပးၿပီးထည့္ႏိုင္ပါတယ္။
ထည့္ရမည့္ ေနရာ အခြဲ မွာေတာ့ ထည့္လိုတဲ့နာမည္ထည့္ပါ။ (ဥပမာ - Android -> Android app, Android game စသျဖင့္ ... Android သည္ ထည့္ရမည့္ေနရာျဖစ္ၿပီး Android app ႏွင့္ Android game တို႕ သည္ ထည့္ရမည့္ေနရာခြဲတြင္ ထည့္ရပါမည္)။

မိတ္ေဆြတို႕အဆင္ေျပပါေစ။ ထည့္ရတာ အဆင္မေျပခဲ့ဘူးဆိုရင္ေတာ့ http://droidchitthu.blogspot.com သို႕သြားၿပီး ေမးျမန္းႏိုင္ပါတယ္။ Blogger ခ်စ္သူမ်ားအားလံုး နည္းပညာျပန္လည္မွ်ေ၀ျခင္း ကို LIKE ေပးျခင္းျဖင့္ သင့္ Blog ကိုအားျဖည့္ေပးႏိုင္တဲ့ Blogger နည္းပညာမ်ား ရရွိမွာျဖစ္ပါတယ္။ အားလံုးပဲ က်န္းမာခ်မ္းသာၾကပါေစ။

Download ဆြဲနည္း အျပည့္အစံု ကို ဖတ္မယ္ဆိုရင္ ဒီကိုကလစ္ၿပီး ဖတ္ပါ။ အားေပးမွုအတြက္ ေက်းဇူးတင္ပါတယ္။

Droid ခ်စ္သူ ႏွင့္ အျခား ဘေလာ့(စ္)မွ နည္းပညာမ်ား ရယူလိုလွ်င္
 နည္းပညာျပန္လည္မွ်ေ၀ျခင္း LIKE လုပ္ေပးျခင္းျဖင့္ ရယူႏိုင္ပါတယ္။ LIKE လုပ္ခ်င္က https://www.facebook.com/DroidChitThu မွာ LIKE လုပ္ေပးျခင္းျဖင့္ အားေပးႏိုင္ပါတယ္။ 

 

Credit : http://droidchitthu.blogspot.com/2015/09/drop-down-menu-for-blogger.html

Posted in: Blogဆုိင္ရာ