9.6.15
21
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




Navigasi Menu Slide Teks


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/AVvXsEiGLqiHGz70FUIKC7PfgPraAuJNiki_Ph-Te7Ks-ZmnGFWOmuvS0g5bmf-QATsjdc_yqduic47rGVjL_sDFplxNFju1w1jA7a7F66KQ1Bvdv7rBbc_kIgPwIYqvzA6nx0F08cPyEhR0vBk/s47/kode1.png) no-repeat right center}
a.menu2 {background:#39f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb_BOW3LIpvmcab0y3yAxgdZbuSd_fLAIyQEh0TunP402VSH76a8JbazaC0kOGpWwUe0EUR-1En2Kp0FIiQjxLQ6zZEEdrYoEAIsemuervDsIQ6WoZQtK5ekJERTfrDsYnBw9KZKruSc0/s47/kode2.png) no-repeat right center}
a.menu3 {background:#8B008B url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibRVST-8hYIZU8MBeGfgSAtwpRq5lFns6ifOthyMkQhIQBYPuhyphenhyphenjV5fGHOzvyCWmTihY6xVP03Jclx_cVfxn2fwvTNg_d2b0LmIfzYgfuyuxG-3i0uLcQiuC_QyiNTl6WYTQ-gWydWEAk/s47/kode3.png) no-repeat right center}
a.menu4 {background:#FF1493 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAx_RSKlGwxkuC5kuwgsbAb07YCMKAnyLIkX5CcDxp69J9SmOl2_prGq1OeLFgtmEh_B07qW0ubS1Og0fFlaq86cW4G2Mx1bXG_aYtzIMEhZ4nQUZYYgv_OOBwelp-m6WeNIKYWpelMpY/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>

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Item Menu Navigasi Dengan Efek Slide
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 =

21 komentar

  1. Wah keren, (h)
    Kalau angkanya diganti dengan logo sosial media, malah tambah keren.
    Kalau saya pengguna blogspot, asli nih saya langganan trik sama blog ini. :))

    BalasHapus
    Balasan
    1. Benar sekali mas, seperti yang saya jelaskan, item menu saya design dengan background gambar, jadi akan lebih keren jika background diganti dengan icon-logo seperti :

      fb..fa fa facebook,
      tw..fa fa twitter,
      gpls..fa fa googleplus,
      dan masih banyak lagi,


      namun pada beberapa Template, masih banyak yang belum support dengan media icon logo seperti itu, jadi mengganti backgroundnya dengan gambar logo menu saja.

      Hapus
  2. ikut nyimak saja sob, soalnya gak ngerti soal ini :-d

    BalasHapus
  3. Kren banget lihat demonya , saya ijin simpan dulu scriptnya ya , makasih banyak

    BalasHapus
  4. keren lucu warna warni ya mba tampilan nya :)
    mba kalo pengen ada kaya di blog mba devi yang ada tulisan terimakasih kunjungan sodara nah itu gmna ya caranya :)

    BalasHapus
    Balasan
    1. Widget permalink, mbak bisa pelajari caranya disini:

      >> Membuat Profil Author Box Dengan CSS Kode

      Mungkin ada beberapa pilihan, silahkan mana yang menarik buat ditampilkan di blog mbak, kalau caranya pemasangannya sama saja.

      Hapus
    2. akhirnya berhasil mba :-)

      Hapus
    3. Benar sekali mbak, sangat cantik permalinknya sudah terpasang, sekedar saran sih, Devy melihat blog mbak dominan berwarna biru muda, edit saja tampilannya agar sesuai dengan warna Template yang mbak pakai, cari warnanya disini:

      >> Kode Color Heksa HTML

      Agar tampilannya lebih rapi lagi, coba lihat pada kode ini mbak:

      .sb77-info {font:12px Trebuchet MS;text-align:justify;color:#000}

      //Ubah menjadi:
      .sb77-info {font:12px Trebuchet MS;color:#000}

      <textarea cols='55' ...ganti menjadi 40

      .sb77-social div {float: left;margin-right:6px;width:79px}

      //ganti kode width menjadi 65px

      Hapus
  5. lucu dan muantab tampilannya....ditambah efek transisi maka lebih hidup. saya suka dev, simple tapi beda dari yang lain dan tidak ribet menerapkannya di blog. saya numpang belajar dan saya sedot dulu ilmunya.

    oh ya makasih juga, saya udah pasang permanen link kamu. dengan merubah sedikit tampilannya, jadi cukup baik dan lumayan simple. sekali lagi terima kasih. oh ya....maaf baru bisa bersilaturrahmi ke blog ini. karena terlalu banyak kesibukan kantor....jadinya ngeblognya tersendat-sendat.....tapi tetap semangat dan masih berusaha menyesuaikan dengan jadwal nge-blog......keep spirits and do the best.

    BalasHapus
    Balasan
    1. takutnya mbah dinan bosan kalau Devy sajikan tutorial yang sudah banyak yang mengenal, jadi sedikit unik dan lucu-lucu (kayak Devy) semoga mbah dinan dan sahabat lainnya bisa suka.

      Iya mbah terimakasih sudah memasang widget dari saya, tidak masalah juga kok mbah kalau tampilannya dimodifikasi, karena memang Devy tidak pernah memberikan kode yang dilisensi, jadi bebas merubah segala bentk yang sumbernya dari blog ini.

      Devy juga sering berkunjung ke blog mbah, hanya terlalu banyak yang komen, jadi Devy sengaja gak komen, aalagi kayaknya si adminnya juga sibuk bener, sampai jarak posting 10 hari, hehe..!!
      sukses selalu mbah..

      Hapus
  6. nah nih...katanya bakalan nyelow dulu sama urusan kode-kode html, mau bergalau-galau ria dulu, tuh udah mulai ngasih ilmu item menu navigasi efek slide...jadi kabita pengen pasang deh tuh

    BalasHapus
    Balasan
    1. mau sih begitu mang, bulan ini mau Devy isi postingan tentang keGALAUan, tetapi semalem ngoprek-ngoprek kode CSS, ehh..jadinya muncul ide membuat menu seperti ini, ya udah, langsung share. walaupun melanggar janji sendir, hehe..!!

      gak kuat kalau sudah melihat kode-kodean mang, pasti dech langsung dapet ide mau membuat ini dan itu, begitu dech..!!

      Hapus
    2. itu yg sy salut dri devy ,,, hehehe (f)

      Hapus
    3. gatelan ya....tau kan yang saya maksud?

      betewe ituh keren tuh komentarnya dalemannya ada begituannya, udah mirip kertas ada lipetannya ge'...ih neng devi emang ehmm...ehmm.. deh ih

      Hapus
    4. Iya nih.. oh panggilannya neng ya. Neng Devi tuh emang jagonya kode-kodean. Sambil galau aja bisa ngotak-atik kode. (h)

      Hapus
    5. mudah kok mang, tinngal menuliskan perintahnya saja dengan kode seperti ini:

      <b rel="quote">TULIS TEKS DISINI..</b>

      setiap kali ingin menuliskan teks komentar yang penting misalnya, sertakan kode seperti itu dalam kolom komentar.

      Hapus
  7. Ringan, cantik dan bervariasi bentuk serta ukurannya, top cer deh mbak :D

    BalasHapus
  8. turut memberi support untuk tampilan cantik navigasi ini aku carinya menu navigasi yang dibawas post untuk halaman 1,2,3 begitu mbak

    BalasHapus
  9. keren ey mau coba ah siapa tau tambah joss

    BalasHapus
  10. Salut saya, jago banget sama kode-kodean HTML gitu ya, terharu saya dibuatnya neng Devy. Tapi kalo baca kode dari gebetan, jago juga nggak?? Hayoo ngaku wae atuh

    BalasHapus
  11. Keren banget menunya mba, oh ya bagiamana sih cara bikin menu navigasi blog yang menyatu dengan header.
    Saya lagi ngedit (modify) template blog simple bt. kalau cari digoogle kata kuncinya "simple bt blogger template"
    Template tersebut sebenanrya saya suka banget namun sayangnya ga ada "add menu"nya.
    Cari referensi ga pernah nemu, mungkin tutorial prinsipnya bisa di post di blog ini mba :)
    cara membuat menu navigasi

    BalasHapus

  • 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