Attractive Effect CSS3 Drop Down Menu For Blogger

                Menu Bar ေလးတစ္ခုထပ္ျပီးမွ်ေ၀ေပးလိုက္ပါတယ္ဗ်ာ
ကၽြန္ေတာ္ Menu Bar ေတြမ်ိဳးစံုကို
မွ်ေ၀ေပးထားပါတယ္ဗ်ာ တစ္ခုနဲ႕တစ္ခုေတာ႕ မတူတဲ႕ Design ေလးေတြနဲ႕ပါ။ ကၽြန္ေတာ္တင္ေပးလိုက္
တဲ႕Css3 code ေတြကလည္းအခုမွစတဲ႕ Blogger ညီကိုမ်ားအတြက္ အဆင္ေျပေျပလိုက္လုပ္ႏိုင္ပါတယ္။
ေအာက္မွာလည္း သူငယ္ခ်င္းမ်ား အဆင္ေျပေျပနဲ႕ လိုက္လုပ္ႏိုင္ေအာင္လို႕ Code ေတြကို ပံုနဲ႕တကြအ
ေသးစိတ္ရွင္းျပေပးလိုက္ပါတယ္ဗ်ာ။ လြယ္လြယ္ေလးပါ။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 

ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။ 

အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

<ul class="navblogtrix">
<li><a href="http://www.pyaephyo.com/">Home</a></li>
<li><a href="http://www.pyaephyo.com/">Tutorials</a>
            <ul class="subs">
<li><a href="#">HTML / CSS</a></li>
<li><a href="#">JS / jQuery</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">Resources</a>
            <ul class="subs">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">HTML / CSS</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a>
            <ul class="subs">
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Live</a></li>
<li><a href="#">Branches</a></li>
</ul>
</li>
<li><a href="#">Back</a></li>
</ul>

ၿပီးသြားရင္ေအာက္ကအဆင္႕အတိုင္းလုိက္လုပ္ေပးပါ။

အဆင္႕ 4  Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ  ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။

/* The CSS Code for the menu starts here pyaephyo.com */
.navblogtrix,.nav ul {
    list-style:none;
    margin:0;
    padding:0;
    height:600px;
}

.navblogtrix {
    position:relative;
}

.navblogtrix ul {
    height:0;
    left:0;
    overflow:hidden;
    position:absolute;
    top:46px;
}

.navblogtrix li {
    float:left;
    position:relative;
    list-style: none;
}

.navblogtrix li a {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    background-color:#7770B4;
    border:1px solid #6E67A6;
    color:#FFF;
    display:block;
    font-size:16px;
    line-height:35px;
    padding:5px 20px;
    text-decoration:none;
    transition:0.5s;
}

.navblogtrix li:hover > a {
    background:#8CCA33;
    border-color:#6E67A6;
    color:#fff;
}

.navblogtrix li:hover ul.subs {
    height:auto;
    width:180px;
}

.navblogtrix ul li {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width:100%;
    list-style: none;
}

.navblogtrix li ul li {
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;
    list-style: none;
}

.navblogtrix li:hover ul li {
    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;
}

.navblogtrix ul li a {
    background:#7770B4;
    border-color:#6E67A6;
    color:#fff;
    line-height:1px;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}

.navblogtrix li:hover ul li a {
    line-height:35px;
}

.navblogtrix ul li a:hover {
    background:#8CCA33;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));

}