Blog မွာ Tab Menu ေလးထည့္ၾကမယ္ (ေရာင္စံုရတယ္ေနာ္)
Posted in Blog Tab Menu
No comments
Monday, July 15, 2013 By Kaung Htet Htun
တယ္ေနာ္။ ပထမဆံုး ဘေလာ့ရဲ႕ Layout ကုိသြားပါ၊ ၿပီးရင္ Header ရဲ႕ ေအာက္နားက Add a Gadget
ကုိႏွိပ္ပါ။
<style>
#tab_menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOyncrxhN-vUu_w265BojSA4Mb8nYlNYzp_d4FFd5bBWccC97x93btJn_szo6GJ-_UQtl5u4jiQPJcVL7W4ePsY5S1rV504rTmFzLE9rURcgs7FAsZfe9tuZtFCoV5w9gAEl5fAx3NFl5c/s1600/menu_bg.png) no-repeat;
height:50px;
width:960px;
line-height:50px;
list-style:none;
margin-top:10px;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
overflow:hidden;
}
#tab_menu li {
float:left;
border-right:1px solid #FFA722;
border-left:1px solid #CC5200;
}
#tab_menu li:first-child {
border-left:none;
}
#tab_menu li:last-child {
border-right:none;
}
#tab_menu li a{
text-decoration:none;
float:left;
display:block;
height:50px;
padding:0 20px;
color:#FFF;
}
#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
color:#622900;
text-shadow:1px 1px 0px #E8964B;
}
#tab_menu li a.tool{
color:#000;
text-shadow:1px 1px 0px #E8964B;
}
</style>
<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>
# ေတြ ေနရာမွာ လင့္ခ္ကုိ ထည့္ရမွာ ျဖစ္ၿပီး၊ Home တုိ႔၊ Product တုိ႔ေနရာမွာလည္း ကုိယ္လုပ္ခ်င္တဲ့
Menu ေလးေတြ ထည့္ေနာ္။ width: 960px. ေနရာမွာလည္း လုိအပ္သေလာက္ အက်ယ္ကုိ ခ်ဲ႕လုိ႔
ရတယ္။ ကဲ! ေနာက္ခံ အေရာင္ေလးေတြ မႀကိဳက္လုိ႔ ေျပာင္းခ်င္တယ္ဆုိလည္း ဒီမွာဗ်ား။ ကုဒ္ေတြရဲ႕
အေပၚဆံုးနားက background url ရဲ႕ အေနာက္မွာ ေနာက္ခံ အေရာင္လင့္ခ္ေလးကုိ ထည့္ၿပီး ေျပာင္းလုိ႔
ရပါတယ္။
ေနာက္ခံ အေရာင္ (၁)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnK0DVbYVb_8MDeEONtgNQVC32z1xK16i5dUQkrBkunYjFVT6WBYodHHSn0TCzt4tfwups4Af6-hk9Cu1YO81p_Kr0uBEQGuMkoBy0O4ys4CrSL68oW7AuHLYI942Ivt5ZtCbDATe8yYes/s1600/menu_bg_1.png
ေနာက္ခံ အေရာင္ (၂)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv5_Fok9ABADh6ZKhvxHOuV6LqBDki3l4wGgWiUgd0m1U6QQoYxDP2HYz_rro6KsHwoiKwubalsbDdHUW9adGa3nlpJuaYrvwrIXsqCqzp09wfYZgjQS1MBiFJE0mbilW5UUsNXfc_TdqU/s1600/menu_bg_2.png
ေနာက္ခံ အေရာင္ (၃)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMNXeqZJdtdu91aWInPBUZuyLmIEXcQ_NOJTvVktExHQ2jBv47G8HGPuuaFcz1y3FheOoj-dSu2F16li4y_5Vj4MzCPQ4J3jW5nHRvn29v80SENrdmrL0Wag5KAkL-MRE78_4Yqvuh-D6/s1600/menu_bg_3.png
ေနာက္ခံ အေရာင္ (၄)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5YcNhJrz3yjtgmKqTk6Xj0K_EBYgxqjs3PIRpcVvD2urW5Sw7t7Q2UGyZFuekBNvNF9hqBX1iIqPg3FmagTgh9KwB583FHcnAbCzR5GuER0awkSaLwAOmDBy1b7XfTE_js5unFlPmfp9o/s1600/menu_bg_4.png
ေနာက္ခံ အေရာင္ (၅)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWepZfsXZN9QZalNu1oEtTsDHkqzVDK8IVh3WQHdHQogFQEcXnRQtRfFJ3_texy8_kJBCr9poKqqfQm2NTR5Hv65GylngcHxYXMpmFZm3A9xdnW5XJ7vygjeYPmmCqp0hhJ2GIymyMKCb5/s1600/menu_bg_5.png
ေနာက္ခံ အေရာင္ (၆)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjcvmDS1-AXJQS0IBBvre2WbZvn4KKfOKjtIL5VHJrs9GpUAIOffovyhwS1M7IJReDf0ineoJ0G2KNUH8tDi_md40qk43oaYGZMIKuvRLIeeVqQNttVFa_5vehb06ADZnYh5eeEv6RrPeR/s1600/menu_bg_6.png
ေနာက္ခံ အေရာင္ (၇)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPg1SUytRq222L-hbesLktHsCRpJ4y_K_2OPxyjOx03exAV_fbU5QUvbx7pmp3AjK9AKAvrm7RxCyUElETRpqjCLSgNERkJBBz6SyqY51o8jjIbmwhdpJjFEMjOJeLkFlxKtH5FyAaXzFV/s1600/menu_bg_7.png
ေနာက္ခံ အေရာင္ (၈)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2IABTFKs84Fi_-RARXxMve4HDejQ85ROyeXa_GKhVFdp0DXnEeYaz68GXMwFUvrQiX3GX0lsDhcqhyphenhyphent6w3iPxOsONBHYFsmCUrXwtYh6Y5s9To5AuCeZmcc6OiIXSumwtgdVjD4BS01hY/s1600/menu_bg_8.png
ေနာက္ခံ အေရာင္ (၉)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtuzWE1BU255nHu5AYCAeCuC_7XZOYnkDlx2ZUVFRr0Oy9NCT3I_-xeOif8yE3kNvWDTBaSSOSCErueoDDNkIzCOzcfaEBu27Kd4KVCI9Tb52-Ln5SeMhQ4akotQM5iuoJq9CcbxP-TWwF/s1600/menu_bg_9.png
ေနာက္ခံ အေရာင္ (၁၀)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_i3Cdi9AiVx6dYKUUznsAFPVK5XHvx6OhqUWjoPW4E3_ud1aXIh5y8_gAJl_85Fz8k-Xb6gQR2k_oInSHK8zGG0dxmZ-foFAq9-OYpq0dIzSyBzkzrWNW68hm4KhktpKsUrhLpYo_E8Q7/s1600/menu_bg_10.png
အားလံုး အဆင္ေျပၾကမယ္လုိ႔ ယူဆပါတယ္ဗ်ာ။
Related posts
Share this post
0 ေယာက္ Comment ေပးသြားတယ္: