Desain Menu Navigasi Terbaik: ZipUp

ZIPUP (Zero Image - Pilled Up)

Merupakan menu navigasi JQuery dengan model bertumpuk sebagai ciri khasnya. Menu ini sama sekali tidak menggunakan background image sebagai latar belakangnya. Semuanya murni menggunakan CSS3. Salah satu keistimewaan menu ini adalah kemampuannya di dalam menampilkan deskripsi menu layaknya tooltip untuk memastikan bahwa para pengunjung tidak akan tersesat saat hendak menuju ke sebuah halaman melalui menu tersebut. Dua buah tipe yang Miev akan Share ini sebenarnya terinspirasi dari model JQuery Image Menu. Mengingat keleluasaan modifikasinya yang terbatas, Miev Memodifikasi model menu ini untuk mengatasi beberapa masalah itu. Miev hanya mengambil fungsi efek dan mengedit CSSnya saja:

Untuk membuatnya Anda tinggal memilih salah satu, apakah memilih tipe vertikal atau horizontal. Namun sebelum itu Anda harus memanggil JQuery dan paket easing sebagai langkah pertama:

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Ambil scriptnya di sini. Jika sudah, sekarang Anda bisa melanjutkan ke langkah berikutnya, yaitu memilih model:

Menu Navigasi ZIPUP Horizontal
Menu Navigasi ZIPUP Vertikal

Navigasi ZIPUP Horizontal

Untuk membuat versi horizontal, pertama-tama temukan kode ini: </head>
Salin kode di bawah ini kemudian letakkan tepat di atasnya:

<script type='text/javascript'>
$(document).ready(function() {
    $('div.tovikh ul li a').hover(function() {
        $('em', this).stop(true, true).slideDown(500, "easeOutQuint");
        if ($(this).is(':animated')) {
            $(this).stop().animate({width:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({width:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $('em', this).stop(true, true).slideUp(100, "easeOutQuint");
        if ($(this).is(':animated')) {
            $(this).stop().animate({width:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(':animated').animate({width:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

Selanjutnya salin paket CSS di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau jika tidak ada perubahan letakan kodenya tepat di atas kode </style>

/**
 * Copyright Juni 2013 :: miftah shidiq
 * http://miftahshidiq.blogspot.com
 */

.tovikh {
  width:670px;
  height:50px;
  font:italic 16px Times,serif;
  border:2px solid #e6e6e6;
  padding:0 0;
  margin:10px 5px 25px;
  color:#fff;
  text-decoration:none;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  overflow:hidden;
}

.tovikh ul {

Terakhir sobatMiev tinggal meletakkan kerangka objeknya. Salin kode ini, kemudian letakkan di tempat dimana sobatMiev menginginkan menu navigasi ini ditampilkan:

<div class='tovikh'>
     <ul>
          <li><a href='#'>Mitra
                    <em>Deskripsi1</em>
               </a>
          </li>
          <li><a href='#'>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href='#'>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href='#'>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href='#'>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href='#'>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href='#'>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href='#'>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href='#'>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href='#'>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>
</div>

Klik Simpan Template.

Navigasi ZIPUP Vertikal

Untuk membuat versi vertikal, pertama-tama cari kode ini: </head>
Salin kode di bawah ini kemudian letakkan tepat di atasnya </head>

<script type='text/javascript'>
$(document).ready(function() {
    $('div.tovikv li em').hide();
    $('div.tovikv ul li a').hover(function() {
        $('em', this).stop(true, true).slideDown(700, "easeOutSine");
        if ($(this).is(':animated')) {
            $(this).stop().animate({height:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({height:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $('em', this).stop(true, true).slideUp(200, "easeOutSine");
        if ($(this).is(':animated')) {
            $(this).stop().animate({height:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(':animated').animate({height:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

Selanjutnya salin paket CSS dibawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau jika tidak ada perubahan salin dan pastekan tepat di atas kode</style>

/**
 * Copyright Juni 26 2013  :: miftah shidiq
 * http://miftahshidiq.blogspot.com
 */

.tovikv {
  height:640px;
  width:220px;
  font:italic 16px Times,serif;
  border:2px solid #e6e6e6;
  padding:0 0;
  margin:0 0 10px;
  color:#fff;
  text-decoration:none;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  overflow:hidden;
}

.tovikv ul {

Terakhir Anda tinggal meletakkan kerangka objeknya. Menu navigasi vertikal umumnya diletakkan di atas kode ini:
<b:section class='sidebar' id='sidebar'>
Salin kode di bawah ini, kemudian letakkan tepat di atas kode <b:section class='sidebar' id='sidebar'>

<div class='tovikv'>
     <ul>
          <li><a href='#'>Mitra
                    <em>Deskripsi1</em>
               </a>
          </li>
          <li><a href='#'>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href='#'>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href='#'>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href='#'>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href='#'>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href='#'>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href='#'>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href='#'>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href='#'>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>
</div>

Klik Simpan Template.

Spesifikasi Menu

ZIPUP Horizontal:

Setiap unit menu horizontal memiliki lebar 30 piksel, dengan panjang menu ideal untuk sepuluh buah menu sebesar 670 piksel.
Tinggi menu horizontal idealnya 50 piksel.

ZIPUP Vertikal:

Setiap unit menu vertikal memiliki tinggi 30 piksel, dengan tinggi menu ideal untuk sepuluh buah menu vetikal sebesar 640 piksel.
Lebar menu vertikal idealnya 220 piksel.

Tipografi Menu:

Setiap unit menu didefinisikan sebagai:

<li><a href='#'>Nama Menu<em>Deskripsi Menu</em></a></li>

Ganti Nama Menu dengan nama menu yang sobatMiev inginkan, dan Deskripsi Menu dengan kata-kata yang disesuaikan dengan nama menunya. Setelah itu ganti simbol # dengan sebuah alamat URL.
Meskipun di sini Miev membatasi ukuran-ukuran menu navigasi ZIPUP, namun bukan berarti bahwa memodifikasi menu ini akan membuat tampilannya menjadi berantakan. Menambah ataupun mengurangi jumlah menu sama sekali tidak akan merusak tampilan, jadi sobatMiev tidak perlu khawatir. Miev hanya memberikan saran-saran penentuan ukuran Miev tepat.

Posted in: menu

SOFTMIEV™ | - Download Software And Collection Games

Donasi Softmiev

Categories