Membuat Menu Navigasi JQuery 1

Membuat Menu Navigasi JQuery , ini mungkin sudah tidak asing lagi buat para bloggernamun tidak ada salahnya kalau saya berbagi buat yang membutuhkan.
Cara pemasangannya kawan bisa baca di Panduan Cara Meletakan Kode pada template kawan tinggal masukan saja kode dibawah ini kedalam template kawan.

ul#elina .utama {
  padding:8px 14px 7px;
  text-transform:uppercase;
  background:transparent;
  color:$(widget.title.text.color);
  border-top:1px solid transparent;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
}
ul#elina {
  list-style:none;
  margin:0 -15px;
  padding:0px 2px 3px;
  height:30px;
  border-bottom:1px solid #404040;
  font:$(widget.title.font);
  background:$(header.background.color); /* Old browsers */
}
ul#elina * {margin:0;padding:0;}
ul#elina a {
  display:block;
  text-decoration:none;
  color:$(widget.title.text.color);
}
ul#elina li {
  position:relative;
  float:left;
}
ul#elina ul {
  position:absolute;
  z-index:100;
  width:160px;
  top:30px;
  left:0;
  background:#000;
  list-style:none;
  display:none;
}
ul#elina ul li {
  position:relative;
  border:0;
  width:100%;
  margin:0;
}
ul#elina ul li a {
  display:block;
  padding:5px 10px 7px;
  background-color:transparent;
  color:$(widget.title.text.color);
  border-bottom:1px solid #303030;
}
ul#elina ul li a:hover, ul#elina ul li:nth-child(odd) a:hover {
  background-color:#505050;
  color:$(widget.title.text.color);
}
ul#elina .utama:hover {
  background:#000; /* Old browsers */
  text-color:#fff;
}
ul#elina li li:nth-child(odd) a, ul#elina li.odd a {background-color:#000;}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://reader-download.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('ul#elina ul li:odd').addClass('odd');
    $('ul#elina li').hover(function() {
        $('ul',this).stop(true, true).show(1500,"easeOutElastic");
    }, function() {
        $('ul',this).stop(true, true).hide(450,"easeInBack");
    });
});
//]]>
</script>

<ul id='elina'>
    <li><a href='#' class='utama'>BERANDA</a></li>
    <li><a href='#' class='utama'>MENU 1</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>
    <li><a href='#' class='utama'>MENU 2</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>
    <li><a href='#' class='utama'>MENU 3</a>
        <ul>
            <li><a href='#'>Satu</a></li>
            <li><a href='#'>Dua</a></li>
            <li><a href='#'>Tiga</a></li>
            <li><a href='#'>Empat</a></li>
        </ul>
    </li>
</ul>

Demikian cara Membuat Menu Navigasi JQuery , ini semoga berhasil dan bermanfaat.

Rating: 5 Reviewer: Unknown