25.7.14
14
Menu fly out image

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




Gambar Tata letak widget


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/AVvXsEj4dXTqBd3eZC46cnoT62Hrgp_tx7cZnpUrDSwPFOcSxlM77ykTsOqcxDtAVH82Ddg1K6Gg6J0Zde_BAfxSFYkYLHfNSb2CNidkG4su_LCjFxaC4EjIz73TfhEYSi3gcUa8ZkG_s1057nU/s75/sb77-image1.jpg);}

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

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

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

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

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

ul#menu-fly li:nth-child(7) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7xZeLG_T6UrjhxIOtPmuTF5Xg6CghG8Wab581xa-9mEtdHE7Vb_O9dA_-8J23-W2vnBpd_erC5aVUMvLP5CO99vX-dIplR6cOHB1iB0w36vul8ypvt6yzxWZQwrQ9rYOmL1QrygBLRDE/s75/sb77-image7.png);}

ul#menu-fly li:nth-child(8) a {
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLYFtdk2wfQbefrkaNK1MV1eX6Jrw7w1nlf5YZay93zeCk6RSQH3w6_aXw4-xWOqk_ML8Napc247AM1OR3-Nz_J2SzoLF8suvEpxtpQLbt1Zub5opdIPvFZ0BICuYohyUsryMbZ_cpViU/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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Menu Navigasi Fixed Fly Out Dengan CSS3
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

14 komentar

  1. kayaknya perlu dicoba membuat kode menu navigasi kayak gini deh mbak...demonya keren banget

    BalasHapus
    Balasan
    1. mudah-mudahan suka mas dengan tampilannya..hehe

      Hapus
  2. wah... keren banget nih hasilnya, sepertinya harus dicoba nih biar tambah keren menu navigasinya, ijinb kopi kode dan mempraktekannya yia bos...

    BalasHapus
    Balasan
    1. alhamdulillah, berarti sudah beberapa teman yang suka dengan tampilan menunya, padahal cuma pakai bumbu biasa tanpa rempah-rempah,hehe..

      silahkan di coba bos

      Hapus
  3. b-( in anag makn ap y..? [-(.., mwnya menu di blog ini sj .. bru liat efek sperti ini..!..asik maeninnya,..sperti,,sperti..lg kokang senjata...itu tinggl penambahan css ato ap..y,..

    oiyya..mkasi mba ats infonya tmpo hri.., jd beres.. =p~ ...

    TRUS BERKARYA.. ! SEHAT SELALU BUAT ANDA DAN KELUARGA

    BalasHapus
    Balasan
    1. menunya selalu yang enak-enak mas, makanya makannya buat smart,hehe..

      kalau menu blog ini, saya tidak menggunakan css mas, tetapi mengganti perintah jQuery easing dengan script animasi, untuk warna saya ambil dari SINI

      Hapus
  4. waa mantap menu navigasinya...
    ijin simpan untuk blog saya yang lain..

    BalasHapus
  5. wiiiiihhh bagus mbak,

    tpi saya mau minta bantuan. :))
    kalo punya saya pas lewat sidebar/komentar, fly outnya selalu terhalang.

    maunya saya fly out selalu tampil paling depan.
    gimna caranya ya mbak?. terimaksih sblumnya...

    BalasHapus
    Balasan
    1. ga jadi mbak, alhamdulillah udah bisa.


      maksih ilmunya mbak.

      Hapus
  6. mm kenapa menu sahabatblogger77 ini tidak mau menghilang ya? ada yang salah dengan komputer saya atau dengan blog ini hehe.. coba nanti saya check lagi deh..

    BalasHapus
    Balasan
    1. maksudnya menu yang mana ya tidak mau menghilang..?

      Hapus
  7. mau nanya ni mba...
    sesudah aye pasangin ...
    page blog saya ko ikut bergerak ya?
    mohon pencerahannya mba...
    makasih

    BalasHapus
    Balasan
    1. alamat blognya yang mana ya, kok dalam profile G+ gak ada posting.?

      Hapus
    2. alamat blognya ini 'mba Devy
      http://sukamadia.blogspot.com

      yang di tutorial ini ga jadi saya pasangin 'mba
      yang jadi tu seperti yang di pagehome blog 'mba ini.

      oh ya 'mba, itu "FOLLOW" blog yang ada dinavigasi blog 'mba
      Mau dong tutorialnya... untuk buat diblog saya.

      sebelumnya maksih ya 'mba tutorialnya
      maklum... masih baru otak atik blog..

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK