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

  • Link aktif di menu dengan tag conditional
    Dapet ide yang tidak pernah terpikir, sempat senyum - senyum sendiri saat menerapkan tag conditional home untuk background <body> kenapa gak saya coba pada menu ya, hadeh... begini teorinya, misal kita mengunjungi sebuah situs/blog lalu kita menekan salah satu link menu contoh widget, semula ketika kita berada di halaman depan tidak ada …
  • Cara Membuat Metro UI Navigation Menu
    Apa menu METRO UI? Jika anda pernah membuka antarmuka Microsoft Windows 8, atau rentang baru dari Windows ponsel Smart, maka menu METRO UI ini bukanlah hal yang baru bagi mereka. Menu ini terinspirasi dari antarmuka navigasi Windows 8. Jika anda belum tahu, silahkan lihat screenshot berikut. Cara Membuat Menu Metro Windows 8 seperti dala…
  • Menu navigasi drop down dengan pure CSS3
    Anda pasti sudah tidak heran lagi dengan menu drop down, karena sudah banyak artikel yang membahas dan memberikan tutorial ini. kali ini saya akan berbagi sebuah menu drop down yang apik dengan css3. Ini adalah Navigation Menu Dengan Multi Level Drop Down yang dikembangkan dengan menggunakan CSS3 murni dengan efek tambahan seperti border-radiu…
  • Menu Rocking dan Rolling Rounded
    Kali ini saya menemukan menu yang unik untuk di bahas, yaitu menu bericon yang mempunyai efek melebar dan bertampilan unik hasil dari kreasi http://tympanus.net/. Menu ini memanfaatkan efek berputar dan scaling Patch jQuery dari Zachary Johnson yang dapat ditemukan di sini. Demo Download Langsung saja kita lanjut untuk mengupas menu ini…
  • Floating Horizontal Bar Social Sharing untuk BlogSpot
    Situs Jejaring Sosial telah menjadi pusat kegiatan internet karena mampu menarik setiap pengguna yang menggunakan internet baik dari sekolah, kantor atau rumah. Sekarang ini setiap Orang akan suka Berbagi artikel bagus dengan komunitas sosial yang menguntungkan setiap orang dan tentunya para penyedia artikel. Ini penting untuk setiap blogger d…
  • New AJAX Navigation Menu Widget untuk Blogger
    AJAX Navigasi menu untuk blogger adalah widget baru yang diciptakan oleh Me di Blogger platform yang menggunakan Blogger JSON API dan AJAX. Menu navigasi ini terinspirasi dari situs lama Mashable.com. Dan sekarang saya recoded  widget ini dan menambahkan fitur disesuaikan. Demo Bagaimana kerjanya ? Nah, widget ini bekerja dengan …

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