Selamat Datang

Membuat Menu Posisi Tetap dan Responsive


Tulisan kali ini akan membahas tentang positioning di css, kita akan membuat studi kasus menu yang posisinya tetap biasa disebut menu melayang, atau flying menu atau fixed position menu.

Menu tidak akan bergerak walaupun kita malakukan scroll sampai bawah.

Gaya seperti ini memang sedang marak diterapkan oleh banyak web designer saat ini, website sosial media pun banyak yang menerapkan menu yang posisinya tetap seperti itu,  sebagai contoh Twitter, Facebook, Pinterest pun menerapkannnya.

Oke kita mulai saja membuat.

Pertama siapkan file index.html

sisipkan 2 buah font dari google web font di bagian head dan /head pada file html tersebut.

	<link href='http://fonts.googleapis.com/css?family=Concert+One' rel='stylesheet' type='text/css'>
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

Lalu buat struktur HTML sebagai berikut

	<div class="fly">
		<div class="content">
			<ul>
				<li><a class="active" href="#">Home</a></li>
				<li><a href="#">About us</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Gallery</a></li>
				<li><a href="#">Article</a></li>
				<li><a href="#">Store</a></li>
				<li><a href="#">Contact</a></li>
			</ul>

			<div class="ribbon">
				Follow Twitter
				<h2><a href="http://www.twitter.com/tut_web">@tut_web</a></h2>
			</div>
		</div>
	</div> <!-- /.fly -->

	<div class="flying-robot"><img src="fly.png" alt=""></div>

	<div class="main">
		<div class="content">
			<h1>DEMO | Flying Menu CSS</h1>
			<p><strong><a href="http://www.tutorial-webdesign.com">http:www.tutorial-webdesign.com</a></strong></p>

			<p>...</p>
			<p>...</p>

		</div>
	</div> <!-- /.main -->

	<div class="footer">
		<div class="content">
			<p>
				Copyright &copy; 2012 <a href="http://www.tutorial-webdesign.com">Tutorial-Webdesign.com</a> | Image Credit <a href="http://fantendo.wikia.com/wiki/File:Fly_Guy_Card.png">Fantendo</a>
			</p>
		</div>
	</div> <!-- /.footer -->

dengan struktur HTML itu kita membuat 4 bagian penting

class .fly untuk membuat menu atas

class .flying-robot untuk membuat objek robot terbang

class .main untuk tempat tulisan atau konten website

class .footer untuk membuat bagian bawah web

Style CSS

Untuk mempercantik bagian-bagian tersebut kita buat CSS sebagai berikut.

Style untuk menu atas, class .fly

		/* Menu atas */
		.fly{
			background-color: #1484CE;
			background-image: -webkit-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			background-image: -moz-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			background-image: -o-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			background-image: -ms-linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			background-image: linear-gradient(center top , #1484CE 0%, #1274B5 100%);
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			-webkit-box-shadow: 0 2px 0 #0E5A8C;
			box-shadow: 0 2px 0 #0E5A8C;
			font-size: 13px;
			height: 30px;
			left: 0;
			position: fixed;
			right: 0;
			top: 0;
			width: 100%;

		}
			.fly .content ul{
				list-style-type: none;
				float: left;
			}
				.fly .content ul li{
					display: inline;
				}
					.fly .content ul li a{
						display: inline-block;
						text-decoration: none;
						padding: 7px 10px;
						border-right: 1px solid rgba(255, 255, 255, 0.125);
						color: #f8f8f8;
						font-weight: bold;
					}
					.fly .content ul li a:hover, .fly .content ul li a.active{
						background: -webkit-linear-gradient(top, #2b90d2, #1382cb);
						background: -moz-linear-gradient(top, #2b90d2, #1382cb);
						background: -o-linear-gradient(top, #2b90d2, #1382cb);
						background: -ms-linear-gradient(top, #2b90d2, #1382cb);
						background: linear-gradient(top, #2b90d2, #1382cb);
					}

			.fly .content .ribbon{
				text-align: center;
				float: right;
				width: 100px;
				background: #fff000;
				padding: 2px 10px;
				-webkit-box-shadow: 0 8px 6px -6px #999;
				   -moz-box-shadow: 0 8px 6px -6px #999;
				        box-shadow: 0 8px 6px -6px #999;
			}
			.fly .content .ribbon:hover{
				background: orange;
			}

		/* Content untuk semua */
		.content{
			max-width: 940px;
			margin: 0 auto;
		}

style untuk robot terbang class .flying-robots

		/* Robot Terbang */
		.flying-robot{
			position:fixed; top:50px; left:10px;padding:10px;
			height: 150px;
			width: 150px;
		}

style untuk halaman utama berisi teks class .main

		/* Halaman Utama */
		.main{
			margin-top:50px;
			margin-bottom: 50px
		}
			.main .content p{
				margin-bottom: 30px;
			}

style untuk footer, class .footer

		/* Bagian Footer */
		.footer{
			padding: 10px 0;
			background: -webkit-linear-gradient(left, #ccc, #999);
			background: -moz-linear-gradient(left, #ccc, #999);
			background: -o-linear-gradient(left, #ccc, #999);
			background: -ms-linear-gradient(left, #ccc, #999);
			background: linear-gradient(left, #ccc, #999);
			bottom: 0;
			position: fixed;
			width: 100%;
			font-size: 12px;
		}
			.footer a{
				text-decoration: none;
				font-weight: bold;
				color: #000;
			}

Pada intinya untuk membuat elemen yang posisinya tidak berubah itu yaitu dengan menyertakan position:fixed di css

sedangkan untuk membuat posisinya suatu elemen merapat ke bawah atau keatas ditentukan dengan bottom:0 atau top:0

Responsive
Untuk membuat halaman tersebut menjadi responsive, atau bisa menyesuaikan ukuran layar device nya, maka tambahkan kode berikut

@media (max-width: 767px) {
	.flying-robot{
		position:relative;
		text-align: center;
		top:60px;
	}
	.fly{
		text-align: center;
	}
	.fly .content ul li a{
		border:none;
	}
	.content{
		width: 99%;
	}
	.main .content h1,
	.main .content p{
		margin: 10px;
	}
	.footer{
		text-align: center;
	}
}
@media (max-width: 520px){
	.fly{
		height: 60px;
	}
	.fly .content .ribbon{
		display: block;
		width: 100%;
	}
	.main{
		margin-top:80px;
		margin-bottom: 80px
	}
}

Berikut adalah hasil yang telah kita buat

DEMO | DOWNLOAD

Sekian tutorial kali ini, semoga membantu anda dalam belajar atau mengerjakan proyek 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

48 thoughts on “Membuat Menu Posisi Tetap dan Responsive

  1. Arif says:

    Link demo ga aktif

  2. marvin says:

    min, saya mau coba bikin menu bar diatas saya kombinasikan sama yg link http://www.tutorial-webdesign.com/membuat-dropdown-menu/ ini. intinya saya pengen bikin kedrop down juga. cuman belum bisa-bisa. masih bingung mengaturan ul dan li nya. bisa kasih sdikit clue? maklum newbie :)

  3. zaky says:

    wak keren thanks, q cari ni

  4. alit says:

    Permisi admin bagai mana cara membuat kotak dialog atau pop up seperti “baca juga” yang ada pada website anda. apakah menggunakan teknik ini atau yang lain sebeb jika di geser kebawah posisinya tetap.

  5. terbangnya pake properti position:fixed yaa. mantap :D :D

  6. […] 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 […]

  7. imam says:

    maaf gan, msh newbe nh., ini buat wordpress kan?
    untuk index.html nya dimana ya? punyaku index.php e
    thx atas pencerahannya

  8. Ii says:

    terima kasih nih sebelumnya untuk tutorialnya..
    nah pas saya ingin menambahkan link di gambar yang ko ga aktif ya.. itu masalahnya dmn ya mas…

  9. adie says:

    Malam gan…
    Mau tanya.. gimana caranya buat halaman berita fixed artinya yg bergerak hanya berita2nya saja tapi halaman depannya tidak. itu loh seperti yahoo.com yang baru,

    tks gan atas bantuannya.

  10. Selamat Malam Min.
    Terimakasih banyak atas tutorial dan file’ masternya. Alhamdulillah saya jadi semakin paham model html seperti ini, walaupun masih ngcontek punya orang.
    Kebetulan template yang saya download dari sini, langsung saya modifikasi untuk membuat virtual class bo’ong2an. . Karena template ini, visrtual class yg saya buat bener2 serasa milik sendiri. :D
    Ini hasil modifikasinya. http://kumbang.org/bio-ex/vic/index.html. Bagi teman2 yang lain ingin download hasil modifikasi saya, dapat download melalui https://drive.google.com/file/d/0B80qays9D8TEbEJqQUNDcjhLbHc/edit?usp=sharing.
    Makasih banyak buat TutWeb

  11. hedipro says:

    Bagus tutorialnya. Saya telah menggunakannya tapi “konten” malah menimpa “navbar” bagaimana cara memperbaikinya? apa yang salah? ini web saya: http://hedipro.blogspot.com

    Jawabannya sangat saya tunggu.
    Terima kasih.

  12. hedipro says:

    Sekarang content nya sudah tidak menimpa menu lagi. Saya sangat berterima kasih kepada TWD Editorial yang telah meluangkan waktunya untuk menjawab permasalahan saya. Saya baru belajar tentang web design dan saya mendapat banyak ilmu disini. Terima kasih

  13. hedipro says:

    Saya masih butuh bantuan lagi dari TWD Editorial. Ketika hedipro.blogspot.com saya buka di smartphone android menggunakan aplikasi browser opera mini dan browser chrome content nya menjadi berantakan. Kira-kira apa yang salah dari saya ya? Mohon bantuannya.
    Terima kasih.

    • Demo untuk tutorial itu memang tidak dibuat untuk keperluan website responsive seutuhnya, kalau mau tampil bagus di smartphone pelajari media query nya css, atau bisa kasih width menggunakan %, misal 100% pada bagian konten tersebut.

  14. purnama says:

    makasih gan infonya…ijin praktek dulu ya

  15. bokep69 says:

    mas klo mau bikin di wordpress gmn yah. sy coba tadi unggah lewat plugin gak bisa..? jadi caranya masukin ke wordpress nya gmn? thx mas

  16. gallih says:

    maaf gan link download-nya mati …
    boleh minta :)

  17. Berhasil, keren … maju terus untuk tutorial-webdesign.com … (y)

  18. matur nuhun admin, berhasil ane terapin diblog ane :)

  19. Amin Yusuf says:

    makasih gan tutornya

  20. Freddy says:

    oh berarti penggunaan fixed dan z-index itu sangat berkaitan erat ya ? Thanks admin, hem TWD sudah tidak update lagi ini, agaknya banyak project ya ?

  21. Freddy says:

    tanya lagi donk , ini aku coba modifikasi coding dari http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

    aku tambahkn position:fixed untuk header kok malah naek ya ? bagaimana solusinya agar tidak naek, yang mau ku buat adalah header dan menu samping tetap untuk artikel jika panjang, need respon gan ?

  22. Freddy says:

    wait ini sudah gan tapi agak acak-acakan ini

    http://pastebin.com/RnEqkbsX

    pertanyaan ku adalah,
    1. ketika kita buat header nya itu fixed, terus contentnya dan menu samping itu di kasih margin-top sama dengan tinggi header nya ya ?

    maaf gan rempong tanya ya ? Thanks

  23. Freddy says:

    Tanya lagi donk, itu flying robot ko position nya relative ya ? kn seharusnya fixed ya ?

    mohon di alas satu-satu ya admin if you have time :D

  24. okta pilopa says:

    kenapa antara div yang ada diatas sama div untuk konten nya timpang tindih, mohon perncerahannya

  25. putra adam says:

    keren keren,,detail sekali pencerahanya tanks,,ijin saya coba di blog saya

  26. jaka says:

    good gan tutorialnya ,,, semoga bermanfa’at

  27. Dito says:

    Udah dicoba tapi headernya jadi dibelakang konten gimana cara benerinnya?

  28. Tutorialnya lengkap dan bermanfaat banget gan,, makasih ya sudah share…

  29. Ifub.net says:

    Makasih gan, ijin coba dulu

  30. […] Membuat Menu Posisi Tetap dan Responsive […]

  31. Fadhly says:

    Makasih gan. :)

  32. Ghani says:

    Semisal ini ditambah “slide show” saya sudah mencoba, slide shownya tumpang tindih (posisi diatas menu), bagaimana caranya supaya posisi slide show dibawah saat scroll?
    Terima Kasih

  33. Hadi says:

    Malam admin
    tolong bantuan kasus sy ingin membuat menu fly di blog gustihadinata.com otomatis memanjang tab nya saat dixcroll, bukan hanya tetap melayang, tetapi juga dasar tab otomatis memanjang ke kiri-kanan menyesuaikan lebar window.
    trims

  34. pak mohon bantuannya
    untuk di blogger gmn ya tutorialnya, sy pengen banget bikin mene kyk gini atau kyk di blog mas ini, yang mana saat pada mobile mode tetap nampil dan tidak perlu ada ( MENU ) yang butuh di klik baru muncul drop down.

    mohon bantuannya

  35. HandRoot says:

    Makasih Mas… saya coba otak atik dulu mudah-mudahan berhasil di terapin di blog saya

  36. mas hendra gunawan says:

    makasih admin sangat membantu

  37. thanks ya saya senang belajar ngeblog mudah mudahan bisa memberikan artikel yang lebih mujarab

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