Cara Membuat Menu Navigasi CSS3 Fly Out

Cara Membuat Menu Navigasi CSS3 Fly Out. Di awal pembahas ini saya akan memberikan panduan tentang pemasangan menu navigasi blog. Menu Navigasi kali ini memiliki efek fly out dengan CSS3 dan memiliki tampilan sliding animasi yang baik. Menu Navigasi CSS3 Fly Out ini didesaign sebaik mungkin agar mampu menarik perhatian para pembaca dan tamu blog. Cara memasang menu ini terbilang mudah.

Berikut ini Panduan Cara Membuat Menu Navigasi CSS3 Fly Out

• Login ke Akun Blogger sobat
• Pilih Template lalu Edit HTML
• Centang Expand Template Widget
• Kemudian letakan CSS berikut sebelum kode ]]></b:skin>

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}
}

• Tahap selanjutnya, letakan kode berikut ini sebelum kode </body>

<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>

Catatan: Untuk tulisan berwarna merah ganti dengan url/alamat yang klian inginkan
              Untuk tulisan berwarna biru masukan judul url

• Terakhir Simpan Template.

Mudah bukan cara memasang menu navigasi keren ini. Di akhir pembahasan ini saya akan mengakhiri artikel yang berjudul Cara Membuat Menu Navigasi CSS3 Fly Out. Jika Anda ingin bertanya seputar artikel di atas, silahkan bertanya pada komentar di bawah ini.

sumber