April 20, 2012
Simple CSS Menu Style 3
Demo:
ေအာက္က code ကို ]]></b:skin> အေပၚမွာ ထည့္ေပးလိုက္ပါ။
.shadowblockmenu{ font-weight: bold; font-size: 85%; width: 100%; } .shadowblockmenu ul{ border: 1px solid #BBB; border-width: 1px 0; padding: 0; margin: 0; overflow: hidden; } .shadowblockmenu ul li{ display: inline; margin:0; padding:0; } .shadowblockmenu ul li a{ display:block; float:left; text-transform: uppercase; color: #494949; padding: 8px 15px 8px 9px; margin: 0; text-decoration: none; border-right: 1px solid #BBB; -moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); -webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); text-shadow: 0 -1px 1px #cfcfcf; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .shadowblockmenu li:nth-of-type(1) a{ border-left: 1px solid #BBB; padding-left:25px; background: url(media/onebit_home.png) 1px center no-repeat; } .shadowblockmenu li:nth-of-type(2) a{ padding-left:25px; background: url(media/onebit_bulb.png) 1px center no-repeat; } .shadowblockmenu ul li a:hover{ color: black; -moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); -webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); }
ေအာက္က code ကို Design - Page Elements မွ Add a gadget ကိုႏွိပ္ၿပီး HTML&JavaScript မွာ ထည့္ေပးၿပီး widget ကို မိမိ ဘေလာ့ႏွင့္ လိုက္ဖက္ေသာ ေနရာကို ေရႊ႕ေပးလိုက္ပါ။
<div class="shadowblockmenu">
<ul>
<li><a href="YOUR LINK HERE">YOUR TEXT HERE</a></li>
<li><a href="YOUR LINK HERE">YOUR TEXT HERE</a></li>
<li><a href="YOUR LINK HERE">YOUR TEXT HERE</a></li>
<li><a href="YOUR LINK HERE">YOUR TEXT HERE</a></li>
<li><a href="YOUR LINK HERE">YOUR TEXT HERE</a></li>
<li><a href="YOUR LINK HERE">YOUR TEXT HERE</a></li>
</ul>
</div>
YOUR LINK HERE နဲ႔ YOUR TEXT HERE ေနရာမွာ ထည့္ခ်င္ေသာ link နဲ႔ စာကို ထည့္ေပးလိုက္ပါ။
မွတ္ခ်က္မရွိေသးပါ...