25.6.14
19
Gambar menu navigasi

Tampilan Daftar Menu Terbaru Model Rolling Top - Untuk menyimpan beberapa file artikel penting, akan lebih efektif jika kita menyusunnya serta meletakkannya dalam tataan daftar menu navigasi yang terdapat pada blog tersebut, dengan begitu semua informasi yang sudah Anda rangkum pada sebuah artikel dapat dengan mudah ditemukan, baik oleh Anda maupun oleh pengunjung setia Anda. Tidak jauh berbeda dengan tampilan menu navigasi pada umumnya, tampilan daftar menu kali ini terinspirasi saat Membuat Link Hover Efek Rolling Right, sehingga terpikir ingin mencoba bagaimana jika efek rolling tersebut di desain ulang untuk membuat tampilan Daftar Menu Navigasi Model Rolling Top seperti ini:




DEMO SHOW



Umumnya untuk mendapatkan efek seperti ini, biasanya menggunakan perintah javaScript, tetapi untuk tutorial kali ini Anda tidak memerlukannya, karena saya sendiri tidak dapat menjamin apakah load speed akan berpengaruh saat halaman terbuka jika Anda melibatkan penggunaan javaScript. Untuk membuat Daftar Menu Terbaru kali ini, saya menggunakan pengaturan hanya pada elemen CSS saja tanpa Script seperti ini:


#rolling-nav {
  background:#660000;height:54px;
  font:normal 12px 'Trebuchet MS',Arial,Sans-Serif;
  color:white;text-transform:uppercase;}

#rolling-nav ul {
  height:50px;margin:-1.3em 0px;
  padding:0px 0px;overflow:hidden;}

#rolling-nav li {
  float:left;display:inline;
  list-style:none;margin:0px 0px;
  padding:0px 0px;}

#rolling-nav a,
#rolling-nav a:before {
  display:block;margin:0px 0px;
  padding:0px 30px;line-height:50px;
  color:white;text-decoration:none;
  background-color:#900;
  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  -webkit-transition:all 0.3s rollingmenu ease-in-out;
  -moz-transition:all 0.3s rollingmenu ease-in-out;
  -ms-transition:all 0.3s rollingmenu ease-in-out;
  -o-transition:all 0.3s rollingmenu ease-in-out;
  transition:all 0.3s rollingmenu ease-in-out;}

#rolling-nav a:hover {margin-top:-50px;margin-bottom:1px;}
#rolling-nav a:before {
  content:attr(data-clone);
  position:absolute;
  top:100%;left:0px;display:block;
  background-color:#38f;
  background-image:-webkit-linear-gradient(top, #ddd, #38f);
  background-image:-moz-linear-gradient(top, #ddd, #38f);
  background-image:-ms-linear-gradient(top, #ddd, #38f);
  background-image:-o-linear-gradient(top, #ddd, #38f);
  background-image:linear-gradient(top, #ddd, #38f);
  font-weight:bold;color:#111;}



Dimana Anda meletakkan kode CSS diatas.?
Jika Blog Anda sudah terdapat daftar menu navigasi, sudah pasti elemen CSS diletakkan pada kode ]]></b:skin> atau <style> yang terdapat pada pengaturan HTML Template Anda. Disini kita menggunakan satu daftar menu saja yang aktif, jadi jika Anda ingin mencoba merubah tampilan daftar menu yang ada dengan model rolling top seperti ini, hapus CSS sebelumnya lalu gantikan dengan kode CSS diatas. Selanjutnya tahap akhir penggunaan HTML sebagai berikut:


<nav id="rolling-nav">
<ul>
<li><a href="/" data-clone="Home">Home</a></li>
<li><a href="/" data-clone="Daftar&nbsp;Isi">Daftar Isi</a></li>
<li><a href="/" data-clone="Profile">Profile</a></li>
<li><a href="/" data-clone="Comments">Comments</a></li>
<li><a href="/" data-clone="Contact">Contact</a></li>
</ul>
</nav>


Agar daftar menu yang sudah ada pada blog Anda tidak hilang, cukup ganti id navigasi sebelumnya dengan id="rolling-nav" seperti diatas, agar lebih jelasnya Anda boleh pelajari artikel sebelumnya tentang Peletakan Serta Cara Mendesain Menu Navigasi Blog.

Jika Ada yang kurang dimengerti, jangan tanyakan pada diri sendiri, karena saya tidak tahu apa yang Anda pikirkan, hehe..!!
Terimakasih.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Tampilan Daftar Menu Terbaru Model Rolling Top
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 =

19 komentar

  1. Hayooo dapat pertamax ni mbak, lomba yuuk heehee

    wiih keren banget mbak, hebat kali mbak devy ini, saya jadi pingin kenal lebih dekat lagi ni heehee, kalau boleh bertukaran fb yuuk mbak, :D

    BalasHapus
    Balasan
    1. hadiahnya apaan mas,,hehe

      saya sudah jarang sekali buka fb mas,

      Hapus
    2. demo show nya kerenz mbak
      langsung ke tkp mbak (c)

      Hapus
    3. heehe, pake hadia ya mbak, nanti saya pikirkan dahulu ya :D

      Hapus
    4. [blockquote]Masa mau kasih hadiah pakai acara pikir-pikir dahulu, hmmm keburu basi dech, hehe
      tetapi cuma bercanda kok mas[/blockquote]

      Hapus
  2. keren banget bos... oya ini biar rolling nya lebih pelan lagi gimana caranya?, biar kelihatan lembut....

    BalasHapus
    Balasan
    1. ganti nilai pada transisi menjadi 0.1s atau 0.2s untuk mengatur kecepatan

      Hapus
    2. wah.. mudah juga rupanya, kalau gitu, ijin kopi kode dan mempraktekannya yia bos..

      Hapus
  3. keren nih demonya mbak,ketika didekati kursor bisa naik turun

    BalasHapus
  4. selalu ada yang baru deh selagi masih bersama mbk Devy. hehe
    menarik tampilan menunya mbk..

    BalasHapus
    Balasan
    1. cuma memodifnya sedikit kok mas,hehe

      Hapus
  5. Kak, kalo mau berbicara masalah OOT, saya harus kemana ya?? Terimakasih.

    BalasHapus
    Balasan
    1. kemana ya, masalahnya saya tidak menyediakan forum untuk tanya jawab masalah lain dari topik.

      boleh dech ke email saya saja,

      Hapus
  6. wah kren, ane mau coba tes di blog lain deh

    BalasHapus
  7. SIMPANNYA D MANA YAH S ATAS NYA ATAU BAWAHNYA

    BalasHapus
    Balasan
    1. biasanya jika blog sudah memiliki menu navigasi, sudah pasti disana terdapat susunan diagram HTML untuk menampilkan menu tersebut pada halaman blog, dan beberapa selector CSS yang mengikutinya sebagai pengaturan efek.

      nah jika blog Anda sudah ada menu navigasinya, cukup hapus semua nilai yang ada pada CSS pengaturan menu di template Anda, selanjutnya ganti id sebelumnya dengan id menu berikut:
      [pre]id="rolling-nav"[/pre]

      Hapus
    2. saya sudah melihat blog Anda, pengaturan menu pada template Anda menggunakan elemen kelas dalam tampilan menu.
      Sekarang, coba ke edit-Template, lalu cari kode ini:
      [pre]➞ <div class='menu-secondary-container'>
      ➞ <ul class='menus menu-secondary'>
      <li><a href='#/'>Home</a></li>
      <li><a href='#'>PAGAR</a>
      <ul class='children'>
      <li><a href='#'></a>1</li>
      .....[/pre]

      selanjutnya ganti nilai class yang saya beri tanda panah dengan kode ini
      [pre]="rolling-nav"[/pre]

      Temukan kode CSS ini pada template Anda
      [pre].menu-secondary-container {
      position:relative;
      height:42px;
      z-index:300;
      background:#535353;
      padding-left:3px;
      }
      ....
      //sampai menu ini
      .wrap-menu-secondary .sf-shadow ul {....}[/pre]

      Hapus semua kodenya, lalu gantikan dengan kode CSS diatas,
      Simpan Template Anda.

      [blockquote]Namun INGAT.!! sebelum menghapus, back-up terlebih dahulu template Anda untuk menghindari kesalahan, sehingga nanti mudah untuk dikembalikan seperti semula[/blockquote]

      Terimakasih..!! semoga berhasil

      Hapus
  8. weleh...bagus tips na..kasih tau ya...))
    a. bgmn awal jk mbuat daftar menu /navigasi yang sederhana aja..
    b. mbuat slide gambar / animasi uk, kecil pada halaman judul/ depan
    c. itu aja dl ,,masih cupu maklum,,trims ya viviieee..

    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