Tampilan Menu Navigasi Blog Model Fly Out.

Tampilan Menu Navigasi Blog Model Fly Out.

Membuat Menu Navigasi Fixed Fly Out Dengan CSS3 - Banyak cara dalam membuat tampilan menu navigasi pada blog, dan salah satunya dengan membuat tampilan menu tersebut terlihat melayang pada halaman blog (Fixed), sehingga saat visitor berada jauh di bawah halaman posting, menu ini akan tetap terlihat karena tidak akan mengikuti gulungan scroll pada mouse. Desain menu kali ini, saya akan memberikan tutorial cara mudah membuat menu navigasi fixed model FLY OUT dengan CSS3 seperti ini:

DEMO SHOW

Baca Artikel sebelumnya - Mengetahui Batas Akhir Gulungan Layar Dengan JavaScript



Selanjutnya, Copy kode dibawah ini, lalu letakkan dalam formulir HTML/JavaScript

<style type='text/css'>
//* navigasi menu fixed fly out desain with css3
show date : july 25, 2014
sumber: http://sahabatblogger77.blogspot.com/
author: devy indriyani
*//
ul#menu-fly {
  position:fixed;
  margin:0px;
  padding:0px;
  top:0px;
  right:5px;
  list-style:none;
  z-index:999999;
  width:840px;
  font:normal 11px Arial,Sans-Serif;
  -webkit-animation:2s flyout ease-in-out;
  -moz-animation:2s flyout ease-in-out;
  -ms-animation:2s flyout ease-in-out;
  animation:2s flyout ease-in-out;}

ul#menu-fly li {
  width:103px;
  display:inline;
  float:left;
  margin:0 0 0 2px;}

ul#menu-fly li a {
  display:block;
  float:left;
  margin-top:-78px;
  width:100px;
  height:22px;
  background-color:black;
  background-repeat:no-repeat;
  background-position:50% 150px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 2px rgba(11, 83, 148,.5);
  -moz-box-shadow:0 1px 2px rgba(11, 83, 148,.5);
  box-shadow:0 1px 2px rgba(11, 83, 148,.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#menu-fly li a:hover {
  margin-top:-4px;
  background-position:50% 10px;
  color:lime;
  font:bold 13px/normal Georgia;
  position:relative;}

ul#menu-fly 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;}

//profile image menu...
ul#menu-fly li:nth-child(1) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_3W5VpbTy-BTUhxGl4OCrl6yQPmti0wT9moXC6tBGuomqNPRfgExYw2GBtmXbPj3dXsempBikMthQnIMLdGmcthEoehm3YeJg11yRoAS3Fn0w5frDYTqOJRr2e7HYKq96iAuXvUuESVI/s75/sb77-image1.jpg);}

ul#menu-fly li:nth-child(2) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgGTcKRWeNoFgr8rzwFSA7pILgGTu9wC6Ok6mVCOkO9DiwygOhwuXYgFPCoTVahzMjuqqP9EYRSEz5VCtmLshFdrVS14NqktghNt_-QwTyECD_8MKISL1zI2uGosXzPP_DnaZeIZkp230/s75/sb77-image2.png);}

ul#menu-fly li:nth-child(3) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDHZRp_nIG1jO5j3AIDPiwHJkJq5UvuzfbNS7nPpzBoB4ms3m4Y18FSRdU1fGPqPIhLag6jFENth5kS2oBDqUcBTd5ZpxoI8z-TfGsI7LFek0caJ9n4Bb0mg8QKCRgRgsWf_HILbAmUy8/s75/sb77-image3.png);}

ul#menu-fly li:nth-child(4) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5gvAFfOCLzxCYX6e58ze2iA3KIfumIfkXk6OJK1bqBn-Ja64ZP5r02M4eENFHzEtKkEBaNWdmCpyCO3gEzMycJD_HVSOT_1v-KZ77rUik3tegYYcZyv49y-Q7yH9qejR1Ga2apIIpzr0/s75/sb77-image4.jpg);}

ul#menu-fly li:nth-child(5) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w9zdBpbEa1Ep_xwOU9RIY25EK-xZIzgjC1DVsYMo8JzdN4z1_mX4WvX5aiXGu8Izdvsr5pfgB6JXmxRrmTfTrz80fhf_T3SEi4HmL6ezlNhjjBvzxxPBbY28QLfb6iCMnywUf7CzOOc/s75/sb77-image5.png);}

ul#menu-fly li:nth-child(6) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilZnr-Tza9uhtiklb6K4rk6x6wIepBIyxTye0hPLZj9yh9pkY33Oa72DofvqjOGRirX5BIlwahp99jw9hIkyFvYZTyR02m3PQmTqHpAn-c3b-i0Oy1KA6a3ibFMa1M81AwCZELo1aaYbo/s75/sb77-image6.jpg);}

ul#menu-fly li:nth-child(7) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-59VvlnmSFY3OXzMVx6qfGjRO1in6PtSbV0HGxYJ0cQS22NeDv17wQXY5RpAkmVW_ayh3t3C8CzTFsyS-cNHDGI9nTuoxzLv6QzWI2AeZBANei80cX3I1L_z_Pt9fZM-TW8atv_VJUpg/s75/sb77-image7.png);}

ul#menu-fly li:nth-child(8) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT1YU11gDrcQmC8RhMRGMdMaEkWKcnXFwvacba4sCupz4rAp-b_DPaAX4DdJyxJ_onjije9nLzdFZpnbMWbc1_cTRQIbsMRsrngQha93q1NV-2knX5wfvpx_H1ZH1nEZoFYghcsGGNA8o/s75/sb77-image8.jpg);}

@-webkit-keyframes flyout {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}}

@-moz-keyframes flyout {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}}

@-ms-keyframes flyout {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}}

@keyframes flyout {
  from{margin-right:-1000px;}
  to  {margin-right:0px;}}
</style>
<ul id='menu-fly'>
<li><a href='http://sahabatblogger77.blogspot.com'>Daftar Menu</a></li>
<li><a href='http://sahabatblogger77.blogspot.com'>Home</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/Blogging%20Tips'>Tips Blog</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/CSS%20Widget'>Widget</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/CSS%20Code'>CSS</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/Efek%20Gambar'>Gambar</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/Menu%20Navigasi'>Navigasi</a></li>
<li><a href='http://sahabatblogger77.blogspot.com/search/label/SEO%20Trik'>SEO</a></li>
</ul>

Artikel Terkait:

Widget dan Tips Blog

• Artikel Terkait atau Related Post Simple, Ringan dan Seo Friendly Widget
• Cara membuat widget Artikel terkait di blog tanpa edit template
• cara menggabungkan ccs dan html
• Membuat Menu Navigasi Bertingkat
• Membuat Navigasi Menu Fixed Full RotateX
• Membuat Menu Wrapper Melayang Di Atas Blog
• Daftar Artikel Terbaru Dalam Menu Navigasi
• Membuat Soal Online di Blog
• Cara Memasang Slide Show Postingan Di Blog
• Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog
• Cara Membuat Widget Slidenote / Pesan Notifikasi Untuk Blogger
• Cara Mudah Memasang Komentar Facebook Di samping komentar Blog
• Memasang Widget Random Ayat Al-Quran
• Cara Membuat Sumber Link Otomatis Saat Artikel Di copy Paste
• Cara Mengatasi dan Memulihkan Blog yang di Hack/Deface
• Cara Membuat Email dengan Nama Website sendiri
• Cara Membuat Hosting dan domain Gratis Di IdHostinger
• Membuat Animasi Flash Banner
• Cara Membuat Text Area
• Membuat Scroll Untuk Daftar Link
• Memasang Kategori Untuk Tiap Tulisan
• Memasang read more otomatis
• Memasang Tulisan Terkait
• Cara Mengganti Template Blog di Blogger