Cara Membuat Menu Drop Down Dengan CSS3 → dalam kesempatan kali ini saya ingin berbagi trik cara membuat
Cara Membuat Menu Drop Down Dengan CSS3 bagi anda yang berminat bisa menyimak langkah langkah nya di bawah ini.
Login Blogger.com
Edit HTML
kemudian cari kode ]]></b:skin> jika sedah ketemu salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>
/* CSS3 Drop Down Menu by Mr Mqn*/
#nav {
float:left;
font:bold 12px Arial,Helvetica,Sans-serif;
border:1px solid #121314;
border-top:1px solid #2b2e30;
overflow:hidden;
width:100%;
background:#3C4042;
background:-webkit-gradient( linear,left bottom,left top,color-stop(0.09,rgb(59,63,65)),color-stop(0.55,rgb(72,76,77)),color-stop(0.78,rgb(75,77,77)) );
background:-moz-linear-gradient( center bottom,rgb(59,63,65) 9%,rgb(72,76,77) 55%,rgb(75,77,77) 78% );
background:-o-linear-gradient( center bottom,rgb(59,63,65) 9%,rgb(72,76,77) 55%,rgb(75,77,77) 78% );
box-shadow:0 1px 0 rgba(255,255,255,0.1) inset,0 0 5px rgba(0,0,0,0.1) inset;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav ul li {
float:left;
}
#nav ul li a {
float:left;
color:#d4d4d4;
padding:10px 20px;
text-decoration:none;
background:#3C4042;
background:-webkit-gradient( linear,left bottom,left top,color-stop(0.09,rgb(59,63,65)),color-stop(0.55,rgb(72,76,77)),color-stop(0.78,rgb(75,77,77)) );
background:-moz-linear-gradient( center bottom,rgb(59,63,65) 9%,rgb(72,76,77) 55%,rgb(75,77,77) 78% );
background:-o-linear-gradient( center bottom,rgb(59,63,65) 9%,rgb(72,76,77) 55%,rgb(75,77,77) 78% );
box-shadow:0 1px 0 rgba(255,255,255,0.1) inset,0 0 5px rgba(0,0,0,0.1) inset;
border-left:1px solid rgba(255,255,255,0.05);
border-right:1px solid rgba(0,0,0,0.2);
text-shadow:0 -1px 1px rgba(0,0,0,0.6);
}
#nav ul li a:hover,
#nav ul li:hover > a {
color:#252525;
background:#3C4042;
background:-webkit-gradient( linear,left bottom,left top,color-stop(0.09,rgb(77,79,79)),color-stop(0.55,rgb(67,70,71)),color-stop(0.78,rgb(69,70,71)) );
background:-moz-linear-gradient( center bottom,rgb(77,79,79) 9%,rgb(67,70,71) 55%,rgb(69,70,71) 78% );
background:-o-linear-gradient( center bottom,rgb(77,79,79) 9%,rgb(67,70,71) 55%,rgb(69,70,71) 78% );
text-shadow:0 1px 0 rgba(255,255,255,0.2),0 -1px #000;
}
#nav li ul a:hover,
#nav ul li li:hover > a {
color:#2c2c2c;
background:#5C9ACD;
background:-webkit-gradient( linear,left bottom,left top,color-stop(0.17,rgb(61,111,177)),color-stop(0.51,rgb(80,136,199)),color-stop(1,rgb(92,154,205)) );
background:-moz-linear-gradient( center bottom,rgb(61,111,177) 17%,rgb(80,136,199) 51%,rgb(92,154,205) 100% );
background:-o-linear-gradient( center bottom,rgb(61,111,177) 17%,rgb(80,136,199) 51%,rgb(92,154,205) 100% );
border-bottom:1px solid rgba(0,0,0,0.6);
border-top:1px solid #7BAED9;
text-shadow:0 1px rgba(255,255,255,0.3);
}
#nav li ul {
background:#3C4042;
background-image:-webkit-gradient( linear,left bottom,left top,color-stop(0.09,rgb(77,79,79)),color-stop(0.55,rgb(67,70,71)),color-stop(0.78,rgb(69,70,71)) );
background-image:-moz-linear-gradient( center bottom,rgb(77,79,79) 9%,rgb(67,70,71) 55%,rgb(69,70,71) 78% );
background-image:-o-linear-gradient( center bottom,rgb(77,79,79) 9%,rgb(67,70,71) 55%,rgb(69,70,71) 78% );
left:-999em;
margin:35px 0 0;
position:absolute;
width:160px;
z-index:9999;
box-shadow:0 0 15px rgba(0,0,0,0.4) inset;
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4) inset;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4) inset;
border:1px solid rgba(0,0,0,0.5);
}
#nav li:hover ul {
left:auto;
}
#nav li ul a {
background:none;
border:0 none;
margin-right:0;
width:120px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
border-bottom:1px solid transparent;
border-top:1px solid transparent;
}
.nav ul li ul {
position:absolute;
left:0;
display:none;
visibility:hidden;
}
.nav ul li ul li {
display:list-item;
float:none;
}
.nav ul li ul li ul {
top:0;
}
.nav ul li ul li a {
font:normal 13px Verdana;
width:160px;
padding:5px;
margin:0;
border-top-width:0;
border-bottom:1px solid gray;
}
#nav li li ul {
margin:-1px 0 0 160px;
visibility:hidden;
}
#nav li li:hover ul {
visibility:visible;
}
/* CSS3 Drop Down Menu by Mr Mqn*/
Lalu SAVE TEMPLATE anda
Dan langkah selanjut nya beralih ke tata letak dan pilih widget HTML lalu salin kode di bawah ini dan letakan di widget HTML
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Sub Page #1</a></li>
<li><a href="#">Sub Page #2</a></li>
<li><a href="#">Sub Page #3</a></li>
<li><a href="#">Sub Page #4</a></li>
<li><a href="#">Sub Page #5</a></li>
</ul>
</li>
<li><a href="#">Create This</a></li> </ul>
</div>
Simpan dan lihat hasil nya.
mungkin hanya itu saja yg bisa saya sampai kan untuk kali ini semoga trik
Cara Membuat Menu Drop Down Dengan CSS3 bisa bermanfaat buat anda2 semua.