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

  • widget amoung tanpa javascript
    Memasang widget amoung memang bukan hal yang rahasia bagi blogger, widget among berguna sebagai counter banyak user yang sedang mengunjungi laman di blog kita tapi mungkin penggunaan javascript dari widget ini menambah beratnya dan waktu memuat laman kita dalam blog apalagi blog sobat yang sdah memasang banyak javascript. untuk itu kali ini s…
  • Memasang meta tag agar blog lebih SEO Friendly
    Salam sobat blogger, share lagi ni buat lebih mengoptimalkan seo pada blog agar bisa tampil di halaman pertama halaman mesin pencari. tapi jangan lantas ini di jadikan trik utama karena masih ada trik trik lain yang perlu sobat lakukan untuk membuat blognya lebih seo, ini hanya sebagaian trik sja yang memang cukup efektif di hasilnya. sudah b…
  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…
  • Membuat ucapan terimakasih di bawah komentar
    Pagi sobat blogger lagi liburan buat posting hiasan untuk blogger, kali ini saya mau share cara dan trik untuk membuat pesan ucapan terimakasih di bawah kotak komentar.   Triknya cukup mudah tinggal menambahkan css dan sedikit kode html di template sobat, langsung aja berikut ini caranya Buka editor template blogger anda sperti bias…
  • Menerapakan jquery lightbox evolution
    Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox. untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik…
  • Memperbaiki ukuran thumbnail homepage
    buat sobat blogger yang mengalami masalah pada thumbnail/gambar Post.snippet dan post.thumbnail yang kurang jelas dan tidak sesuai ukuran pada tampilan posting static page/homepage, bisa menggunakan trik ini agar tampilan gambarnya bisa terlihat jelas dan sesuai. caranya cukup mudah dan gak ribet ikuti saja trik berikut perhatikan kode scrip…

Tidak ada komentar :


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...