[row]
[col span=”1/2″][wp_ad_camp_2][/col]
[col span=”1/2″]

Untuk membuat dropdown menu di halaman web, biasanya kita biasa menggunakan Javascript atau JQuery. Di Tutorial Desain web kali ini, kami akan memberikan tips bagaimana membuat dropdown menu tanpa Jquery, murni hanya menggunakan HTML dan CSS3.

[/col][/row]

Dropdown menu yang akan kita buat menggunakan elemen Checkbox. Langsung saja kita buka source codenya 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 | Bestariwebhost - 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>                           
                            
                            

Kemudian kita buat File CSS sebagai berikut :

* {
	-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;

}
	

Demo Download

[wp_ad_camp_2]

(Visited 197 times, 1 visits today)