Sabtu, 26 Juli 2014

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




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(http://3.bp.blogspot.com/-MXiqPLPi7mE/U9FCb9CdPfI/AAAAAAAAAvY/TJDlvXu8YOU/s75/sb77-image1.jpg);}

ul#menu-fly li:nth-child(2) a {
  background-image:url(http://3.bp.blogspot.com/-jqLaKoyVk4U/U9ExRFyyvWI/AAAAAAAAAuU/0mFetpnESfo/s75/sb77-image2.png);}

ul#menu-fly li:nth-child(3) a {
  background-image:url(http://1.bp.blogspot.com/-7KhQIS1814A/U9Esp_GjyFI/AAAAAAAAAt4/SpxT7d5jTW8/s75/sb77-image3.png);}

ul#menu-fly li:nth-child(4) a {
  background-image:url(http://4.bp.blogspot.com/-y3vayUFhGso/U9E_3WTlrRI/AAAAAAAAAvE/0ZLAhTJkMTQ/s75/sb77-image4.jpg);}

ul#menu-fly li:nth-child(5) a {
  background-image:url(http://3.bp.blogspot.com/-yQaXbMykCQ0/U9E5cPE31BI/AAAAAAAAAuk/5U8Sl8AiMOg/s75/sb77-image5.png);}

ul#menu-fly li:nth-child(6) a {
  background-image:url(http://4.bp.blogspot.com/-WErMdnZUSJE/U9FEFSSikHI/AAAAAAAAAvk/1Sr2cvEMoR8/s75/sb77-image6.jpg);}

ul#menu-fly li:nth-child(7) a {
  background-image:url(http://2.bp.blogspot.com/-pIwM4hEycUo/U9E-HAHqAII/AAAAAAAAAu4/Dz2NWZ2dTgM/s75/sb77-image7.png);}

ul#menu-fly li:nth-child(8) a {
  background-image:url(http://2.bp.blogspot.com/-e7eUUarVtlQ/U9E5ce4jjRI/AAAAAAAAAuo/FdmiEHTmKnk/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:

Tidak ada komentar:

Posting Komentar

JANGAN LUPA BERKOMENTAR DAN UNGKAPKAN PENDAPAT ANDA TENTANG ARTIKEL INI.

NO SARA
NO PORNOGRAFI
NO SPAM
NO LINK ON
NO LINK OFF

JANGAN LUPA UNTUK SELALU MEMBAGIKAN ARTIKEL INI KE JEJARING SOSIAL YANG ANDA SUKA YA :)

Pesan Untuk Pengunjung

Jangan lupa sholat, beramal sholeh, dan zakat - - - - - - - - - - - - - - - - - - - - - - - - - - - - Ilmu tidak bisa di dapat dengan badan yang santai

link otomatis