Tiga Gaya Menu Navigasi Bertingkat dengan Efek Smooth JQuery

Secara umum ada tiga tipe efek JQuery yang paling populer digunakan, yaitu efek Fade, Show dan Slide. Di sini Saya akan memberikan tiga buah efek dasar JQuery tersebut untuk diterapkan ke dalam sebuah menu navigasi dalam satu desain. Kamu tinggal memilih efek mana yang menurutmu paling cocok.
Agar langkahnya tidak berantakan, maka Saya balik urutannya yaitu mulai dari penempatan kerangka objek, pemodelan dan terakhir pemasangan JQuery:

Lihat Demo Download

Langkah Pertama: Penempatan Kerangka Objek dan Pemodelan:

Salin kode berikut ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<div class='hompimenu'>

    <ul>

        <li><a href='#'>BERANDA</a></li>

        <li><a href='#'>JURNAL</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>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KOMENTAR</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a>
                    <ul>
                        <li><a href='#'>Tiga Satu</a></li>
                        <li><a href='#'>Tiga Dua</a></li>
                        <li><a href='#'>Tiga Tiga</a></li>
                        <li><a href='#'>TIga Empat</a></li>
                        <li><a href='#'>Tiga Lima</a></li>
                    </ul>
                </li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KONTAK</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>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

    </ul>

</div>

Pelajari beberapa alternatif peletakkan menu navigasi di sini »

Setelah itu salin kode CSS ini, kemudian letakkan tepat di atas kode ]]</b:skin> atau </style>:

/**
 * Copyright Juli 2011 :: Taufik Nurrohman
 * (http://hompimpaalaihumgambreng.blogspot.com)
 */

.hompimenu {
  font:normal 12px Cambria,"Times New Roman",Times,serif;
  line-height:normal;
  text-transform:uppercase;
  margin:5px 0px;
  padding:0px 0px;
  color:white;
  text-decoration:none;
}

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

.hompimenu li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  color:white;
  float:left;
  display:inline;
  position:relative;
}

.hompimenu li a {
  display:block;
  background-color:#333;
  border-left:1px solid #444;
  border-right:1px solid #222;
  margin:0px 0px;
  padding:0px 15px;
  color:white;
  text-decoration:none;
  font-weight:bold;
  line-height:34px;
  text-shadow:1px 1px 2px #000;
  outline:none;
}

.hompimenu li ul {
  position:absolute;
  z-index:10;
  left:0px;
  top:100%;
  height:auto;
  margin:0px 0px;
  padding:0px 0px;
  width:170px;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  display:none;
}

.hompimenu li ul a {
  border-left:none;
  border-right:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  display:block;
}

.hompimenu li ul li {
  float:none;
  display:block;
  width:auto;
}

.hompimenu li ul ul {
  top:0px;
  left:100%;
}

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

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

.hompimenu li a:hover,
.hompimenu ul li a:hover {color:#ccc;}

Nah, terakhir kamu hanya perlu menentukan efek seperti apa yang menurutmu paling cocok. Pilih salah satu:

Efek SlideDown & SlideUp:

Untuk membuat efek SlideDown - SlideUp, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'  

type='text/javascript'></script>
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(400);
    }, function() {
        $(this).children('ul').slideUp(400);
    });
});
</script>

Efek FadeIn & FadeOut:

Untuk membuat efek FadeIn - FadeOut, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' 

type='text/javascript'></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').fadeIn(400);
    }, function() {
        $(this).children('ul').fadeOut(400);
    });
});
</script>
</script>

Efek Show & Hide:

Untuk membuat efek Show - Hide, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' 

type='text/javascript'></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').show(400);
    }, function() {
        $(this).children('ul').hide(400);
    });
});
</script>
</script>

Khusus untuk kode yang Saya beri garis bawah, jika sudah ada tidak perlu ditambahkan.
Sekarang klik Pratinjau. Jika sudah puas dengan hasilnya, simpan templatemu.