CSS3 Drop Down Navigation Bar

က်ြန္ေတာ္ဒီတစ္ခါတင္ေပးခ်င္တာက သူငယ္ခ်င္းေတြေတာ္ေတာ္မ်ားမ်ားကလည္းသိခ်င္ၾကတယ္။
ဘေလာ့စ္မွာ ပံုထဲကအတိုင္း Down Navigation Bar ေလးဘယ္လိုလုပ္မလဲဆိုတာကိုေပါ့။
ဒါကေတာ့ဒီဇိုင္းအလန္းေလးေပါ့ေနာ္။သူမ်ားေတြလည္းအမ်ိဳးမ်ိဳးတင္ထားၾကပါတယ္။
ဒီဇိုင္းေလးကို နမူနာ ဒီမွာသြားၾကည့္  လိုက္ပါအံုး။ ၾကိဳက္တယ္ဆိုရင္ေအာက္မွာရွင္းျပထားပါတယ္
Template ကို Blackup လုပ္ထားပါ။

ပထမဆံုး Go to Blogger >> Template >> EditHTML သြားလိုက္ပါ။

အခုျပထားတဲ့ဟာကိုရွာလိုက္ပါ-  <b:skin>....</b:skin> ကိုရွာလိုက္ပါ။

ေအာက္မွာပံုေလးနဲ႔ျပထားပါတယ္.

 

ဟုတ္ျပီ အဲ့ဒီ့ 2 ခုၾကားကိုတစ္ခ်က္ကလစ္လိုက္ပါ။  </b:skin> tag ေလးရဲ႕အေပၚမွာ

ေအာက္ကကုဒ္ကိုကူးျပီးထည့္ေပးလိုက္ပါ။

/* The CSS Code for the menu starts here bloggertrix.com */ .btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {  margin: 0;  padding: 0;  border: none;  outline: none; } .btrix_menu {  height: 40px;  width: 525px;  background: #4c4e5a;  background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px; } .btrix_menu li {  position: relative;  list-style: none;  float: left;  display: block;  height: 40px; } .btrix_menu li a {  display: block;  padding: 0 14px;  margin: 6px 0;  line-height: 28px;  text-decoration: none;  border-left: 1px solid #393942;  border-right: 1px solid #4f5058;  font-family: Helvetica, Arial, sans-serif;  font-weight: bold;  font-size: 13px;  color: #f3f3f3;  text-shadow: 1px 1px 1px rgba(0,0,0,.6);  -webkit-transition: color .2s ease-in-out;  -moz-transition: color .2s ease-in-out;  -o-transition: color .2s ease-in-out;  -ms-transition: color .2s ease-in-out;  transition: color .2s ease-in-out; } .btrix_menu li:first-child a { border-left: none; } .btrix_menu li:last-child a{ border-right: none; } .btrix_menu li:hover > a { color: #8fde62; } .btrix_menu ul {  position: absolute;  top: 40px;  left: 0;  opacity: 0;  background: #1f2024;  -webkit-border-radius: 0 0 5px 5px;  -moz-border-radius: 0 0 5px 5px;  border-radius: 0 0 5px 5px;  -webkit-transition: opacity .25s ease .1s;  -moz-transition: opacity .25s ease .1s;  -o-transition: opacity .25s ease .1s;  -ms-transition: opacity .25s ease .1s;  transition: opacity .25s ease .1s; } .btrix_menu li:hover > ul { opacity: 1; } .btrix_menu ul li {  height: 0;  overflow: hidden;  padding: 0;  -webkit-transition: height .25s ease .1s;  -moz-transition: height .25s ease .1s;  -o-transition: height .25s ease .1s;  -ms-transition: height .25s ease .1s;  transition: height .25s ease .1s; } .btrix_menu li:hover > ul li {  height: 36px;  overflow: visible;  padding: 0; } .btrix_menu ul li a {  width: 100px;  padding: 4px 0 4px 40px;  margin: 0;  border: none;  border-bottom: 1px solid #353539; } .btrix_menu ul li:last-child a { border: none; } .btrix_menu a.documents { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3Rdw5zzf3GYlbsxP9FHJMwQHuOFbe1y5YPTLzBSKnV6jTYtKmFiHvgjxqO2nWWo0VAA8T9uewsKJ3hnCO88E26St-_yut7_tDY1or3oBuZwcXNPPtvJaxu6LtVlE-4vh0prqwX_SQySD/s1600/docs.png) no-repeat 6px center; } .btrix_menu a.messages { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimtLIfNGukvq4kNBdWu8KvgCfU8rRRZrhuheNcuBuLnLkK0_XRtku-QRfE-lFHqTR0hhLC6WiRnOxc7ipQOQdxUs0XvIan-g4iGRY4aljbVEXHnlTOjKeaAZeTuBmAuwM79RyB78Xfnmnt/s1600/bubble.png) no-repeat 6px center; } .btrix_menu a.signout { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5NH4w03kg09NmdFzNcG7oPIM_xlkVE0Zx7tiz_zKAW71VxRIOAleP5SkvwQ0o93kg7snXCGJISEVGwQV-CoUGQqQnMbZzLx690lA5_J0QMMycWrJAT40CbOi_-zRCAgxcb0-dZkGyKqk/s1600/arrow.png) no-repeat 6px center; }

ဒါေလးကိုထည့္ျပီးသြားရင္ က်ြန္ေတာ္တို႔ Layout ကိုဆက္သြားမယ္။
Add Gatget ကေန HTML/Javascript ကေန ေအာက္ကကုဒ္ကိုကူးထည့္လိုက္ပါ။

<ul class="btrix_menu">  <li><a href="#">Home</a></li>  <li><a href="#">Likes</a></li>  <li><a href="#">Views</a>   <ul>    <li><a href="#" class="documents">Documents</a></li>    <li><a href="#" class="messages">Messages</a></li>    <li><a href="#" class="signout">Sign Out</a></li>   </ul>  </li>  <li><a href="#">Uploads</a></li>  <li><a href="#">Videos</a></li>     <li><a href="#">About</a></li>  <li><a href="http://www.bloggertrix.com/">Contact us</a></li> </ul>

 # ျပထားတဲ့ေနရာမွာ ကိုယ္ထားမယ့္လင့္ကိုထည့္ေပးပါ။ အစိမ္းနဲ႔ ေရးထားတဲ့ေနရာမွာ
အဲ့ဒီ့လင့္နဲ႔သက္ဆိုင္တဲ့ နာမည္ထည့္ေပးပါ။အိုေကဒီေလာက္ဆိုအဆင္ေျပျပီေပါ့ေနာ္။
ျပီးရင္ Save လုပ္ဖို႔မေမ့နဲ႔အုန္းေနာ္။
ရန္ကုန္သား(နည္းပညာျမိဳ႕ေတာ္)