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 နဲ႔ စာကို ထည့္ေပးလိုက္ပါ။


မွတ္ခ်က္မရွိေသးပါ...

 
©2013 by Way To Professional | Blogger Help