cara buat menu dropdown dengan html5 dan css3

Untuk membuat menu dropdown di halaman web, biasanya kami menggunakan Javascript atau JQuery. Dalam Tutorial Desain Web ini, kami akan memberi Anda tips cara membuat dropdown dengan html5 dan css3

Sumber postingan dari humayraa.com

Menu dropdown yang akan kita gunakan menggunakan elemen Kotak Centang. kode sumber sebagai berikut:

<html>
<head>
<link rel='stylesheet'  href='dropdownmenu.css' type='text/css' media='all' />
<link href="https://www.bestariwebhost.com/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<title>Membuat Multilevel Dropdown Menu dengan HTML dan CSS3 |  - Domain murah, Cpanel web Hosting</title>
</head>
<body>
<ul>
	<li class="block">
		<input type="checkbox" name="item" id="item1" />   
		<label for="item1"><i aria-hidden="true" class="fa fa-users"></i> Friends <span>124</span></label>
		<ul class="options">
			<li><a href="#"><i aria-hidden="true" class="fa fa-search"></i> Find New Friends</a></li>
			<li><a href="#"><i aria-hidden="true" class="fa fa-arrow-circle-right"></i> Poke A Friend</a></li>
			<li><a href="#"><i aria-hidden="true" class="fa fa-fire"></i> Incinerate Existing Friends</a></li>
		</ul>
	</li>
	<li class="block">
		<input type="checkbox" name="item" id="item2" />   
		<label for="item2"><i aria-hidden="true" class="fa fa-film"></i> Videos <span>1,034</span></label>
		<ul class="options">
			<li><a href="#"><i aria-hidden="true" class="fa fa-video-camera"></i> My Videos <span>7</span></a></li>
			<li><a href="#"><i aria-hidden="true" class="fa fa-download"></i> My Downloaded Videos <span>3</span></a></li>
			<li><a href="#"><i aria-hidden="true" class="fa fa-warning"></i> My Well Dodgy Videos <span>1,024</span></a></li>
		</ul>
	</li>
	<li class="block">
		<input type="checkbox" name="item" id="item3" />   
		<label for="item3"><i aria-hidden="true" class="fa fa-image"></i> Galleries <span>4</span></label>
		<ul class="options">
			<li><a href="https://bestariweb.deviantart.com/" target="_blank"><i aria-hidden="true" class="fa fa-deviantart"></i> My Deviant Art</a></li>
			<li><a href="https://dribbble.com/" target="_blank"><i aria-hidden="true" class="fa fa-dribbble"></i> Latest Dribbble Images</a></li>
			<li><a href="https://github.com/bestariweb" target="_blank"><i aria-hidden="true" class="fa fa-github-alt"></i> My Github Acc</a></li>
			<li><a href="https://www.facebook.com/Bestariwebstudio" target="_blank"><i aria-hidden="true" class="fa fa-facebook-square"></i> Facebook Fanspage</a></li>
		</ul>
	</li>
	<li class="block">
		<input type="checkbox" name="item" id="item4" />   
		<label for="item4"><i aria-hidden="true" class="fa fa-microphone"></i> Podcasts <span>1</span></label>
		<ul class="options">
			<li><a href="https://www.bestariwebhost.com/category/css3/" target="_blank"><i aria-hidden="true" class="fa fa-music"></i> CSS-Tricks</a></li>
		</ul>
	</li>
	<li class="block">
		<input type="checkbox" name="item" id="item5" />   
		<label for="item5"><i aria-hidden="true" class="fa fa-android"></i> Robots <span>3</span></label>
		<ul class="options">
			<li><a href="http://en.wikipedia.org/wiki/HAL_9000" target="_blank"><i aria-hidden="true" class="fa fa-eye"></i> Hal 9000</a></li>
			<li><a href="http://en.wikipedia.org/wiki/Skynet_(Terminator)" target="_blank"><i aria-hidden="true" class="fa fa-cloud"></i> Skynet</a></li>
			<li><a href="http://en.wikipedia.org/wiki/Short_Circuit" target="_blank"><i aria-hidden="true" class="fa fa-reddit"></i> Johnny 5</a></li>
		</ul>
	</li>
</ul>
</Body>
</html>                           
         
          
Dan kemudian buat css filenya
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family:arial, sans-serif;
	font-weight:normal;
	font-size:12px;
	background:#3f4348 url('bg.png');
}

ul {
	list-style:none;
	margin:0; 
	padding:0;
	width:300px;
	margin:0 auto;
	-moz-box-shadow: 0 0 5px #111;
	-webkit-box-shadow: 0 0 5px #111;
	box-shadow: 0 0 5px #111;
}

ul li label {
	background: #575e63; /* fallback colour */
	border-top:1px solid #878e98;
	border-bottom:1px solid #33373d;
	color: #fff;
	text-shadow: 0 1px 1px #000;
	letter-spacing: 0.09em;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#575e63), to(#3f4347));
	background: -webkit-linear-gradient(top, #575e63, #3f4347);
	background: -moz-linear-gradient(top, #575e63, #3f4347);
	background: -ms-linear-gradient(top, #575e63, #3f4347);
	background: -o-linear-gradient(top, #575e63, #3f4347);
}

ul li input[type='checkbox'] {
	display: none;
}

ul li label {
	display:block;
	padding:12px;
	width:300px;
}

ul li i {
	font-size:18px;
	vertical-align: middle;
	width:20px;
	display:inline-block;
}

ul li span {
	display:inline;
	float:right;
	background:#48515c;
	border:1px solid #3c434c;
	border-bottom:1px solid #707781;
	padding:4px 6px;
	font-size:10px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: inset 0 0 10px #111;
	-webkit-box-shadow: inset 0 0 10px #111;
	box-shadow: inner 0 0 10px #111;
	position:relative;
}

ul li label:hover {
	background: #566f82; /* fallback colour */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#566f82), to(#3e505e));
	background: -webkit-linear-gradient(top, #566f82, #3e505e);
	background: -moz-linear-gradient(top, #566f82, #3e505e);
	background: -ms-linear-gradient(top, #566f82, #3e505e);
	background: -o-linear-gradient(top, #566f82, #3e505e);
}

ul li label:hover span {
	background:#3e505e;
}

ul li input[type='checkbox']:checked ~ label {
	background: #44c6eb; /* fallback colour */
	border-top:1px solid #878e98;
	border-bottom:1px solid #2799db;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#44c6eb), to(#2799db));
	background: -webkit-linear-gradient(top, #44c6eb, #2799db);
	background: -moz-linear-gradient(top, #44c6eb, #2799db);
	background: -ms-linear-gradient(top, #44c6eb, #2799db);
	background: -o-linear-gradient(top, #44c6eb, #2799db);
}

ul li input[type='checkbox']:checked ~ label span {
	background: #2173a1; /* fallback colour */
	border-top:1px solid #1b5f85;
	border-bottom:1px solid #4cb1e4;
	-moz-box-shadow: inset 0 0 5px #111;
	-webkit-box-shadow: inset 0 0 5px #111;
	box-shadow: inner 0 0 5px #111;

}

ul li input[type='checkbox']:checked ~ .options {
	height: auto;
	display:block;
	min-height:40px;
	max-height:400px;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
}

ul ul {
	background:#fff; margin:0; padding:0;
	-moz-box-shadow: inset 0 2px 2px #b3b3b3;
	-webkit-box-shadow: inset 0 2px 2px #b3b3b3;
	box-shadow: inner 0 2px 2px #b3b3b3;
}

ul ul li a {
	display:block;
	padding:6px 12px;
	color:#999;
	text-decoration:none;
}

ul ul li a:hover {
	color:#44c6eb;
}

ul ul li a span {
	color:#999;
	background:none;
	border:1px solid #ccc; 
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

ul ul li {
	border-bottom:1px solid #ccc;
}

ul ul li:first-child {
	padding-top:6px;
}

ul ul li:last-child {
	padding-bottom:6px; border:0;
}

.options {
	height: 0;
	display: block;
	overflow: hidden;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;

}
	
0 Shares:
You May Also Like