Membuat Menu Navigasi Fixed Fly Out Dengan CSS3

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/AVvXsEjVQDG3n-2UIDhAik6DB38Wx8KNDfbwqxjy-TDra1jPSlsH-vU3qksuD0UIBSb1ayrV4iCu4-nZM7v3DEnvRz2FlF_9gp_mbvrvT6xYxOpJxqPEyw1CrLdlK8BNsJGrUtw-jcInQP_EZtM/s75/sb77-image1.jpg);}

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

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

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

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

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

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

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