Subnavigasi dropdown di dalam bar navigasi menu

Subnavigasi dropdown di dalam bar navigasi menu adalah menu bar yang muncul di bawah menu bar utama.

Script menu ini hanya menggunakan CSS saja. Menu ini adalah pengembangan dari Menu Dropdown yang sebelumnya pernah di bahas.


Langsung saja simak scriptnya di bawah

Subnavigasi dropdown CSS

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
}
.navbar {
	overflow: hidden;
	background-color: #333;
}
.navbar a {
	float: left;
	font-size: 16px;
	color: #fff;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
.subnav {
	float: left;
	overflow: hidden;
}
.subnav .subnavbtn {
	font-size: 16px;  
	border: none;
	outline: none;
	color: #fff;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}
.navbar a:hover, .subnav:hover .subnavbtn {
	background-color: #3498DB;
}
.subnav-content {
	display: none;
	position: absolute;
	left: 0;
	background-color: #3498DB;
	border-bottom: 1px solid #333;
	width: 100%;
	z-index: 1;
}
.subnav-content a {
	float: left;
	color: #fff;
	text-decoration: none;
}
.subnav-content a:hover {
	background-color: #fff;
	color: #3498DB;
}
.subnav:hover .subnav-content {
	display: block;
}


Subnavigasi dropdown HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Subnavigasi dropdown di dalam bar navigasi menu</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<div class="navbar">
	<a href="#">HOME</a>
	<div class="subnav">
    <button class="subnavbtn">ABOUT <i class="fa fa-caret-down"></i></button>
    	<div class="subnav-content">
			<a href="#">Company</a>
			<a href="#">Team</a>
			<a href="#">Careers</a>
    	</div>
	</div> 
	<div class="subnav">
    <button class="subnavbtn">TUTORIAL <i class="fa fa-caret-down"></i></button>
		<div class="subnav-content">
			<a href="#">HTML</a>
			<a href="#">CSS</a>
			<a href="#">PHP</a>
			<a href="#">JAVASCRIP</a>
    	</div>
	</div> 
	<a href="#">CONTACT</a>
</div>

<div style="padding:0 16px">
  <h3>Subnavigasi dropdown di dalam bar navigasi menu</h3>
  <p>Arahkan Cursor anda pada menu bar satu persatu untuk melihat hasil script</p>
</div>

</body>
</html>

Anda bisa menggabungkan script css dan html dalam bentuk internal css ataupun external css. Panduan singkat mengenai internal dan external css, silahkan baca di https://my-id.site/tutorial-dasar-css/

Dan seperti biasa, Anda bisa langsung melihat dan mengedit script di atas menggunakan Realtime HTML Editor ↗ yang telah Saya sediakan.

Sampai disini dulu sedikit pembahasan tentang Free Script, Sampai jumpa lagi di tutorial berikutnya. Salam sukses buat Anda semua.

Mungkin Anda Menyukai