Membuat Menu Navigasi Fixed Fly Out Dengan CSS3

Info informasi Membuat Menu Navigasi Fixed Fly Out Dengan CSS3 atau artikel tentang Membuat Menu Navigasi Fixed Fly Out Dengan CSS3 ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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

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

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

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

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

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

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

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

Demikian artikel tentang Membuat Menu Navigasi Fixed Fly Out Dengan CSS3 ini dapat kami sampaikan, semoga artikel atau info tentang Membuat Menu Navigasi Fixed Fly Out Dengan CSS3 ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik