Blog မွာ Animated Tab Menu ေလးထည့္မယ္
Posted in Blog Tab Menu
No comments
Tuesday, July 16, 2013 By Kaung Htet Htun
လုိက္ပါတယ္။ အရင္ဆံုး Blog ကုိ Sign in ၀င္လုိက္ပါ၊ ၿပီးရင္ Layout ကုိသြားၿပီး၊ Header ႀကီးရဲ႕ေအာက္
ေျခက Add a Gadget ကုိ ႏွိပ္ၿပီး HTML/Javascript ကုိ၀င္လုိက္ပါ။
<style>
.bt-menu{
border:5px solid #cd1000;
padding:0;
clear:both;
}
.bt-menu{
margin:0px;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #333333;
border-width: 1px 0;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8npVai6kvLV3MBpl_ttRNEftdlCmY3fwR33pz6Z3CPF_FwwS8a_e5T21b6JTNiee8k5tyEBSLSxJrOm7F2GFnoek3ou8CRC02uPaTXvm4TqHChcRAJ3HFXbRjh7amayt747yvsTAeVFKa/s1600/Bg.png)
center center repeat-x;
}
.bt-menu li{
display: inline;
}
.bt-menu li a{
float: left;
color: #333333;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid black;
}
.bt-menu li a:visited{
color: #333333;
}
.bt-menu li a:hover, .bt-menu li a.selected{
color: #333333;
background: #00A0E3;
}
</style>
<ul class="bt-menu">
<li><a href="#">Home</a></li>
<li><a href="#" >About Us </a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Tools</a></li>
</ul># ေတြ ေနရာမွာ ကုိယ့္ Label ရဲ႕ Link ကုိထည့္ရမွာျဖစ္ၿပီး၊ သူ႔ေနာက္က Home, About, Contact တုိ႔
ေနရာမွာ ကုိယ့္ Label ရဲ႕ နာမည္ကုိ ထည့္ေပးပါ၊ Menu ေတြ ထပ္ျဖည့္ခ်င္ေသးတယ္ဆုိရင္လည္း <li>
ကေနၿပီး </li> ဆံုးတဲ့အထိကုိ ေကာ္ပီကူးၿပီး သူ႔ေအာက္မွာ ထားေပးလုိက္ေပါ့ဗ်ာ။
အားလံုး အဆင္ေျပၾကပါေစ။
Related posts
Share this post
0 ေယာက္ Comment ေပးသြားတယ္: