Cara Membuat Menubar Dengan Toggle Menggunakan HTML CSS dan JQuery

Pada artikel ini kita akan belajar bagaimana cara membuat sebuah menubar dengan toggle menggunakan HTML CSS dan JQuery, menubar yang akan dibuat disini ada sebuah toggle yang nanti saat akan diklik berfungsi memunculkan menu dan menyembunyikan menu. Tentu sebagai seorang WebDesign harus banyak memiliki variasi dalam membuat tampilan yang disuguhkan kepada pengguna website, serta dapat memudahkan penggunanya atau sering disebut User Friendly.Mari kita coba membuatnya ,sahabat bisa langsung mengikuti langkah-langkah berikut ini.

Langkah pertama buat struktur HTML lalu ketikan scriptnya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="menubar">
		<ul>
			<li><a class="ion-logo-instagram" href=""></a></li>
			<li><a class="ion-logo-facebook" href=""></a></li>	
			<li><a class="ion-logo-twitter" href=""></a></li>
			<li><a class="ion-logo-whatsapp" href=""></a></li>
			<li><a class="ion-md-photos" href=""></a></li>
			<li><a class="ion-md-aperture" href=""></a></li>	
			<li><a class="ion-ios-videocam" href=""></a></li>
			<li><a class="ion-logo-game-controller-b" href=""></a></li>
			<li><a class="ion-logo-xbox" href=""></a></li>
		</ul>
	</div>
	<a class="icon"></a>

	<script type="text/javascript">
		$('.icon').on("click", function(){
			$('.icon').toggleClass('icons');
			$('.menubar').toggleClass('menu');
		});
	</script>
</body>
</html>

Langkah berikutnya membuat style CSS ketikan seperti berikut:

/* digunakan untuk icon menu pada framework ionic */
@import 'https://unpkg.com/ionicons@4.2.2/dist/css/ionicons.min.css';

body, html{
	margin:0;
	padding: 0;
	font-family: serif;
	height: 100%;
	width: 100%;
}

.menubar{
	float: left;
	width: 100px;
	height: 100%;
	background: aqua;
	overflow: hidden;
	margin-left: -100px;
	transition: 0.8s all;
}

.menu{
	margin-left: 0;
}

.menubar ul{
	margin: 0;
	padding: 0;
}

.menubar ul li{
	list-style: none;
}

.menubar ul li a{
	text-decoration: none;
	color: #fff;
	height: 80px;
	width: 100%;
	font-size: 40px;
	line-height: 80px;
	text-align: center;
	display: block;
	transition: 0.6s all;
}

.menu ul li a:hover{
	background: #abcdef;
}

.icon{
	float: left;
	padding:0 10px;
	font-size: 40px;
	text-decoration: none;
	color: #2c3e50;
	font-family: 'Ionicons';
	cursor: pointer;
}

/* value content menggunakan kode dari icon ionic */
.icon:before{
	content: '\f32a';
}

/* value content menggunakan kode dari icon ionic */
.icons:before{
	content: '\f166';
}

Sahabat bisa perhatikan pada list menu yang saya berikan menggunakan class pada Ionicons yang terdapat pada Framework IONIC, sahabat bisa mencari icon yang saya pakai pada link disini .

Sekarang coba dijalankan pada browser sahabat apakah sudah sesuai tampilanya seperti dibawah ini:

           

Demikian pembahasan artikel ini tentang cara membuat sebuah menubar dengan toggle menggunakan HTML CSS dan JQuery ,semoga bermanfaat dan selamat mencoba.

terima kasih