GO Blog

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

.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

<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

.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

<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

$(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

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


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