blog အတြက္ အလြယ္သံုး menu မ်ား

layout ကိုသြားပါ add a Gadget ကိုႏွိပ္ပါ HTML/JavaScript ကိုႏွိပ္၍
ေအာက္တြင္ေပးထားေသာ လင္ ့ခ္မ်ား copy ယူ၍ paste ခ်ပါ။
(မီနဴး၁)

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMkaOrHO390tya4Xj7-AWDv22HtuuMZdg0QIIRlJAcRWHaiSbAV4Mwhx8zm3Fm_hTWDNKNAUzgX2YakCUpdNZeiHAStWCUDYkE9qh0oCMYPq8AsguaNpmpQKB8XTAg1OEQRuOI9UlkHCo/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcFkS9CCU4blsbkp0UQUAlRimcgxuzj0YH1ZkJIxeCuQjY3-fDsrjKCXpPCTaJucq5NAU8cpC9O2YbcSAZos6FgAjuTOd0Vb_9sJ-LK1oD9VcO84BO96mFwOFkEf8x9X8D65fEUqTTKXk/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul>

 <li><a href="ဤေနရာတြင္လင္ ့ခ္ထည္ ့ပါ"><span>လင္ ့ခ္အမည္ေရးပါ</span></a></li>

 <li><a href=""><span></span></a></li>

<li><a href=""><span></span></a></li>

 <li><a href=""><span></span></a></li>

<li><a href=""><span> </span></a></li>

 <li><a href=""><span> </span></a></li>

 <li><a href=""><span> </span></a></li>

 <li><a href=""><span> </span></a></li>

<li><a href=""><span> </span></a></li>

 <li><a href=""><span> </span></a></li>

<li><a href=""><span> </span></a></li>

 <li><a href=""><span> </span></a></li>

 <li><a href=""><span> </span></a></li> </ul> </div>


(မီနဴး ၂)

<table align="center"><tr><td><table align="center" border=1 cellpadding=7>

<tr><td><a href="လင္ခ္ ့ထည္ ့ပါ">အမည္ေရးပါ</a>

</td><td><a href=""></a>

</td><td><a href=""> </a>

</td><td><a href=""></a>

</td><td><a href=""></a>

</td><td><a href=""></a>

</td><td><a href=""></a>

</td><td><a href=""></a>

</td></tr></table></td></tr></table>


(မီနဴး၃)

<style type="text/css">

h5 {

font-family: arial, trebuchet-ms, tahoma;

font-size: 13px;

font-weight:bold;

padding: 0 0 1em;

color: #ffffff;

}

.msg_list {

list-style: none;

padding: 0;

margin: 0;

width: 100%;

}

.msg_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

margin:1px;

background-color: #6D7B8D;

}

.msg_body {

padding: 5px 10px 15px;

background-color: #98AFC7;

}

</style>

<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/menuaccordion.js?attredirects=0&d=1 "></script>

<script type="text/javascript">

$(document).ready(function()

{

//hide the all of the element with class msg_body

$(".msg_body").hide();

//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked

$("#firstpane h5.msg_head").click(function()

{

$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");

});

//slides the element with class "msg_body" when mouse is over the paragraph

$("#secondpane h5.msg_head").mouseover(function()

{

$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");

});

});

</script>

<div class="msg_list" id="secondpane">

<h5 class="msg_head">ဒီမွာေခါင္းစဥ္ေရးပါ</h5>

<div class="msg_body">

ေခါင္းစဥ္ရဲ႕ကုဒ္ထည့္ရန္

</div>

<h5 class="msg_head">ဒီမွာေခါင္းစဥ္ေရးပါ</h5>

<div class="msg_body">

ေခါင္းစဥ္ရဲ႕ကုဒ္ထည့္ရန္

<h5 class="msg_head">ဒီမွာေခါင္းစဥ္ေရးပါ</h5>

<div class="msg_body">

ေခါင္းစဥ္ရဲ႕ကုဒ္ထည့္ရန္

</div>

</div>