Css swingin panel menu drop down
Merupakan page menu paling keren menurut saya
krn menu ini seperti memiliki efek animasi bounce atau gaya memantul, hmm...kayaknya keren tuch gan,...
Merupakan page menu paling keren menurut saya
krn menu ini seperti memiliki efek animasi bounce atau gaya memantul, hmm...kayaknya keren tuch gan,...
* buka blog ente
* pilih template >>> edit HTML
* Cari kode ini ]]></b:skin>
* dan copas kode css dibawah tepat diatas kode ]]></b:skin>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 30px;
font-family: "Helvetica Neue", helvetica, arial;
background: url('http://subtlepatterns.com/patterns/white_carbonfiber.png');
}
#container {
position: relative;
width: 940px;
}
#container:after {
content: "";
display: block;
clear: both;
height: 0;
}
#menu {
position: relative;
float: left;
width: 100%;
padding: 0 20px;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
background: #ccc;
}
#menu, #menu ul {
list-style: none;
}
#menu > li {
float: left;
position: relative;
border-right: 1px solid rgba(0,0,0,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.25);
perspective: 1000px;
}
#menu > li:first-child {
border-left: 1px solid rgba(255,255,255,.25);
box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}
#menu a {
display: block;
position: relative;
z-index: 10;
padding: 13px 20px 13px 20px;
text-decoration: none;
color: rgba(75,75,75,1);
line-height: 1;
font-weight: 600;
font-size: 12px;
letter-spacing: -.05em;
background: transparent;
text-shadow: 0 1px 1px rgba(255,255,255,.9);
transition: all .25s ease-in-out;
}
#menu > li:hover > a {
background: #333;
color: rgba(0,223,252,1);
text-shadow: none;
}
#menu li ul {
position: absolute;
left: 0;
z-index: 1;
width: 200px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}
#menu li:hover ul {
padding: 15px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0,0,0,.5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;
}
@keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}
30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}
65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}
100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}
#menu li li a {
padding-left: 15px;
font-weight: 400;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
}
#menu li li a:hover {
color: rgba(0,223,252,1);
border-top: dotted 1px rgba(255,255,255,.15);
border-bottom: dotted 1px rgba(255,255,255,.15);
background: rgba(0,223,252,.02);
}
* kemudian cari kode </header>* dan letakkan kode dibawah tepat kode </header>
<div id='container'>
<ul id='menu'>
<li><a href='http://sakittuh.blogspot.co.id/'>About Me</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Maecenas lacinia sem</a></li>
<li><a href='#'>Suspendisse fringilla</a></li>
</ul>
</li>
<li><a href='#'>Portfolio</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Maecenas dignissim fermentum luctus</a></li>
<li><a href='#'>Suspendisse fringilla</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Maecenas lacinia sem</a></li>
<li><a href='#'>Suspendisse fringilla</a></li>
</ul>
</li>
<li><a href='#'>Clients</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Maecenas lacinia sem</a></li>
<li><a href='#'>Suspendisse fringilla</a></li>
</ul>
</li>
<li><a href='#'>Contact Me</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Maecenas dignissim fermentum luctus</a></li>
<li><a href='#'>Suspendisse fringilla</a></li>
</ul>
</li>
<li><a href='#'>Support</a></li>
</ul>
</div>
* silahkan di save / simpan*** SELAMAT MENCOBA GAN ***
Baca Juga Artikel Terkait Lainnya