Tampilan Daftar Menu Terbaru Model Rolling Top

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.