Add Facebook Style DropDown Menu Bar To Blogger

ဒီေန႔တင္ေပးလုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blog မွာ Facebook Style DropDown Menu Bar ေလးထည့္နည္း/သုံးနည္းေလးပါ။ ဒီ Cond ေလးကုိေတာ့ က်ေနာ္ေလ့လာၿပီး ေရးၾကည့္တဲ့ Cond ေလးပါ။ HTMl Cond နဲ႔ CSS Cond ကုိေပါင္းစပ္ၿပီး ေရးလုိက္တာပါ။ CSS Cond ကုိ သီသန္႔ထည့္ေပးစရာမလုိေတာ့ပါ။ ေအာက္မွာ နမူနာ(Demo) သြားၾကည့္လုိ႔ရေအာင္ Link နဲ႔ တကြ Cond လည္းေပးထားပါတယ္။ Cond အဆင္မေျပတာေတြရွိခဲ့လွ်င္္ Comment ျဖင့္ ေမးနုိင္ပါတယ္။

၁။Sign In Blogger

၂။ Layout

၃။ Add a Gadget

၄။ HTML/JavaScript

၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။

<style>

    #thangmingnavbar {

        background: #3B5998;

        width: 100%;

        color: #FFF;

            margin: 10px 0;

            padding: 0;

            position: relative;

            border-top:0px solid #960100;

            height:35px;

    }

    #thangmingnav {

        margin: 0;

        padding: 0;

    }

    #thangming ul {

        float: left;

        list-style: none;

        margin: 0;

        padding: 0;

    }

    #thangmingnav li {

        list-style: none;

        margin: 0;

        padding: 0;      

    }

    #thangmingnav li a, #thangmingnav li a:link, #thangmingnav li a:visited {

        color: #FFF;

        display: block;

       font:bold 12px Helvetica, sans-serif;

       margin: 0;

        padding: 9px 12px 11px 12px;

            text-decoration: none;

            border-right:0px solid #627AAD;

    }

    #thangmingnav li a:hover, #thangmingnav li a:active {

        background: #627AAD;

        color: #FFF;

        display: block;

        text-decoration: none;

            margin: 0;

        padding: 9px 12px 11px 12px;       

    }

    #thangmingnav li {

        float: left;

        padding: 0;

    }

    #thangmingnav li ul {

        z-index: 9999;

        position: absolute;

        left: -999em;

        height: auto;

        width: 160px;

        margin: 0;

        padding: 0;

    }

    #thangmingnav li ul a {

        width: 140px;

    }

    #thangmingnav li ul ul {

        margin: -25px 0 0 161px;

    }



    #thangmingnav li:hover ul ul, #thangmingnav li:hover ul ul ul, #thangmingnav li.sfhover ul ul, #thangmingnav li.sfhover ul ul ul {

        left: -999em;

    }

    #thangmingnav li:hover ul, #thangmingnav li li:hover ul, #thangmingnav li li li:hover ul, #thangmingnav li.sfhover ul, #thangmingnav li li.sfhover ul, #thangmingnav li li li.sfhover ul {

        left: auto;

    }

    #thangmingnav li:hover, #thangmingnav li.sfhover {

        position: static;

    }

    #thangmingnav li li a, #thangmingnav li li a:link, #thangmingnav li li a:visited {

        background: #EDEFF4;

        width: 120px;

        color: #3B5998;

        display: block;

        font:normal 12px Helvetica, sans-serif;

        margin: 1px 0 0 0;

        padding: 9px 12px 10px 12px;

            text-decoration: none;

    z-index:9999;

    border:1px solid #ddd;



    -moz-border-radius:4px;

    -webkit-border-radius:4px;

    }

    #thangmingnav li li a:hover, #thangmingnav li li a:active {

        background: #627AAD;

        color: #FFF;

        display: block;  

    }

    #thangmingnav li li li a, #thangmingnav li li li a:link, #thangmingnav li li li a:visited {



        background: #EDEFF4;

        width: 120px;

        color: #3B5998;

        display: block;

        font:normal 12px Helvetica, sans-serif;

        padding: 9px 12px 10px 12px;

            text-decoration: none;

    z-index:9999;

    border:1px solid #ddd;

        margin: 1px 0 0  -14px;  

    }

    #thangmingnav li li li a:hover, #thangmingnav li li li a:active {

        background: #627AAD;

        color: #FFF;

        display: block;

    }

    </style>

    <br />

<div id="thangmingnavbar">

<ul id="thangmingnav">

<li>

                  <a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Home</a>

                </li>

<li>

                  <a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">About &amp; Contact</a>

               </li>

<li>

                  <a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Windown </a>

               </li>

<li>

                  <a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Myanmar Font</a>

                </li>

<li>

                   <a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Free Download</a>



                    <ul>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Template</a></li>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">You Tube</a></li>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Blogger Technology»</a>

                       <ul>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Blogger Tutorial</a></li>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">CSS and HTML</a></li>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Sign Up</a></li>

</ul>

</li>

</ul>

</li>

<li>

                  <a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Android Technology</a>

               </li>

<li>

                  <a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Edit This</a>

               </li>

</ul>

</div>

၆။ ထည့္ၿပီးရင္ Save ကုိနုိပ္ေပးလုိက္ပါ။