Membuat Sub Menu Dengan Style Flying Out CSS3

Nah jika di antara sobat ingin membuat sub menu yang biasa ada dalam sebuah web namun ingin mencoba dengan efek yang berbeda serta ada gambar kecil di sub meu tersebut? Pada tutorial blogger kali ini saya akan share cara Membuat Sub Menu Dengan Style Flying Out yang CSS3. Di sini sobat hanya copas dan mengedit kode tertentu yang nanti kode terdebut bisa di tambahkandi menu Add Widget. Langsung aja simak caranya.

1. Login Blogger, Masuk menu setting Tata Letak > Silahkan pilih Tambahkan Gadget > Pilih HTML/JavaSript.

2. Lalu silahkan Copi kode di bawah ini.

<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> 
<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;} } </style>

Catatan :

1. Ganti # dengan alamat sub menu yang di tuju.

2. Ganti Home dengan tulisan sub menu yang sobat inginkan.

3. Ganti 

http://4.bp.blogspot.com/-Yofmy0GpcY0/TtLyWnIr0jI/AAAAAAAABYQ/di5O82hzbrA/s1600/home.png

dengan alamat URL gambar, Yang nantinya gambar ini yang ada di beberapa sub menu.

Sumber : http://www.bloggertipsandtricks.net/2013/06/css3-flying-out-menu-for-blogger.html

Nah sekian dulu totorial blognya semoga bermanfaat untuk sobat............