Membuat Menu Web Dropdown Animasi CSS 3

Membuat Menu Web Dropdown Animasi CSS 3

( sumber : eftutor.blogspot.com )

Membuat Menu Web Dropdown Animasi CSS 3 Menu pada web Blog dengan CSS 3 dengan Animasi Dropdown. Sekarang Lanjut ke Tutorial Membuat Menu dengan CSS 3 Plus Animasi.

Anda sudah ada gambaran akan hasilnya, jika belum anda dapat melihat gambar dibawah ini.

Oke mari lanjut menulis scriptnya.

Script HTML :

    <ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
    <a href="#">Categories</a>
    <ul>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Graphic design</a></li>
    <li><a href="#">Development tools</a></li>
    <li><a href="#">Web design</a></li>
    </ul>
    </li>
    <li><a href="#">Work</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>

Script CSS :

    #menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #menu {
    width: 960px;
    margin: 60px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));    background-image: -webkit-linear-gradient(#444, #111);    background-image: -o-linear-gradient(#444, #111);
    background-image: -ms-linear-gradient(#444, #111);
    background-image: linear-gradient(#444, #111);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    }
    #menu:before,
    #menu:after {
    content: "";
    display: table;
    }
    #menu:after {
    clear: both;
    }
    #menu {
    zoom:1;
    }
    #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;
    }
    #menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    text-transform: uppercase;
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
    }
    #menu li:hover > a {
    color: #fafafa;
    }
    *html #menu li a:hover { /* IE6 only */
    color: #fafafa;
    }
    #menu ul {
    margin: 20px 0 0 0;
    _margin: 0; /*IE6 only*/
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background: -webkit-linear-gradient(#444, #111);
    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;
    }
    #menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
    }
    #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);    }
    #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;
    }
    #menu ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    #menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px; /*IE6 only*/
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    }
    #menu ul a:hover {
    background-color: #0186ba;
    background-image: -moz-linear-gradient(#04acec,  #0186ba);    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background-image: -webkit-linear-gradient(#04acec, #0186ba);
    background-image: -o-linear-gradient(#04acec, #0186ba);
    background-image: -ms-linear-gradient(#04acec, #0186ba);
    background-image: linear-gradient(#04acec, #0186ba);
    }
    #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;
    }
    #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;
    }
    #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;
    }
    #menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
    }
    #menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent; }
    #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;
    }

Finish, selesai juga akhirnya. Silahkan dicomot yang kiranya perlu. Tutorial ini ane comot dari Red Team Desain sebagai referensi kita untuk lebih membuat tampilan web blog kita menarik.

Ada satu lagi dropdown yang unik

Script HTML :

<div id='cssmenu'>
<ul>
<li class='active '><a href='http://dliyaul.blogspot.com'> <span>Home</span> </a> </li>
<li class='has-sub '><a href='#'><span>Products</span></a>
<ul><li>
<a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul> </li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Script CSS :

#cssmenu
{
height:37px;
display:block;
padding:0;
margin:0;
border:1px solid;
border-radius:5px;
}

#cssmenu > ul
{
list-style:inside none;
padding:0;
margin:0;
}

#cssmenu > ul > li
{
list-style:inside none;
padding:0;
margin:0;
float:left;
display:block;
position:relative;
}

#cssmenu > ul > li > a
{
outline:none;
display:block;
position:relative;
padding:12px 20px;
font:bold 13px/100% Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.4);
}
#cssmenu > ul > li:first-child > a
{
border-radius:5px 0 0 5px;
}

#cssmenu > ul > li > a:after
{
content:''; position:absolute;
border-right:1px solid;
top:-1px;
bottom:-1px; right:-2px; z-index:99;
}

#cssmenu ul li.has-sub:hover > a:after
{
top:0; bottom:0;
}

#cssmenu > ul > li.has-sub > a:before
{
content:''; position:absolute;
top:18px;
right:6px;
border:5px solid transparent;
border-top:5px solid #fff;
}

#cssmenu > ul > li.has-sub:hover >
a:before
{
top:19px;
}

#cssmenu ul li.has-sub:hover > a
{
background:#3f3f3f;
border-color:#3f3f3f;
padding-bottom:13px;
padding-top:13px;
top:-1px; z-index:999;
}

#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover >

div
{
display:block;
}
#cssmenu ul li.has-sub > a:hover
{
background:#3f3f3f;
border-color:#3f3f3f;
}

#cssmenu ul li > ul, #cssmenu ul li > div
{
display:none;
width:auto;
position:absolute;
top:38px;
padding:10px 0;
background:#3f3f3f;
border-radius:0 0 5px 5px; z-index:999;
}

#cssmenu ul li > ul
{
width:200px;
}

#cssmenu ul li > ul li
{
display:block;
list-style:inside none;
padding:0;
margin:0;
position:relative;
}

#cssmenu ul li > ul li a
{
outline:none;
display:block;
position:relative;
margin:0;
padding:8px 20px;
font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none;
text-shadow:1px 1px 0 rgba(0,0,0, 0.5);
}

#cssmenu, #cssmenu > ul > li > ul > li a:hover
{
background:#4fbdf0;
background:-moz-linear-gradient(top, #4fbdf0 0%, #45b2d2 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4fbdf0), color-stop(100%,#45b2d2));
background:-webkit-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:-o-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%);
background:-ms-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%);
background:linear-gradient(top, #4fbdf0 0%,#45b2d2 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fbdf0', endColorstr='#45b2d2',GradientType=0);
}

#cssmenu
{
border-color:#3589a1;
}

#cssmenu > ul > li > a
{
border-right:1px solid #3589a1; color:#fff;
}

#cssmenu > ul > li > a:after
{
border-color:#6ed1ff;
}

#cssmenu > ul > li > a:hover
{
background:#36acd2;
}