Item Menu Navigasi Dengan Efek Slide

Menu Navigasi Blog Efek Slide Teks

Item Menu Navigasi Dengan Efek Slide - Secara umum item menu navigasi blog dituliskan dalam bentuk teks link seperti: Home, Menu(1), Menu(2), Menu(3), Menu(4) dan seterusnya. Tampilan menu kali ini saya buat berbeda dengan menampilkan angka-angka dari 1, 2, 3 dan seterusnya sebagai pengganti teks menu, sedangkan teks keterangan (deskripsi title menu) saya sembunyikan dibalik angka tersebut, dan hanya akan tampil saat salah satu item di Hover dengan efek slide seperti ini:




DEMO SHOW

Tampilan dan model menu navigasi ini saya design dengan penggunaan CSS element transition:opacity, sedangkan efek slide untuk menampilkan teks menu saya modifikasi dari tutorial Efek According Pada Gambar Dengan Perintah Hover, hanya teks item menu saya ubah dengan menggunakan background-gambar seperti ini:

.item ul li a span {
  transition:opacity 1s;
  display:inline-block;
  overflow:hidden;
  opacity:0;
  text-align:left;
  width:130px}

//item menu dengan gambar...
a.menu1 {background:#FF8C00 url(URL-Gambar) no-repeat right center}
a.menu2 {background:#39f url(URL-Gambar) no-repeat right center}
a.menu3 {background:#8B008B url(URL-Gambar) no-repeat right center}
a.menu4 {background:#FF1493 url(URL-Gambar) no-repeat right center}

Tampak sederhana, dan belum ada yang menggunakan menu navigasi seperti ini, dan Anda bisa mengganti background gambar menu dengan icon-logo, misal menu(1) HOME, diganti dengan icon logo home (rumah) akan terlihat lebih menarik lagi, Namun sebelumnya beberapa koleksi model menu navigasi dibawah ini bisa Anda pilih untuk melengkapi tampilan menu di blog Anda, pilihannya sebagai berikut:


Model Menu Navigasi Blog :

➞ Tampilan Daftar Menu Terbaru Model Rolling Top
➞ Membuat Menu Daftar Isi Blog Efek Transisi
➞ Membuat Menu Blogger Dengan Target Gambar
➞ CSS Menu Navigasi Title Dengan 6 Pilihan
➞ Daftar Artikel Terbaru Dalam Menu Navigasi
➞ CSS Flower Navigasi Efek Rotasi



Penerapan Fungsi Elemen
1.1 CSS Elemen

.item {display:inline-block;float:right}
.item ul {padding:0;margin:0;text-align:right}
.item ul li {display:inline;list-style-type:none}
.item ul li a {
  transition:width 1s;-webkit-transition:width 1s;-moz-transition:width 1s;
  -ms-transition:width 1s;-o-transition:width 1s;color:#fff;
  display:inline-block;font-weight:bold;height:27px;overflow:hidden;
  padding:10px 10px;width:25px;vertical-align:bottom;text-shadow:1px 2px 3px #111}

.item ul li a:hover {width:130px}
.item ul li a:hover span {opacity:1}
.item ul li a span {
  transition:opacity 1s;-webkit-transition:opacity 1s;-moz-transition:opacity 1s;
  -ms-transition:opacity 1s;-o-transition:opacity 1s;display:inline-block;
  overflow:hidden;opacity:0;text-align:left;width:130px}

a.menu1 {background:#FF8C00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvS9TlDM65MUDWrRX9HIjygduyT0UQA6XlsmeC1pJ_uyeellNb_vW40hwVJA5TAXyrrarJy4ar6kAxkteYC4hQksjnqBAbEEsz410YyWldVvw1mAHlUvwbOCYk0zpXSA-1JOX7qCW93A/s47/kode1.png) no-repeat right center}
a.menu2 {background:#39f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIRDsyK4e-v6CgM9RFunEKEbGI3XDFGEjMQWmRD3vprA8uCA5GsYgWpgL3JSo2nqXfw3Ai0nfO-evsxt-zlKlYo-OKMHzsuubI-bSe0I1dYAKbVQUrGcXVTkoG14MSsM9OrWYRiC9TmGY/s47/kode2.png) no-repeat right center}
a.menu3 {background:#8B008B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0KM7M2UiJRLq0bNFpQj1JHElZmMIYQ_jAtEGjQo78H0EZK6gcJPk3TRXM1Ma9EFEBVtg28-nM-uVpGCQZzm1TjikWn6oRCjW29MH03aAdOQNQMn34RgVqXyfrayA5ODvi2xQrbF404yc/s47/kode3.png) no-repeat right center}
a.menu4 {background:#FF1493 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcZFzPpmCVIUU560Gx6fxjCI1Y0uIpxkJHXRVdkUBvqdAN7vuxZCPxsHKHBzfC-WUI04DuOCIm328P9YJfxyZzxzZH2S7MBcxggM7CJvD3GdqfCuJWadCUk8LDuGFALvgnWlx9Y2naLsk/s47/kode4.png) no-repeat right center}

2.1 HTML Markup

Dalam kode ini Anda tinggal sesuaikan deskripsi teks menu yang tersembunyi, ganti teks yang berwarna MERAH dengan item menu yang Anda inginkan. HTML lengkapnya seperti ini:

<div class="item">
  <ul>
     <li><a class="menu1" href="#"><span>Tampilan &raquo;</span></a></li>
     <li><a class="menu2" href="#"><span>Tampilan &raquo;</span></a></li>
     <li><a class="menu3" href="#"><span>Tampilan &raquo;</span></a></li>
     <li><a class="menu4" href="#"><span>Tampilan &raquo;</span></a></li>
  </ul>
</div>