Thursday, January 3, 2013

Desain Menu Navigasi Terbaik ZIPUP di blog

Posted by at 4:18 AM ·
JQuery Menu ZIPUP
ZIPUP (Zero Image - Pilled Up), adalah 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.


lihat demo

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 ini, kemudian letakkan tepat di atas kode ]]></b:skin> :
/**
 * Copyright Juli 2011 :: Taufik Nurrohman
 * http://hompimpaalaihumgambreng.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 {
  width:2500px;
  background-color:#622;
  margin:0 0;
  padding:0 0;
  overflow:hidden;
}

.tovikh li {
  text-align:left;
  list-style:none;
  margin:0 0;
  padding:0 0;
  display:inline;
  float:left;
}
.tovikh li a {
  width:30px;
  height:40px;
  line-height:normal;
  background-color:#333;
  border-left:2px solid #3c3c3c;
  padding:5px 7px;
  margin:0 0;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  text-shadow:1px 1px 2px #000;
  -webkit-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
  -moz-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
  box-shadow:-2px 0 3px #000,-5px 0 20px #000;
  overflow:hidden;
  outline:none;
  display:block;
}

.tovikh li.akhir a {
  background-color:#622;
  min-width:250px;
  border-color:#633;
  overflow:hidden;
  text-align:left;
  display:block;
}

.tovikh li a:focus       {background-color:#888;border-color:#777;}
.tovikh li.akhir a:focus {background-color:#822;border-color:#633;}

.tovikh li a em {
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  bottom:auto;
  left:0px;
  background-color:#aa9900;
  border-bottom:2px solid #aa8800;
  font-style:italic !important;
  line-height:normal;
  font:normal 30px Arial,sans-serif;
  color:#fff;
  padding:15px 10px 7px;
  margin:0 0;
  text-align:left;
  overflow:hidden;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  display:none;
}
Terakhir Anda tinggal meletakkan kerangka objeknya. Salin kode ini, kemudian letakkan di tempat dimana Anda 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 temukan kode ini:
</head>
Salin kode di bawah ini kemudian letakkan tepat di atasnya:
<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 ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:
/**
 * Copyright Juli 2011 :: Taufik Nurrohman
 * http://hompimpaalaihumgambreng.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 {
  height:auto;
  background-color:#622;
  margin:0 0;
  padding:0 0;
}
.tovikv li {
  text-align:left;
  list-style:none;
  margin:0 0;
  padding:0 0;
  color:#fff;
  text-align:left;
  display:block;
}

.tovikv li a {
  height:30px;
  width:auto;
  line-height:normal;
  background-color:#333;
  border-top:2px solid #3c3c3c;
  padding:5px 7px;
  margin:0 0;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  text-shadow:1px 1px 2px #000;
  -webkit-box-shadow:0 0 3px #000, 0 0 20px #000;
  -moz-box-shadow:0 0 3px #000, 0 0 20px #000;
  box-shadow:0 0 3px #000, 0 0 20px #000;
  overflow:hidden;
  outline:none;
  display:block;
}

.tovikv li.akhir a {
  background-color:#622;
  min-height:250px;
  border-color:#633;
}

.tovikv li a:focus       {background-color:#888;border-color:#777;}
.tovikv li.akhir a:focus {background-color:#822;border-color:#633;}

.tovikv li a em {
  position:relative;
  clear:both;
  width:auto;
  height:200px;
  background-color:#222;
  font-style:italic !important;
  line-height:normal;
  font:normal 15px Times,sans-serif;
  color:#999;
  padding:5px 5px;
  margin:15px 0 0 0;
  text-align:center;
  overflow:hidden;
  display:block;
}
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 Anda inginkan, dan Deskripsi Menu dengan kata-kata yang disesuaikan dengan nama menunya. Setelah itu ganti simbol # dengan sebuah alamat URL.
  • Meskipun di sini Saya 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 Anda tidak perlu khawatir. Saya hanya memberikan saran-saran penentuan ukuran yang tepat.
Labels: , ,

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)