Selamat Datang

Membuat Slide Menu Dengan CSS dan Jquery

Menu yang ketika Mouse Hover akan berganti seperti slide, dibuat dengan CSS dan Jquery.

Kali ini kita akan mencaba membuat contoh menu yang bisa diterapkan di website anda, menu ini cukup menarik karena terlihat agak animatif dengan slide nya.
Slide Menu
Oke kita mulai saja langsung

Ingredients

  1. Font Electrolize dari Google Web Fonts
  2. Jquery
  3. Subtlepattern Egg-Shell

Struktur HTML Menu

	<div class="mn-container">

		<ul id="topnav">
			<li><a href="">Home</a></li>
			<li><a href="">Services</a></li>
			<li><a href="">Portfolio</a></li>
			<li><a href="">Blog</a></li>
			<li><a href="">About</a></li>
			<li><a href="">Contact</a></li>
		</ul>
	</div>

Disitu kita membuat container untuk menu, dan sebuah unordered list untuk list menu nya.

Code untuk bagan menu

	.mn-container{
		margin:50px auto;
		width:680px;
		padding:20px;
		background:rgba(255,255,0,.1);
		overflow:hidden;
		border:1px solid rgba(225,225,225,.9)
	}

Berikut ini code untuk List Menu nya

	ul#topnav {
		margin: 0;
		padding: 0;
		list-style: none;
		float: left;
		font-size: 1.1em;
		font-family: 'Electrolize', sans-serif;
	}
	ul#topnav li{
		margin: 0;
		padding: 0;
		overflow: hidden;
		float: left;
		height:40px;
	}
	ul#topnav a, ul#topnav span {
		padding: 10px 20px;
		float: left;
		text-decoration: none;
		color: #333;
		background:rgba(255,255,255,.5);
		text-transform: uppercase;
		clear: both;
		width: 100%;
		height: 20px;
		line-height: 20px;
	}
	ul#topnav a{
		color: #ff0000;
		background-position: left bottom;
	}
	ul#topnav span{
		background-position: left top;
	}

Code Jquery untuk membuat menu terlihat berganti seperti sebuah slide

$(document).ready(function() {

		$("#topnav li").prepend("<span></span>");

		$("#topnav li").each(function() {
			var linkText = $(this).find("a").html();
			$(this).find("span").show().html(linkText);
		});

		$("#topnav li").hover(function() {    //On hover...
			$(this).find("span").stop().animate({
				marginTop: "-40"
			}, 500);
		} , function() { //On hover out...
			$(this).find("span").stop().animate({
				marginTop: "0"
			}, 500);
		});

	});

Demo | Download

Oke sekian tulisan saya kali ini, semoga bermanfaat ya.

Salam Web Design Indonesia :)





Penulis :

I’m just simple person, web developer part time, web design holic, website researcher. Work in the world of websites & coding for eat : View all posts by Abuser

Comments

14 thoughts on “Membuat Slide Menu Dengan CSS dan Jquery

  1. Lestarie says:

    lucuuu….. bagus banget!!! Ajarin untuk gambar juga donk, bikin slide gambar yang klo di klik bisa langsung pindah ke halaman lain.
    thanks before, ditunggu banget tutorial berikutnya…

  2. […] Membuat Slide Menu Dengan CSS dan Jquery […]

  3. Harits says:

    Iya mas slide gambar, slide tsb berjalan otomatis dan pada waktu di klik dapat menuju halaman yg di simbolkan oleh gambar tsb. seperti tampilan pada koran online pada waktu ada berita hangat.
    Sangat Membantu mas ,,,,
    Saya tunggu mas, Terima Kasih.

  4. muslimin says:

    mana demonya gan?

  5. ikhsan says:

    terimakasih gan bermanfaat sekali..izin download
    mau tanya kalo yang slide show ketika menscroll menumpuk di menu yang position fixed gimana cara supaya gak numpuk gambarnya di menu ketika di scroll..Terima kasih

  6. Darwin says:

    Woow..tutorialnya bagus-bagus mas,lebih lagi tiap halaman ada demo-nya masing-masing,dan terutama tutorialnya banyak tentang JQuery yg kebetulan saya baru dalami(bermanfaat).
    Kalau ada waktu senggang..boleh dunk mas add tutorial(contoh) tentang desain web dengan penggunaan JQuery untuk mendukung pembangunan web yang responsive, karena yang ada di beberapa web(hasil googling) rata-rata sebenarnya sama.
    Trims..n’ keep up the good work.

  7. hadi says:

    Gimana kalo menunya mau di kasi Hover yah…

  8. iwan says:

    wah ini keren, mau tanya cara masangnya di sintax html gimana yaa.. apa dipasang sesuai urutan atau kita buat file terpisah?

  9. Chandra says:

    mas cara buat backround slide mirip twitter gimana ya

  10. Nuahta says:

    unik bgt mas..

  11. Fadel says:

    Gan Cara Menambahkan Slide Dropdownnya gimana ???
    Mohon cepat di Respown gan :D
    Terimakasih.

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