Fly And Slide Out Menu With Css3

Postingan kali ini kita akan membahas Trik Blogger yaitu tentang menu .........

Menu kali ini seperti slide biasa tetapi berada di atas layar monitor 

Langsung aja dehh

  • Copy kode berikut diatas ]]></b:skin>
ul#navigation {
position:fixed; margin:0px;
padding:0px;
top:0px; right:10px;
list-style:none;
z-index:999999;
width:820px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
} ul#navigation li {
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}
ul#navigation li a {
display:block; float:left;
margin-top:-78px;
width:100px;
height:22px;
background-color:#9E242C;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
border-radius:0px 0px 10px 10px;
color:#ccc;
text-decoration:none;
text-align:center;
text-shadow:0 1px 1px #000;
padding-top:85px;
-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}
ul#navigation li a:hover {
margin-top:-3px;
background-position:50% 10px;
color:#fff; position:relative;
}
ul#navigation li a:hover:after {
content:""; width:0px;
height:0px;
position:absolute;
top:100%;
left:45%;
margin-top:-10px;
border-width:5px;
border-style:solid;
border-color:transparent transparent #e6e6e6 transparent;
}
ul#navigation li:nth-child(1) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCAzJJhbk230bh8s3Ir5EoYs7yWQZkTOaii6hbxJSc3fMpN9Q2OJQguCT0-tug4odMbXBYYkKpyqESWl-v1Ism9hd_7rpZFRjKwVKLGGXQwxB9wsl7-NDNtXKBYJtSKZMNZcO7pu2BHIg/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA3pqIZGsDdng1HkjrC4MvnmFfhUiMe2MLwAM0JlXJ5y-U-cqqEzHrLreIhqC9y2-tqOOXlq7RCcPeeL6i9HPU5l8nKm1xtvCINlyjloQg_NT_-bn3Uv0RcDsXV9asC4evNPm8M8SWD-8/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoB_HwULfMqCgw5v0lHTeFuqxUClQVZ3fnN9_0p3IjcRTO94s_CcV-NpSdy8_Gc6r-htCVyWDISYm41U5cG1LtZocsrwroJaVC16PjORqO-kTyEOA0T3Z4dKXJ4-GMn4SnZlSQcQXGaQ/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMQ_yxNZWKSelgrRUxQD3wDKxQilbIe7dCrRSRTwI3Mn-Gq9zdG5hYIGD0bplMn1MGVISBhwPHg4vzLAHm5gKA6jjj53uy9fVyRWcpJ8gpbuHTuHWgXtfGgjzMP6OM8Nmq0II8ueAC8Zc/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuqk9Fpw6aWyLXkC0Z1YJMnujE3McNSugRvyNLIFO6zfDkJ-GiuDc9ZVZ0gTsqtbLLQlGpz7IZ0OheEDzHuOoG1tAVYPKW7hSY_XmMvMBWG342F8tQtOHQZHP0b4AZ3_ZfV-GZ97_WQQ/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbHT8heHAtOyzNTi5eqJ4vJTTywuLMAypQQ9U4nsxZO6c1-fsJxq6spTSI7D9Gws6YLEFLZPOxJPkZapz6FtHn0j2O8SVpHW_cYfkFf-LvO2hUvuawHMD03epArN5ajbgfavjdgJk9DOY/s1600/color.png);
}
@-webkit-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-moz-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}
@keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}


  • Dan letakkan kode dibawah ini juga diatas kode  </body>
<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>About Me</a></li>
<li><a href='Alamat Url'>Contact</a></li> 
<li><a href='Alamat Url'>Rss Feed</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Color Tools</a></li>
</ul>

  • Sebelum disave edit sendiri ya kodenya .......Semoga bermanfaat 

Komentar

Posting Komentar