Cara Membuat Menu (Navbar) Responsive Dengan HTML dan CSS

Tutorial Web Design Cara Membuat Menu Responsive Dengan HTML, CSS dan Javascript - Pembuatan menu responsive kali ini admin akan buat dengan sederhana yaitu dengan membuat satu tempat logo disebelah kiri dan 5 menu di sebelah kanan.

Kemudian kelima menu tsb akan berubah menjadi simbol hijau bulat yang jika di klik akan muncul kelima menu di bawahnya. responsive yang admin gunakan yaitu pada ukuran 800px. Jadi ketika ukuran website tidak lebih dari 800 maka tampilan ke lima menu akan disematkan.

Berikut ini merupakan contoh hasil akhirnya :

inponow - Cara Membuat Menu Responsive Dengan HTML dan CSS

Kemudian berikut ini merupakan script code html dan script js nya :

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Menu Responsive</title>
	<link rel="stylesheet" href="css/main_menu_responesive.css">
	</head>
	<body>
	<nav>
	<div class="wrap">
	<div class="title">
	Inponow;
	</div>
	<div class="tblmenubox">
	<div class="togel tblmenu">

	</div>
	</div>
	<div class="menu">
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Service</a></li>
	<li><a href="#">Fiture</a></li>
	<li><a href="#">Maps</a></li>
	</ul>
	</div>
	</div>
	</nav>
	<script src="js/jquery.min.js"></script>
	<script type="text/javascript">
	$(".togel.tblmenu").click(function () {
	$(".menu").toggleClass("sh");
	});
	</script>
	</body>
	</html>

view raw menu_responesive.html hosted with ❤ by GitHub

Saya akan jelaskan sedikit mengenai kode js yang dicantumkan di atas. script pertama untuk meload melakukan load jquery.min.js. Lalu script kedua $(".togel.tblmenu").click(function () menjalankan kondisi jika class togel dan tblmenu atau ketika simbol bulat hijau itu di klik maka di class menu akan menambahkan class sh . Berikut merupakan script CSS :

	body {
	margin: 0;
	background: #eff2f7;
	font-family: 'Product Sans';
	}
	a{
	text-decoration: none;
	color: #353535;
	display: block;
	transition: 0.3s;
	}
	a:hover {
	transition: 0.3s;
	}
	nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	}

	.title {
	display: inline-block;
	float: left;
	line-height: 50px;
	}

	.menu {
	display: inline-block;
	float: right;
	}

	.menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	}

	.menu ul li {
	display: inline-block;
	}

	.menu ul li a {
	padding: 0 20px;
	display: block;
	line-height: 50px;
	}

	.menu li:hover{
	background-color: #CDDC39;
	}
	.wrap{
	width: 80%;
	margin: 0 auto;
	}
	.tblmenubox {
	display: inline-block;
	float: right;
	line-height: 50px;
	}
	.tblmenu {
	display: block;
	position: absolute;
	width: 25px;
	height: 25px;
	background: #CDDC39;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
	}
	.tblmenubox{
	display: none;
	visibility: hidden;
	}
	@media screen and (max-width:800px){
	.menu{
	display: none;
	}
	.tblmenubox{
	display: block;
	visibility: visible;
	}
	.menu.sh {
	display: block;
	position: absolute;
	top: 50px;
	background: #CDDC39;
	width: 100%;
	left: 0;
	}

	.menu a:hover {
	color: #fff;
	background: #353535;
	}

	.menu ul li {
	display: block;
	text-align: center;
	}
	}

view raw main_menu_responesive.css hosted with ❤ by GitHub

Baca Juga : Macam-Macam CSS dan Cara Menggunakan CSS (Cascading Style Sheet)

Ok itu merupakan script yang digunakan untuk Membuat Menu Responsive Dengan HTML, CSS JS. Kalian jangan lupa untuk mendownload library jquery.min,js di https://jquery.com. Kemudian letakan di folder js. Ok itu saja yang dapat saya sampaikan hari ini kurang lebihnya saya mohon maaf. Semoga bermanfaat dan terimakasih.

Cara Membuat Menu (Navbar) Responsive Dengan HTML dan CSS

Cara Membuat Auto Pull Git Otomatis di Windows (like a cron job)

Creating Chat Applications using NodeJS, Socket.io & Mysql Part 3

Membuat Program Bilangan Prima Menggunakan C

Comments