April 19, 2012
Simple CSS Menu Style 1
Demo:
ရိုးရွင္းေပမဲ့ လွတဲ့ menu ေလးပါ။ သံုးရတာလဲလြယ္ပါတယ္...
ေအာက္က code ကို ]]></b:skin> အေပၚမွာထည့္ေပးပါ။
ul.arrowunderline{ list-style-type:none; margin:0; padding:0; text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */ font: bold 16px Georgia; } ul.arrowunderline li{ display:inline; margin-right:25px; } ul.arrowunderline li a{ position:relative; color:black; padding-bottom:8px; text-decoration:none; } ul.arrowunderline li a:hover{ border-bottom:3px solid purple; } ul.arrowunderline li a:hover:after{ content:''; width:0; height:0; position:absolute; left:50%; margin-left:-5px; bottom: 0; border-width:5px; border-style:solid; border-color: transparent transparent purple transparent; }
ေအာက္က code ကို Design - Page Elements မွ Add a gadget ကိုႏွိပ္ၿပီး HTML&JavaScript မွာ ထည့္ေပးၿပီး widget ကို မိမိ ဘေလာ့ႏွင့္ လိုက္ဖက္ေသာ ေနရာကို ေရႊ႕ေပးလိုက္ပါ။
<ul class="arrowunderline">
<li><a href="YOUR LINK HERE">YOUR TEXT HERE</a></li>
<li><a href="YOUR LINK HERE">YOUR TEXT HERE</a></li>
<li class="selected"><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>
YOUR LINK HERE နဲ႔ YOUR TEXT HERE ေနရာမွာ ထည့္ခ်င္ေသာ link နဲ႔ စာကို ထည့္ေပးလိုက္ပါ။
မွတ္ခ်က္မရွိေသးပါ...