Selamat Datang

Membuat Fixed Menu Ketika Scroll Dengan CSS3, Jquery & HTML5

Kali ini tutorial-webdesign.com akan mencoba membuat menu yang posisinya selalu diatas (fixed) setelah halaman web di scroll, bukan hanya berada diatas, manu yang tadinya menyatu dengan halaman website ini akan berubah warna juga. Intinya disini kita akan belajar bagaimana menghapus dan menambah class pada tag html ketika menu di scroll dengan bantuan jquery.
Agak berbeda dengan yang kita buat sebelum nya di tutorial Membuat Menu Posisi Tetap dan Responsive dimana kita tidak membutuhkan javascript untuk itu, karena menunya sudah langsung kita letakan di bagian atas halaman website dengan CSS.

Untuk merubah bentuk menu seperti itu kita tentunya membutuhkan Javascript untuk mendapatkan event ketika mouse di scroll tersebut, kali ini kita menggunakan Jquery untuk praktek menghapus lalu menambahkan class dengan nama lain ketika website di scroll..

Oke langsung saja kita membuat struktur HTML nya, disini kita mencoba menggunakan tag-tag HTML5 untuk praktek.

Struktur HTML

<div class="container">

	<header></header>

	<nav></nav>

	<section></section>
</div>

Kode diatas adalah truktur HTML kita secara singkat, selangkapnya akan dijabarkan dibawah ini masing-masing isi dari setiap bagian.

Header

Bagian header umumnya kita isi dengan Judul dan keterangan tentang website tersebut (tagline).

	<header>
		<h1>Fixed Menu When Scroll</h1>
		<p><a href="http://www.tutorial-webdesign.com/fixed-menu-scroll-css-jquery-html5">http://www.tutorial-webdesign.com</a> | Image by : <a href="http://www.flickr.com/photos/thetruthabout/3396317853/sizes/m/in/photostream/" target="_blank">TheTruthAbout</a></p>
	</header>

Navigation

Pada bagian ini adalah menu kita, simple saja, isinya hanya sebuah div yang didalam nya ada list menu (ul > li)

	<nav>
		<div id="twd-menu" class="normal">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#about">About</a></li>
				<li><a href="#services">Services</a></li>
				<li><a href="#portfolio">Portfolio</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>
		</div>
	</nav>

Perlu diperhatikan disitu yaitu nama class dari div, yang diberi nama normal. Ini berguna untuk memberikan style utama sebelum di scroll.

Section / Konten website

Bagian ini berisi isi dari website yang kita buat, ada beberapa bagian dan kita beri setiap bagian sesuai dengan ID dari setiap menu (about, services, portfolio dan contact)

	<section>
		<h2>Scroll me please... ↓</h2>
		<p><img src="http://farm4.staticflickr.com/3581/3396317853_e84a205773.jpg" alt=""> </p>

		<aside id="about">
			<h2>About</h2>
			<p>Content...</p>
		</aside>

		<aside id="services">
			<h2>Services</h2>
			<p>Content...</p>
		</aside>
		<aside id="portfolio">
			<h2>Portfolio</h2>
			<p>Content...</p>
		</aside>
		<aside id="contact">
			<h2>Contact</h2>
			<p>Content...</p>
		</aside>

	</section>

Style CSS

Setelah kita selesai dengan struktur HTML yang akan dibuat, saat nya kita mulai mempercantik tampilan dengan menggunakan CSS, tidak ada css khusus yang kita perlukan karena ini hanya keperluan demo saja.

CSS Awal

ini digunakan untuk global atau keseluruhan, sebenarnya ini kurang lengkap, biasanya untuk global itu kita perlu normalize, css reset atau yang lain nya agar lebih baik, tapi ini hanya untuk demo saja.

/* Global
====================*/
*{
	padding: 0;
	margin: 0;
}
html{
	background: url(img/bg.png);
}
body{
	margin-top: 70px;
}
a{
	text-decoration: none;
	color: #333;
}

header, nav, section{
	width: 450px;
	margin: 0 auto 0px auto;
}

CSS untuk header

/* header
====================*/
header{
	padding: 10px 0;
}

CSS untuk Menu Normal

/* Menu
====================*/
#twd-menu{
	margin-bottom:20px;
}
.normal{
	padding: 10px;background: #B16B67;
}
#twd-menu ul{
	list-style-type: none;
	padding: 0;
}
	#twd-menu ul li{
		display: inline-block;
	}
		#twd-menu ul li a{
			display: inline-block;
			padding:10px;
			border-radius: 10px;
			color: #ddd;
		}
			#twd-menu ul li a:hover{
				background:black;
				color: #fff;
			}

CSS Menu ketika scroll

	/* Menu When Scroll */
	.fixed {
		position: fixed;
		top: -5px;
		left: 0;
		width: 100%;
		padding: 10px;
		background: #0B7271;
		color: #f8f8f8;
		-webkit-transition: top 400ms ease 0s;
		-moz-transition: top 400ms ease 0s;
		-o-transition: top 400ms ease 0s;
		-ms-transition: top 400ms ease 0s;
		transition: top 400ms ease 0s;
		box-shadow: 0 0 40px #222;
		-webkit-box-shadow: 0 0 40px #222;
		-moz-box-shadow: 0 0 40px #222;
	}
	.fixed ul{
		width: 450px;
		margin: 0 auto;
	}

CSS untuk konten website

/* Content
=================*/
aside{
padding: 50px 10px;
}
aside h2{
margin: 20px 0;
}

Seperti itulah urutan css yang kita buat. Lanjut dengan Javascript

Javascript

Untuk dapat merubah class .normal menjadi .fixed, agar tampilan menu berubah kita membutuhkan Javascript, disini kita sebelum nya talah menyisipkan Jquery tentunya dibagian head dan /head.
Lalu kita membuat sebuah file javascript dengan nama twd-menu.js dengan isi seperti dibawah ini.

$(function(){

	var menu = $('#twd-menu'),
		pos = menu.offset();

		$(window).scroll(function(){
			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('normal')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('normal').addClass('fixed').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('normal').fadeIn('fast');
				});
			}
		});

});

Bisa dilihat disitu kita kita pertama akan menghapus class normal, lalu menambahkan class fixed, jadi ketika class normal dihapus tentunya style yang kita tulis di css untuk class .normal tidak berguna lagi, yang terpakai adalah kode css untuk class .fixed, dimana isinya position:fixed untuk membuat posisi tidak berubah dan width:100% agar lebarnya memenuhi layar monitor.

Hasil

Berikut adalah hasil yang telah dibuat, anda bisa melihat dan mendownload kode nya dari Github.

Perlu diketahui ini hanya untuk keperluan demo, jadi tidak semua bagian kami percantik dengan CSS.

DEMO | Download Code

Sekian

Oke sekian tutorial kali ini, semoga berguna untuk memulai pekerjaan anda.

Salam web design indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

42 thoughts on “Membuat Fixed Menu Ketika Scroll Dengan CSS3, Jquery & HTML5

  1. Bagus Fikri says:

    Gan tanya dong, tag aside kan buat sidebar bukan ya?

  2. eboseweb says:

    meskipun bukan suatu keharusan, sebaiknya pake saja … agar para newbie (yang mempraktekkan tutorial di atas) menjadi terbiasa IMHO

    demonya dikasih smoothscroll dunk ;)

  3. Bubuh D'comman says:

    Pertamaxx :D

  4. Axvel Dre says:

    wow,.! keren mas,.! makasih tutorial ea,.:) izin coba,.:) he:D

  5. Ardesain says:

    BIar lebih simantik seharusnya bisa pake article ya gan :D

  6. Pelajar Absurd says:

    nice tips bro :D

    mampir balik ya~

  7. Serius ini keren banget… Tak praktekin dulu yaaa :)

  8. Thanks gan….!

    bermanfaat banget…!

  9. atho says:

    tapi sayang ya om, nggak di implementasikan di web ini… semoga nanti bisa yaa om, tk’s

  10. Agusgt says:

    thanks gan atas informasinya

  11. VICSHARE says:

    Sangat brmanfaat.. terimakasih.. :)

  12. wiwid says:

    mantap

  13. yulia says:

    thanks so much :D sangat bermanfaat.

  14. lux says:

    ijin download gan

  15. yohn says:

    thanks ya info dan sharenya..

  16. Archyseila says:

    Nice gan.. ane lebih sering normal mainin di position fixednya aja.. Boleh di coba juga yang di atas.. Makasih sudah mau berbagi ya gan..

  17. […] Membuat Fixed Menu Ketika Scroll Dengan CSS3, Jquery & HTML5 […]

  18. bagus gan. ijin sedot :)
    keep up.

  19. […] Baca Juga: Membuat Fixed Menu Ketika Scroll Dengan CSS3, Jquery & HTML5 […]

  20. imran says:

    makasih gan, saya coba dlu yah :)

  21. Andy says:

    Penerapannya di wp bagaimana ya mas ?

  22. […] responsive yaitu navigasi, dalam website responsive anda benar-benar harus memperhatikan dan membuat navigasi ini dengan serius, anda bisa menempatkan navigasi ini dibagian atas website, atau bagian lain yang […]

  23. Terimakasih mas. ini buat belajar :)

  24. rere says:

    assalamualaikum gan,,

    saya udah mengimplementasikan code di atas dan berhasil,, keren gan,,,
    kbetulan isi web saya kbanyakan pakai js. tpi knp yah pas sy scroll fix menunya, dy malah ada di bawah isi web saya.. isi web sy nututpin fix menu itu,, ada yang salah kah,,

    makasih,,

    terus berkarya ya gan ^^

  25. gus says:

    super… terimakasih tutorialnya….

  26. Adi Hermawan says:

    gan gue coba kok gak nongol ya fixed navbar nya, gak terjadi apa apa gan.

  27. dolphin says:

    keren makasih makasih makasih

  28. budi says:

    bisa ditambahkan multi css jd nanti ada sub menunya gitu.

  29. kasman says:

    mau tanya nih, gimana caranya mengatur kerja javascrip? saya maunya java scripnya hanya bekerja di scren 550px untuk broses handphone saja.

    makasii

  30. Agan kasman pakai “@media (max-width: 550px){ kode css }” aja pengaturan fixednya.

  31. Admin Sas says:

    mantap gan tutorialnya, tnks gan bermanfaat banget

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