IT Field Network: Blog Tab Menu

Showing posts with label Blog Tab Menu. Show all posts

အလန္းတကာ့အလန္းဆံုး CSS Drop Down Menu

By Kaung Htet Htun

အရမ္းလန္းတဲ့ CSS Drop Down Menu ေလးတစ္ခု ရွာေတြ႕လုိ႔ ေရးေပးလုိက္တယ္ဗ်ား...။ ပံုမွာျပထားတဲ့
အတုိင္း classic ဆန္ဆန္ လွပါတယ္။ လုပ္ခ်င္တယ္ဆုိရင္ Blog ကုိ Sign in ၀င္ပါ၊ Template ကုိသြားပါ။
Customize ကုိႏွိပ္ပါ။

Advanced ကုိႏွိပ္ပါ။ သူ႔ေဘးက CSS ကုဒ္ေတြ ထည့္ရမယ့္ အကြက္ထဲမွာ ေအာက္က ကုဒ္ေတြ ထည့္ေပး
လုိက္ပါ။

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

ဒီလုိမ်ိဳး(ေအာက္ပံုမွာၾကည့္ပါ)၊ ထည့္ၿပီးသြားရင္ Apply to Blogကုိ ႏွိပ္ပါ၊ (ပံုေသးေနရင္ပံုကုိကလစ္ေနာ္)

ေနာက္ဆံုးအဆင့္ေရာက္ပါၿပီဗ်ာ။ Layout ကုိသြားပါ၊ Header ရဲ႕ေအာက္က Add a Gadget ကုိႏွိပ္ပါ။ သူ႔ထဲကမွ HTML/javascript ကုိေရြးပါ။

ၿပီးရင္ ေအာက္က ကုဒ္ေတြ ကူးထည့္ေပးလုိက္ေနာ္။ ထည့္ၿပီးရင္ Save ပါ။

ကုိယ့္ရဲ႕ ဘေလာ့ကုိ ျပန္ၾကည့္ပါဦး၊ CSS drop down menu လွလွ ေလးေရာက္ေနၿပီေနာ္။ # ေနရာေတြ
မွာ link ေတြ ထည့္ဖုိ႔နဲ႔၊ Products တုိ႔၊ Sub Product တုိ႔ေနရာေတြမွာ ကုိယ့္ Label နာမည္ေတြ ထည့္ဖုိ႔
ကေတာ့ ေျပာေနစရာမလုိေလာက္ေတာ့ပါဘူး။

အားလံုး အဆင္ေျပၾကပါေစ။

Blog မွာ Animated Tab Menu ေလးထည့္မယ္

Posted in Blog Tab Menu

No comments

By Kaung Htet Htun

Blog မွာ ႐ုိး႐ုိးရွင္းရွင္းနဲ႔ ယဥ္ၿပီး လွပတဲ့ Tab Menu ေလး ထည့္ဖုိ႔အတြက္ ကၽြန္ေတာ္ ရွာေဖြၿပီး ေ၀မွ်ေပး
လုိက္ပါတယ္။ အရင္ဆံုး 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> ဆံုးတဲ့အထိကုိ ေကာ္ပီကူးၿပီး သူ႔ေအာက္မွာ ထားေပးလုိက္ေပါ့ဗ်ာ။

အားလံုး အဆင္ေျပၾကပါေစ။

Blog မွာ Tab Menu ေလးထည့္ၾကမယ္ (ေရာင္စံုရတယ္ေနာ္)

Posted in Blog Tab Menu

No comments

By Kaung Htet Htun

Blog မွာ Tab Menu ေလးေတြ ထည့္ခ်င္သူမ်ားအတြက္Tab Menu ထည့္နည္းကုိ ေရာင္စံုေဖာ္ျပေပးလုိက္
တယ္ေနာ္။ ပထမဆံုး ဘေလာ့ရဲ႕ 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

အားလံုး အဆင္ေျပၾကမယ္လုိ႔ ယူဆပါတယ္ဗ်ာ။

IT Field Network

အလန္းတကာ့အလန္းဆံုး CSS Drop Down Menu

အလန္းတကာ့အလန္းဆံုး CSS Drop Down Menu

Blog မွာ Animated Tab Menu ေလးထည့္မယ္

Blog မွာ Animated Tab Menu ေလးထည့္မယ္

Blog မွာ Tab Menu ေလးထည့္ၾကမယ္ (ေရာင္စံုရတယ္ေနာ္)

Blog မွာ Tab Menu ေလးထည့္ၾကမယ္ (ေရာင္စံုရတယ္ေနာ္)

ေဒါင္းနည္းမသိပါကအရင္ဖတ္ပါ

Like on Facebook

random post

Popular Posts

Cbox

ၾကည့္႐ႈႏႈန္း

Category

Followers