Cara Membuat Menu Responsive Dengan HTML CSS dan JavaScript

Pembahasan artikel sebelumnya saya sudah memberikan bagimana Cara Membuat Menu Responsive Dengan HTML CSS ,sahabat pasti bertanya-tanya kenapa harus dibuat responsive sebuah website, semakin banyak perangkat gadget tentu akan berbeda-beda ukuran tampilan pada layarnya. Website yang dibuat harus mengikuti tampilan gadget.Jadi saya akan membahas pada artikel ini bagaimana cara membuat menu responsive dengan HTML CSS dan JavaScript ,selanjutnya kita mulai saja ketikan code HTML sebagai berikut :

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Menu Responsive dengan HTML CSS dan Javascript</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

</head>
<body>
	<menu>
		<div class="toggle"><i class="fas fa-bars navbar"></i></div>
		<ul>
			<li><a href="#">Beranda</a></li>
			<li><a href="#">Profil</a></li>
			<li><a href="#">Galeri</a></li>
			<li><a href="#">Kontak</a></li>
			<li><a href="#">Tentang Kami</a></li>
		</ul>
	</menu>
	<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.navbar').click(function(){
				$('ul').toggleClass('active');
			})
		})
	</script>
</body>
</html>

Langkah selanjutnya kita mengetikan file CSS seperti dibawah ini:

body{
	margin:0;
	padding:0;
	font-family: sans-serif;
}

menu{
	width: 100%;
	background: #33cc33;
}

ul{
	width: 80%;
	margin: 0 auto;
	padding: 0;
}

ul li{
	list-style: none;
	display: inline-block;
	padding: 20px;
}

ul li:hover{
	background: #ff6600;
}

ul li a{
	color:#fff;
	text-decoration: none;
}

.toggle{
	width: 100%;
	padding: 10px 20px;
	background: #00ffcc;
	text-align: right;
	box-sizing: border-box;
	color: #fff;
	font-size: 25px;
	display: none;
}

@media (max-width: 750px)
{
	.toggle{
		display: block;
	}
	ul{
		width: 100%;
		display: none;
	}
	ul li{
		display: block;
		text-align: center;
	}
	.active{
		display: block;
	}
}

Disini saya memberikan max-width 750px dimana saat menu sampai ukuran tersebut maka akan menghilang dan muncul toggle yang berfungsi hide menu, Seperti tampilan dibawah ini :

Pada gambar dibawah ini tampilan menu akan muncul kembali jika toggle di klik namun ukuran menu menyesuaikan besaran lebarnya :

Bagaimana sahabat dumet apakah sudah paham langkah demi langkah cara membuat menu responsive dengan HTML CSS dan JavaScript , oke saya rasa cukup sampai disini tips dan trik pada artikel ini, semoga bermanfaat serta jangan lupa selalu mencoba-coba yaa,…

terima kasih