Cara Membuat Responsive Menu Navigasi Bar

Pada kesempatan yang baik ini kita akan Membuat Responsive Menu Navigasi Bar. Menu Navigasi yang responsive tentu sangat penting agar tampilan nyaman bagi pengguna atau user friendly. Jika tampilan responsive serta friendly tentu saat akses berbagai platform sangat menyenangkan. Baiklah langsung saja kita membuatnya ikuti langkah-langkah dibawah ini:

Langkah Pertama

Buat sebuah file HTML kemudian ketikkan code seperti berikut:

<nav>
		<ul>
			<li>Home</li>
			<li>Blog</li>
			<li>Profile</li>
			<li>Contact</li>
			<li>About</li>
		</ul>
	</nav>

tag nav ini untuk bagian menu ,kemudian kita membuat tambahan untuk bagian konten seperti code dibawah ini:

<div class="container">
		<h1>Menu Navigasi</h1><br>
		<p>Post By <a href="">Donw Joan</a></p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quibusdam corporis, vero enim omnis. Maiores molestias commodi nisi a possimus pariatur eveniet ducimus itaque labore, earum quidem libero error laborum natus iste distinctio aliquid. Doloribus laborum porro atque quaerat pariatur sit fugit sunt beatae quidem eum a, voluptatem! Ad pariatur expedita maxime rem assumenda eius quas illo dolorem nisi quo ipsa numquam, non veniam corporis praesentium, temporibus, adipisci voluptas et dicta consequuntur? Odio nisi, veritatis, consequuntur maxime soluta suscipit. Iure sunt, excepturi porro facilis ipsam quod deserunt doloremque. Eligendi quas expedita tempore odio vero nihil officia facere facilis cupiditate laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quibusdam corporis, vero enim omnis. Maiores molestias commodi nisi a possimus pariatur eveniet ducimus itaque labore, earum quidem libero error laborum natus iste distinctio aliquid. Doloribus laborum porro atque quaerat pariatur sit fugit sunt beatae quidem eum a, voluptatem! Ad pariatur expedita maxime rem assumenda eius quas illo dolorem nisi quo ipsa numquam, non veniam corporis praesentium, temporibus, adipisci voluptas et dicta consequuntur? Odio nisi, veritatis, consequuntur maxime soluta suscipit. Iure sunt, excepturi porro facilis ipsam quod deserunt doloremque. Eligendi quas expedita tempore odio vero nihil officia facere facilis cupiditate laborum.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quibusdam corporis, vero enim omnis. Maiores molestias commodi nisi a possimus pariatur eveniet ducimus itaque labore, earum quidem libero error laborum natus iste distinctio aliquid. Doloribus laborum porro atque quaerat pariatur sit fugit sunt beatae quidem eum a, voluptatem! Ad pariatur expedita maxime rem assumenda eius quas illo dolorem nisi quo ipsa numquam, non veniam corporis praesentium, temporibus, adipisci voluptas et dicta consequuntur? Odio nisi, veritatis, consequuntur maxime soluta suscipit. Iure sunt, excepturi porro facilis ipsam quod deserunt doloremque. Eligendi quas expedita tempore odio vero nihil officia facere facilis cupiditate laborum.</p>
	</div>

lalu selanjutnya kita akan menambahkan class baru untuk membuat tampilan icon :

<div class="hamburger">
		<span></span>
		<span></span>
		<span></span>
	</div>

class hamburger diatas digunakan untuk menghide menu.

Langkah Kedua

Selanjutnya kita menambahkan style CSS agar tampilan lebih cantik dan menarik,silahkan ketikkan code CSS berikut ini

*{margin:0;padding:0;}
body{
	font-size: 24px;
	font-family: sans-serif;
	background-color: #7a3bfe;
}
nav{
	position: fixed;
	height: 100%;
	width: 20%;
}

nav::before{
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	vertical-align: middle;
}

nav ul{
	width: 80%;
	display: inline-block;
	vertical-align: middle;
}

nav ul li{
	display: block;
	text-transform: uppercase;
	line-height:5;
	font-size: 1rem;
	padding-left: 30px;
	font-weight: bold;
	color: #ffffff;
	cursor: pointer;
	letter-spacing: 2px;
}

.hamburger{
	left:2rem;
	top:2rem;
	width: 1.5rem;
	height: .7rem;
	position: fixed;
	z-index: 2;
	cursor: pointer;
}
.hamburger span{
	display: block;
	background-color: #bdbdbd;
	height: 25%;
	margin-bottom: 20%;
}
.container{
	position: fixed;
	top:0;
	left:0;
	right: 0;
	bottom: 0;
	background-color: #f0f0f0;
	color:#262626;
	padding:4rem;
	overflow: auto;
	transition: .2s ease;
}
@media screen and (orientation:portrait){
	.container{
		padding: 4rem 1rem;
	}
}
.container a{
	color:#00c7be;
}
.container p{
	padding-bottom: 1rem;
}
.container h4{
	margin: 1em 0;
}

@media screen and (orientation:portrait){
	nav.active + .container{
		transform:translateX(55%) scale(0.8);
		box-shadow: 0 0 30px 5px rgba(38,38,38,0.3);
	}
}

@media screen and (orientation:landscape){
	nav.active + .container{
		transform:translateX(5%) scale(0.8);
		box-shadow: 0 0 30px 5px rgba(255, 2, 239, 0.92);
	}
}

Langkah berikutnya adalah menambahkan script dari jQuery untuk event click

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
	<script>
		$(".hamburger").click(function(){
			$("nav").toggleClass("active");
		})
	</script>

Baiklah jika sudah semua coba disimpan kemudian buka browser masing-masing dan pakah sudah benar seperti tampilan berikut ini:

Saya kira cukup dalam pembahasan artikel ini tentang Cara Membuat Responsive Menu Navigasi Bar. Sampai jumpa dalam kesempatan lainya dan terima kasih.