Membuat Menu Fixed dengan CSS

Sekarang ini banyak sekali bermunculan website-website baru dengan tampilan yang menarik. Salah satu hal yang sangat populer pada tampilan website sekarang ini adalah adanya menu yang berada diatas dengan posisi fixed. Pada tutoprial kali ini kita akan mencoba membuat menu fixed dengan CSS. Menu fixed ini akan kalian temui pada website jaman sekarang, karena memberikan kenyamanan pada user saat website terlalu panjang sehingga tak perlu scroll ke atas untuk memilih menu lagi melainkan menu tersebut akan berada dibagian atas browser kalian. Dan juga karena sekarang kebanyakan user browsing menggunakan handphone maka metode menu fixed ini sangat cocok untuk mobile.

Lalu bagaimana cara membuat menu fixed tersebut ?

Untuk membuat menu fixed sangatlah mudah. Yang perlu kalian siapkan adalah pengetahuan dasar mengenai html dan css. Terutama css, karena kalian akan banyak sekali bermain dengan css. Langsung saja kita mulai ya. Pertama kalian buat terlebih dahulu struktur html dasarnya. Kalian bisa ikuti contoh code html ini.

menu.html

<html>
<head>
	<meta charset="UTF-8">
	<title>Menu Fixed</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="menu">
		<div class="container">
			<a href="#">Home</a>
			<a href="#">Profile</a>
			<a href="#">About</a>
			<a href="#">Contact</a>
		</div>
	</div>
	<div class="container">
		<div class="posting">
			
			Why do we use it?

			It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

		</div>		
	</div>
</body>
</html>

Lalu buat file cssnya

style.css

.menu{
	background: gold;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}
.container{
	width: 900px;
	margin:auto;
	height: 50px;
}
.container a{
	padding: 15px;
	line-height: 50px;
	margin-right: 10px;
	text-decoration: none;
}
.container a:hover{
	background: red;
}
.posting{
	margin-top: 80px;
}

Setelah keduanya disave, kalian bisa lihat hasilnya dibrowser. Jika berhasil maka akan seperti ini.

Hasil menunya belum terlihat. Sekarang coba kalian tambahkan text yang panjang, agar penuh sampai kebawah browser sehingga harus discroll. Kalian bisa duplikasi div posting jadi banyak agar lebih cepat. Jika sudah maka harusnya seperti ini apabila discroll.

Saat discroll

Menunya tetap berada diatas, lalu text yang sebelumnya seakan tenggelam. Mudah bukan ?

Oke sekian pembahasan mengenai cara membuat menu fixed dengan CSS. Semoga bermanfaat.