CSS3 Fly Out Menu
Terinspirasi dari konsep Beautiful Slide Out Navigation dengan efek slidingnya yang sangat menarik, kali ini Saya akan membuat efek tersebut hanya dengan CSS3. Kabar baik bagi Anda yang tidak suka atau belum mengerti tentang JQuery. Instalasi menu ini sangat mudah dilakukan:
Pertama-tama masuklah ke halaman editor HTML templatemu. Salin kode CSS ini, kemudian letakkan di atas kode
]]></b:skin>
atau </style>
:ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:10px;
list-style:none;
z-index:999999;
width:735px;
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:#111;
background-repeat:no-repeat;
background-position:50% 150px;
border:2px solid #e6e6e6;
-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(http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(http://2.bp.blogspot.com/-2OSziw4y00Y/TtLybmgNpbI/AAAAAAAABZA/CfXysrknh5k/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(http://4.bp.blogspot.com/-PafE8z-wPaE/TtLya7QCLRI/AAAAAAAABY0/2ggfAcDdL4c/s1600/search.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(http://4.bp.blogspot.com/-70Y4BlTmU2k/TtLyY5xd4wI/AAAAAAAABYo/3f2DFCIXHSY/s1600/photo_camera.png);
}
ul#navigation li:nth-child(5) a {
background-image:url(http://3.bp.blogspot.com/-5gyngAu_azs/TtLyaHMRCpI/AAAAAAAABYs/njvXEAaM4AM/s1600/rss_feed.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(http://1.bp.blogspot.com/-B6GMO8E3wCQ/TtLyXVvr9lI/AAAAAAAABYY/s5EbibQXFGE/s1600/ipod.png);
}
ul#navigation li:nth-child(7) a {
background-image:url(http://3.bp.blogspot.com/-m9LeNCW7A4s/TtLyYIsDygI/AAAAAAAABYc/TBmNRPoQZ3s/s1600/mail.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;}
}
Berikutnya temukan kode ini:
</body>
Salin kode di bawah ini, kemudian letakkan tepat di atasnya:
<ul id='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Search</a></li>
<li><a href='#'>Photos</a></li>
<li><a href='#'>Rss Feed</a></li>
<li><a href='#'>Podcasts</a></li>
<li><a href='#'>Contact</a></li>
</ul>
Klik Simpan Template. Ganti kode
#
dengan alamat URL. Jika perlu ubah juga nama-nama menu sesuai dengan keinginan.
15 Comments:
Keren penggunaan CSS sama keyframes nya..., kpn saya bisa sekreative ini......, :)
menu kayak gini jenis kelaminnya cowok kali ya mas? hehe maco banget :)
@dadang herdiana: Saya rasa semuanya sama saja kok.
@pulung udara manggiling: hehe.. iya kali :D
menunya keren, mantap ijin pake di blog, sekalian lapor scriptnya saya republish diblog saya
@Mas Dalang OK OK
mas, gimana kalo ganti posisinya di sebelah kiri ? mohon bantuannya mas :)
@Eva Altayany Ganti kode ini:
ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:10px;
list-style:none;
z-index:999999;
width:735px;
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;
}
dengan kode ini:
ul#navigation {
position:fixed;
margin:0px;
padding:0px;
top:0px;
left:10px;
list-style:none;
z-index:999999;
width:735px;
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;
}
Mas, klo boleh tanya nama template blog ini apa ya?
Mas, punya saya kok, munculnya dibawah kiri ???
mohon perbaikannya mas...
@sabda awal Kalau kerangkanya diletakkan di atas </body> seharusnya tidak masalah.
mas, menu yang di atas udah saya ubah n kembang kan, supaya cuma muncul dihalaman depan aja gimana caranya?
menunya ikut muncul di postingan, saya pake blogezine... mohon bantuannya mas, terimakasih
@sabda awal Taruh kerangkanya di dalam tag kondisional halaman muka:
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<ul id='navigation'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Search</a></li>
<li><a href='#'>Photos</a></li>
<li><a href='#'>Rss Feed</a></li>
<li><a href='#'>Podcasts</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</b:if>
Mas Taufik, kalo menunya di sebelah kanan dan vertikal, css nya gmn yah.. hehe?
menunya kan ada yg saya buang karena tidak dibutuhkan, cara supaya pas di sisi kiri bagaimana, karena terlihat seperti berada di tengah mas.
Terima kasih sebelumnya
SELAMAT SIANG.. amu tanya mas, kalau link untuk search blog yang mana ya???? kan dimenu yang ditawarkan ada tulisan seach blog....
Post a Comment
<< Home