Navigation Menu dengan Efek jQuery

Navigation Menu dengan Efek jQuery

jQuery Navigasi sitemap

Kali ini saya akan share Menu navigasi blogger, Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu. Menu navigasi yang bagus dengan tampilan yang menarik, tentu itu memberikan nilai plus tersendiri untuk tampilan blog anda sehingga menambah bagus dan cantik.

Menu navigasi ini memiliki efek jQuery sehingga tampil berbeda dengan menu navigasi yang lain, untuk yang ingin menerapkan silahkan lihat kode di bawah ini:

CSS SlideDown - SlideUp

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-6869code-line:1-6970code-line:1-7071code-line:1-7172code-line:1-7273code-line:1-7374code-line:1-7475code-line:1-7576code-line:1-7677code-line:1-7778code-line:1-7879code-line:1-7980code-line:1-8081code-line:1-8182code-line:1-8283code-line:1-8384code-line:1-8485code-line:1-8586code-line:1-86.nav-menu {
  font-size:100%;
  line-height:normal;
  margin:0 0;
  padding:0 0;
  color:#fff;
  text-decoration:none;
}

.nav-menu ul {
  float:left;
  height:34px;
  line-height:34px;
  background-color:#333;
  margin:0 0 10px;
  padding:0 0;
  border:2px solid #e6e6e6;
  box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  -webkit-box-shadow:0 1px 5px #000;
}

.nav-menu li {
  list-style-type:none;
  margin:0 0;
  padding:0 0;
  color:#fff;
  float:left;
  display:inline;
}

.nav-menu li a {
  line-height:14px;
  background-color:#333;
  border-left:1px solid #444;
  border-right:1px solid #222;
  margin:0 0;
  padding:10px 15px;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  vertical-align:top;
  text-shadow:1px 1px 2px #000;
  outline:none;
  display:block;
}

.nav-menu li ul {
  position:absolute;
  z-index:10;
  left:auto;
  height:auto;
  margin:0 0;
  padding:0 0;
  width:150px;
  box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  -webkit-box-shadow:0 1px 5px #000;
  display:none;
}

.nav-menu li ul li a {
  border-left-width:0;
  border-right-width:0;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  width:120px;
  display:block;
}

.nav-menu li a:focus {
  background-color:#666;
  border-left-color:#777;
  border-right-color:#555;
}

.nav-menu ul li a:focus {
  background-color:#666;
  border-top-color:#777;
  border-bottom-color:#555;
}

.nav-menu li a:hover,
.nav-menu ul li a:hover {
  color:#ccc;
}

HTML SlideDown - SlideUp

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-32<div class="nav-menu">
 <ul>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu One</a>
   <ul>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
   </ul>
  </li>
  <li><a href="#">Menu Two</a>
   <ul>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
   </ul>
  </li>
  <li><a href="#">Menu Three</a>
   <ul>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
   </ul>
  </li>
 </ul>
</div>

CSS FadeIn - FadeOut

1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-1011code-line:3-1112code-line:3-1213code-line:3-1314code-line:3-1415code-line:3-1516code-line:3-1617code-line:3-1718code-line:3-1819code-line:3-1920code-line:3-2021code-line:3-2122code-line:3-2223code-line:3-2324code-line:3-2425code-line:3-2526code-line:3-2627code-line:3-2728code-line:3-2829code-line:3-2930code-line:3-3031code-line:3-3132code-line:3-3233code-line:3-3334code-line:3-3435code-line:3-3536code-line:3-3637code-line:3-3738code-line:3-3839code-line:3-3940code-line:3-4041code-line:3-4142code-line:3-4243code-line:3-4344code-line:3-4445code-line:3-4546code-line:3-4647code-line:3-4748code-line:3-4849code-line:3-4950code-line:3-5051code-line:3-5152code-line:3-5253code-line:3-5354code-line:3-5455code-line:3-5556code-line:3-5657code-line:3-5758code-line:3-5859code-line:3-5960code-line:3-6061code-line:3-6162code-line:3-6263code-line:3-6364code-line:3-6465code-line:3-6566code-line:3-6667code-line:3-6768code-line:3-6869code-line:3-6970code-line:3-7071code-line:3-7172code-line:3-7273code-line:3-7374code-line:3-7475code-line:3-7576code-line:3-7677code-line:3-7778code-line:3-7879code-line:3-7980code-line:3-8081code-line:3-8182code-line:3-8283code-line:3-8384code-line:3-8485code-line:3-8586code-line:3-86.navigation-menu {
  font-size:100%;
  line-height:normal;
  margin:0 0;
  padding:0 0;
  color:#fff;
  text-decoration:none;
}

.navigation-menu ul {
  float:left;
  height:34px;
  line-height:34px;
  background-color:#333;
  margin:0 0 10px;
  padding:0 0;
  border:2px solid #e6e6e6;
  box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  -webkit-box-shadow:0 1px 5px #000;
}

.navigation-menu li {
  list-style-type:none;
  margin:0 0;
  padding:0 0;
  color:#fff;
  float:left;
  display:inline;
}

.navigation-menu li a {
  line-height:14px;
  background-color:#333;
  border-left:1px solid #444;
  border-right:1px solid #222;
  padding:10px 15px;
  margin:0 0;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  vertical-align:top;
  text-shadow:1px 1px 2px #000;
  outline:none;
  display:block;
}

.navigation-menu li ul {
  position:absolute;
  z-index:10;
  left:auto;
  height:auto;
  margin:0 0;
  padding:0 0;
  width:150px;
  box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  -webkit-box-shadow:0 1px 5px #000;
  display:none;
}

.navigation-menu li ul li a {
  border-left-width:0;
  border-right-width:0;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  width:120px;
  display:block;
}

.navigation-menu li a:focus {
  background-color:#666;
  border-left-color:#777;
  border-right-color:#555;
}

.navigation-menu ul li a:focus {
  background-color:#666;
  border-top-color:#777;
  border-bottom-color:#555;
}

.navigation-menu li a:hover,
.navigation-menu ul li a:hover {
  color:#ccc;
}

HTML FadeIn - FadeOut

1code-line:4-12code-line:4-23code-line:4-34code-line:4-45code-line:4-56code-line:4-67code-line:4-78code-line:4-89code-line:4-910code-line:4-1011code-line:4-1112code-line:4-1213code-line:4-1314code-line:4-1415code-line:4-1516code-line:4-1617code-line:4-1718code-line:4-1819code-line:4-1920code-line:4-2021code-line:4-2122code-line:4-2223code-line:4-2324code-line:4-2425code-line:4-2526code-line:4-2627code-line:4-2728code-line:4-2829code-line:4-2930code-line:4-3031code-line:4-3132code-line:4-32<div class="navigation-menu">
 <ul>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Menu One</a>
   <ul>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
   </ul>
  </li>
  <li><a href="#">Menu Two</a>
   <ul>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
   </ul>
  </li>
  <li><a href="#">Menu Three</a>
   <ul>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
    <li><a href="#">Sub Menu</a></li>
   </ul>
  </li>
 </ul>
</div>

jQuery SlideDown - SlideUp

1code-line:5-12code-line:5-23code-line:5-34code-line:5-45code-line:5-56code-line:5-67code-line:5-7$(document).ready(function () {
    $(".nav-menu ul li").hover(function () {
        $("ul", this).stop(true, true).slideDown(500)
    }, function () {
        $("ul", this).stop(true, true).slideUp(250)
    })
});

jQuery  FadeIn - FadeOut

1code-line:6-12code-line:6-23code-line:6-34code-line:6-45code-line:6-56code-line:6-67code-line:6-7$(document).ready(function () {
    $(".navigation-menu ul li").hover(function () {
        $("ul", this).stop(true, true).fadeIn(600)
    }, function () {
        $("ul", this).stop(true, true).fadeOut(200)
    })
})

untuk demo penampakan menu ini bisa di lihat di blog ini, tetapi di blog ini menu ini sudah saya modifikasi dengan tambahan sedikit berbeda.

menu yang saya share ini belum memiliki fitur responsive seperti di blog ini, jika ingin tampilan bertambah responsive silahkan di edit sendiri.

demikian saja, semoga berguna dan bermanfaat pertanyaan silahkan tulis di komentar...

Artikel Terkait

  • Spammer dan no live link
    Terkadang kita sering dipusingkan dengan banyaknya spmmer pada komentar, dengan menyimpan link aktif /hidup dan berbagai promosi yang tidak ada hubungannya dengan posting. Kebanyakan dari mereka komentarnya tidak bermutu, dan hanya mengharapkan backlink. Tentunya kita harus mengambil cara agar para spammer tidak seenaknya menyimpan tautan akti…
  • Mematikan link aktif di komentar dengan jQuery
    Jika Anda telah bosan berurusan dengan semua jenis komentar spam dan Anda begitu sibuk untuk meninjau semua komentar, maka trik blogger hack baru ini akan membantu Anda untuk itu dengan menghapus link yang disertakan dalam komentar dan menggantinya dengan teks biasa menggunakan jQuery. Cara Hapus Link Dalam Komentar Dengan jQuery 1. Masuk k…
  • Memgenal javascript dan cara menggunakan
    Dalam artikel ini Anda mempelajari dasar-dasar JavaScript dan membuat program JavaScript pertama Anda. Apa itu JavaScript? JavaScript adalah bahasa scripting yang digunakan untuk script sisi klien. JavaScript dikembangkan oleh Netscape pada tahun 1995 sebagai metode untuk memvalidasi bentuk dan menyediakan konten interaktif ke situs web. yan…
  • Teknik dasar untuk lebih memahami apa itu jQuery
    Jika kita kembali sejenak untuk melihat di situs resmi jQuery pada bagian documentasi ( http://docs.jquery.com/ ) maka akan ada aebelas yang harus kita pelajari untuk lebih memahami jQuery dan ini di sebut jQuery API ( Aplication Progamming Interface ). berikut ini sebelas hal tersebut: 1. jQuery    core 2.  Selec…
  • Pop-up kode menggunakan CSS3 dan jQuery
    Menambahkan jendela pop-up dengan cara yang sangat mudah menggunakan CSS3, Hal ini dapat digunakan untuk menampilkan kode sumber, gambar dan apa pun yang kita inginkan. Posting ini menjelaskan cara menambahkan jendela pop-up sederhana untuk blogger menggunakan CSS3 dan beberapa baris kode jQuery. Jendela Script Ini hanya tampilan sederhana…
  • Membuat tombol spoiler di blogger
    Spoiler memiliki banyak kegunaan, selain untuk mengemas posting/konten yang terbilang panjang spoiler juga dapat di gunakan untuk meletakkan note/cuplikan khusus. Dengan Spoiler ini memiliki satu kelebihan penting, yaitu hanya menggunakan satu elemen tunggal. Elemen tombol pembuka/penutup spoiler tidak perlu kita sertakan di sini karena JQuery…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...