Selamat Datang

Membuat Dropdown Menu Dengan Jquery dan CSS

Membuat dropdown menu dengan css, menu adalah hal paling penting dalam sebuah website, Menu yang baik akan memudahkan pengunjung dalam menjelajahi website kita, terutama ketika website kita ternyata memiliki halaman yang terdiri dari sub dan sub sub halaman.

Pada tutorial kali ini kita akan mencoba membuat Dropdown menu dengan CSS, dan kita akan mempercantik menu yang kita buat dengan sedikit bantuan Jquery.

Pada artikel terdahulu kita juga telah beberapa kali membuat contoh menu, mungkin bisa untuk jadi referensi lain.

OK, kita mulai saja.

Struktur HTML

Disini kita perlu mempersiapkan struktur HTML terlebih dahulu, buat file dengan nama index.html, lalu tulis code berikut ini.

<div class="container">
	<!-- Header -->
	<header>
		<h1>Dropdown Menu</h1>
		<p>Tutorial-WebDesign.com</p>
	</header>
	<!-- /Header -->

	<div class="content">
		<nav>
			<ul id="nav">
			    <li><a href="#">Home</a></li>
			    <li><a href="#">About</a></li>
			    <li><a href="#">Tutorial</a>
			      <ul>
			            <li><a href="#">Web Development</a>
			              <ul>
			                    <li><a href="#">Server Side</a></li>
			                    <li><a href="#">Client Side</a>
									<ul>
										<li><a href="#">HTML</a></li>
										<li><a href="#">Javascript</a>
										<ul>
											<li><a href="#">Jquery</a></li>
											<li><a href="#">Mootool</a></li>
											<li><a href="#">Prototipe</a></li>
										</ul>
										</li>
										<li><a href="#">DOM</a></li>
									</ul>
								</li>
			              </ul>
			            </li>
			            <li><a href="#">Web Design</a></li>
			            <li><a href="#">Security</a></li>
			      </ul>
			    </li>
			</ul>
		</nav> <!-- /Navigation -->
	</div> <!-- /Content -->

	<footer>
		Copyright &copy; 2012, <a href="http://www.Tutorial-webdesign.com">Tutorial-webdesign.com</a>
	</footer> <!-- /Footer -->
</div> <!-- /Container -->

Sisipkan Jquery dan CSS di bagian head dan /head.

	<title>Demo Dropdown Menu: Tutorial-Webdesign.com</title>

	<link rel="stylesheet" href="style.css">

	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="twd-menu.js"></script>

Sebenarnya menu ini tetap berjalan dengan baik tanpa Javascript/Jquery, namun untuk membuat efek muncul dengan perlahan kita menggunakan Jquery.

Efek seperti itu sebenarnya bisa dibuat juga dengan CSS3 Animation, ayo silahkan tunjukan creasi anda!!

Styling

Untuk mempercantik tampilan tulis css berikut ini, di file style.css.

body{
	font-size:0.85em;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

.container{
	width: 800px;
	padding:20px;
	margin: 50px auto;
	border-top: 5px solid orange;
	background: #f4f4f4;
	overflow: hidden;
}
	.content{
		height: 200px;
	}

	#nav, #nav ul{
		margin:0;
		padding:0;
		list-style-type:none;
		list-style-position:outside;
		position:relative;
		line-height:1.5em;
	}

	#nav a{
		display:block;
		padding:5px 5px;
		border:1px solid orange;
		color:#fff;
		text-decoration:none;
		background-color:orange;
	}

	#nav a:hover{
		background-color:#fff;
		color:#333;
	}

	#nav li{
		float:left;
		position:relative;
	}

	#nav ul {
		position:absolute;
		display:none;
		width:12em;
		top:2.3em;
	}

	#nav li ul a{
		width:12em;
		height:auto;
		float:left;
	}

	#nav ul ul{
		top:auto;
	}

	#nav li ul ul {
		left:12em;
		margin:0px 0 0 10px;
	}

	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
		display:none;
	}
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
		display:block;
	}

footer{
	margin-top:50px;
	clear: both;
}

Jquery

Sebenarnya sampai disini menu sudah tampil OK.
Untuk memperhalus munculnya sub menu, kita bisa membuat nya dengan Javascript/Jquery seperti dibawah ini.
Kita juga bisa menggantinya dengan CSS3 Animation jika diinginkan.

Code untuk twd-menu.js.

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

 $(document).ready(function(){
	mainmenu();
});

Hasil

Berikut adalah hasil dari menu yang kita buat, anda bisa merubahnya sesuai kebutuhan anda, kita ada saran dan masukan anda bisa menuliskan komentar anda, atau membuat tulisan juga di blog ini, dengan cara mendaftar terlebih dahulu.

DEMO | Download

Sekian tutorial kali ini, semoga berguna

Salam Web Design Indonesia





Comments

18 thoughts on “Membuat Dropdown Menu Dengan Jquery dan CSS

  1. Maunglib says:

    Artikel yang sangat membantu, dah lama nyari2 akhirnya ketemu disini.
    Thanks for all/

  2. Joe says:

    Cool..
    Sebagai alternatif, bisa seperti ini:
    $(‘#nav li’).hover(function(){
    $(this).children(‘ul’).eq(0).stop(true,true).slideToggle();
    });

  3. Andika says:

    akhirnya nemu juga yang sesuai keinginan.
    nyoba-yoba sendiri gagal terus.

  4. jahidin zee says:

    makasih banget tutorialnya..
    sungguh sangat membantu saya dalam belajar membuat website…
    one more thanks…

  5. Arief Wimbi says:

    Om itu bisa ga ditambah bagroundnya…dimananya ya om?

  6. ibnu says:

    ada pilihan lain gk jedanya?

  7. Giowahyu says:

    Makasih gan tutorialnya. Kereeen :)

  8. melody says:

    terima kasih kk atas informasinya..

  9. Ana says:

    bermanfaat buat TA, terima kasih :)

  10. Aryo says:

    thanks gan, sesuai yang dicari. klo mouse hover kan ada animasi, kalo lepas mouse hover animasi kembali ke ul gimana gan ?

  11. karimunjawa says:

    kalau di terapkan di blogger bisa ga ya mas?
    saya tertarik nih sama menunya

  12. susah juga kalo dipasang di blogspot ya,, padahal design clean bangets istilahnya flat ya?
    makasih sharingnya om.. lanjutkan berbagi ilmu moga bermanfaat.

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development