Shwe Min Wun: ဘေလာ.ဂါသူငယ္ခ်င္းေတြအတြက္ Sexy Sliding Java Script Side Bar Menu ဆိုတဲ.menu အသစ္အလန္းစားေလး

ဘေလာ.ဂါသူငယ္ခ်င္းေတြအတြက္ Sexy Sliding Java Script Side Bar Menu ဆိုတဲ.menu အသစ္အလန္းစားေလးပါ..menu မပါတဲ.template ေတြအတြက္...ဒါမွမဟုတ္ရင္လည္း Main Menu မွာမထည္.ဘဲသီးသန္ခြဲထားခ်င္တဲ.အေႀကာင္းအရာ..ဥပမာ..။ပရဟိတ/ေႀကာ္ျငာ ..အစရိွသျဖင္.ေပါ.ေလ..အဆင္ေျပပါတယ္...ဆိုဒ္ဘားရဲ.ေဘးေဘာင္ထဲမွာ၀င္ေနတာဆိုေတာ.အျမင္ရွင္းျပီးႀကည္.လို.လည္လွပါတယ္..HTML ၀င္စရာမလိုပဲ Java Script ကေန အလြယ္တစ္ကူထည္.လို.အဆင္ေျပပါတယ္.. ပထမဦးဆံုးဒီေအာက္ကကုဒ္ေတြကိုေကာ္ပီကူးလိုက္ပါ..

<style>

body{

font-size:75%;

}

outline: none;

}

a:active{

outline: none;

}

#sideBar{

text-align:left;

}

#sideBar h2{

color:#F0FFFF;

font-size:110%;

font-family:arial;

margin:10px 10px 10px 10px;

font-weight:bold !important;

}

#sideBar h2 span{

font-size:125%;

font-weight:normal !important;

}

#sideBar ul{

margin:0px 0px 0px 0px;

padding:0px 0px 0px 0px;

}

#sideBar li{

margin:0px 5px 5px 10px;

padding: 0 0 0 10px;

list-style-type:none;

display:block;

background-color:#DA1074;

width:177px;

color:#FFFFFF;

}

#sideBar li a{

width:100%;

}

#sideBar li a:link,

#sideBar li a:visited{

color:#FFFFFF;

font-family:verdana;

font-size:100%;

text-decoration:none;

display:block;

margin:0px 0px 0px 0px;

padding:0 0 0 20px;

width:100%;

}

#sideBar li a:hover{

color:#FFFF00;

text-decoration:underline;

}

#sideBar{

position: fixed;

width: auto;

height: auto;

top: 140px;

left:0px;

background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMgoVOFVQVWsstYxkzMDay_QNSdzF33fJiSFp9Cn7UTeMWo0zsCC2YCjfXwBj8Ses80Wpetos1tgtF29YnBz_brNdqsXXSpDs9ZZ5GAJQnFV1cuzMgTId_23bnFIehRZwsSkXKx720vSnV/s320/left.collapse.border.png);

background-position:top right;

background-repeat:repeat-y;

}

#sideBarTab{

float:left;

height:137px;

width:28px;

}

#sideBarTab img{

border:0px solid #FFFFFF;

}

#sideBarContents{

float:left;

overflow:hidden !important;

width:200px;

height:320px;

}

#sideBarContentsInner{

width:200px;

}</style>

<h2>
Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>
</div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWiY28mMX_aRstUOAI_rqMxMdkSYRsKFxuId34Uki9pnO3PJp4r6Ce779Wm22U40O8sa6Sr6GyhSd3qdFcu7qcY8TEMSf0E17v97Rgh1nzI-gVbqsZIVf_f0lCmKzCsah_Gjt_mvWrdhps/s320/sidebarcollapse.png" title="sideBar" /></a>

</div>

ျပီးရင္.....blogger signin>dashboard>layout>Add a Gadget>HTML java script ကေနျပီးကုဒ္ေတြကိုေကာ္ပီယူကူးထည္.လိုက္ပါ...
ကြ်န္ေတာ္.လိုဘ၀တူမအူမလည္ဘေလာ.ကာေလးေတြအတြက္အဆင္ေျပေအာင္
ပံုေတြပါတင္ေပးလိုက္ပါတယ္...(ဆရာႀကီး.ေတြအတြက္မဟုတ္ပါ).........