Blog မွာ Horizontal Drop Down menu လွလွေလးထားခ်င္ရင္

Blog မွာ Horizontal Drop Down menu လွလွေလးထားခ်င္ရင္

အဆင့္ 1  Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။

အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

<ul class="glossymenu">
    <li class="separator"><a href="#"><b>Reservations</b></a></li>
                       /* Added for the drop down */
                   <ul class="child">
                           <li><a href="#"><b>New Reservation</b></a></li>
                           <li><a href="#"><b>Search Reservation</b></a></li>
                           <li><a href="#"><b>Search Customer</b></a></li>
                           <li><a href="#"><b>Search Vehicle</b></a></li>
                       </ul>
            <li class="separator"><a href="#"><b>Rentals</b></a></li>
    <li class="separator"><a href="#"><b>Tariffs</b></a></li>  

            <li class="separator"><a href="#"><b>Fleet</b></a></li>
    <li class="separator"><a href="#"><b>Tools</b></a></li>
    <li class="separator"><a href="#"><b>Reports</b></a></li>
            <li class="separator"><a href="#"><b>System Management</b></a></li>       
    </ul>

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

 

.glossymenu{

    padding: 0 0 0 0px;
    margin: 0 auto 0 auto;
    background: url(../images/menur_bg.gif) repeat-x;
    height: 36px;
    list-style: none;
    border:solid 1px #CCC;
}

.glossymenu li{

    float:left;
}

.glossymenu li a{

    float: left;
    display: block;
    color:#000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 20px;

}

.glossymenu li a b{

    float: left;
    display:block;
    padding: 0 28px 0 8px;
}

.glossymenu li a:hover{

    color: #fff;
    background: url(../images/menur_hover_left.gif) no-repeat;
    background-position: left bottom;;
}

.glossymenu li a:hover b{

    color: #fff;
    background-image: url(../images/menur_hover_right.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.glossymenu li.separator {

    background:url(../images/separator.gif) no-repeat;
    background-position:right;
    padding: 0 5px 0 3.5px;
}

   /* Added for the drop down */ 
.glossymenu .child {

    position:absolute;
    visibility:hidden;
    top:100px;
}

.glossymenu ul li:hover  {

    visibility:visible;
    z-index:9999;
}
 

 

ကိုထြန္းလင္း(တာပြန္)မွေႏြးေထြးစြာႀကိဳဆိုပါတယ္ခင္ဗ်ာ Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။