kyawkothein: Blog အတြက္ CSS3 Drop Down Menu

Thursday, September 13, 2012

Blog အတြက္ CSS3 Drop Down Menu

Published : Thursday, September 13, 2012 Author : kyawkothein

၁ ။ ကၽြန္ေတာ္ မိတ္ေဆြမ်ားကို Blog အတြက္ CSS3 Drop Down Menu အေရာင္ႏွစ္မ်ိဳး တင္ေပးလိုက္ပါတယ္ အသံုးျပဳရတာလည္း လြယ္ကူပါတယ္ အသံုးျပဳခ်င္တဲ့ မိတ္ေဆြမ်ား ေအာက္မွာေပးထားတဲ့ code ကို Copy ကူးျပီး ...

Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။

padding: 0;

list-style: none;

}

#mbt-menu {

width: 960px;

margin: 60px auto;

border: 1px solid #000;

background-color: #333;

background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#800000));

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

-moz-box-shadow: 0 1px 1px #777;

-webkit-box-shadow: 0 1px 1px #777;

box-shadow: 0 1px 1px #777;

}

#mbt-menu:before,

#mbt-menu:after {

content: "";

display: table;

}

#mbt-menu:after {

clear: both;

}

#mbt-menu {

zoom:1;

}

#mbt-menu li {

float: left;

border-right: 1px solid #222;

-moz-box-shadow: 1px 0 0 #444;

-webkit-box-shadow: 1px 0 0 #444;

box-shadow: 1px 0 0 #444;

position: relative;

}

#mbt-menu a {

float: left;

padding: 12px 30px;

color: #FFFF00;

text-transform: uppercase;

font: bold 12px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#mbt-menu li:hover > a {

color: #fff;

}

*html #mbt-menu li a:hover { /* IE6 only */

color: #000;

}

#mbt-menu ul {

margin: 20px 0 0 0;

_margin: 0; /*IE6 only*/

opacity: 0;

visibility: hidden;

position: absolute;

top: 38px;

left: 0;

z-index: 9999;

background: #444;

background: -moz-linear-gradient(#800000, #999);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#333, #800000);

background: -o-linear-gradient(#444, #111);

background: -ms-linear-gradient(#444, #111);

background: linear-gradient(#444, #111);

-moz-box-shadow: 0 -1px rgba(255,255,255,.3);

-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);

box-shadow: 0 -1px 0 rgba(255,255,255,.3);

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

border-radius: 3px;

-webkit-transition: all .2s ease-in-out;

-moz-transition: all .2s ease-in-out;

-ms-transition: all .2s ease-in-out;

-o-transition: all .2s ease-in-out;

transition: all .2s ease-in-out;

}

#mbt-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#mbt-menu ul ul {

top: 0;

left: 150px;

margin: 0 0 0 20px;

_margin: 0; /*IE6 only*/

-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);

-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);

box-shadow: -1px 0 0 rgba(255,255,255,.3);

}

#mbt-menu ul li {

float: none;

display: block;

border: 0;

_line-height: 0; /*IE6 only*/

-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;

box-shadow: 0 1px 0 #111, 0 2px 0 #666;

}

#mbt-menu ul li:last-child {

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;

}

#mbt-menu ul a {

padding: 10px;

width: 130px;

_height: 10px; /*IE6 only*/

display: block;

white-space: nowrap;

float: none;

text-transform: none;

}

#mbt-menu ul a:hover {

background-color: #fff;

background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

}

#mbt-menu ul li:first-child > a {

-moz-border-radius: 3px 3px 0 0;

-webkit-border-radius: 3px 3px 0 0;

border-radius: 3px 3px 0 0;

}

#mbt-menu ul li:first-child > a:after {

content: '';

position: absolute;

left: 40px;

top: -6px;

border-left: 6px solid transparent;

border-right: 6px solid transparent;

border-bottom: 6px solid #444;

}

#mbt-menu ul ul li:first-child a:after {

left: -6px;

top: 50%;

margin-top: -6px;

border-left: 0;

border-bottom: 6px solid transparent;

border-top: 6px solid transparent;

border-right: 6px solid #3b3b3b;

}

#mbt-menu ul li:first-child a:hover:after {

border-bottom-color: #fff;

}

#mbt-menu ul ul li:first-child a:hover:after {

border-right-color: #fff;

border-bottom-color: transparent;

}

#mbt-menu ul li:last-child > a {

-moz-border-radius: 0 0 3px 3px;

-webkit-border-radius: 0 0 3px 3px;

border-radius: 0 0 3px 3px;

}

</style>

ျပီးရင္ Save လိုက္ပါ...

၂ ။ black အေရာင္ ကို ႀကိဳက္ရင္ ေအာက္မွာေပးထားတဲ့ code ကို Copy ကူးျပီး ...

Design >>> Add a Gadget >>> /JavaScript မွာေအာက္ကကုဒ္ကိုထည့္ေပးလိုက္ပါ ။