HTML CSS Indonesia Web Desain

Tutorial membuat Multilevel Dropdown Menu dgn HTML5 dan CSS3

Tutorial membuat Multilevel Dropdown Menu dgn HTML5 dan CSS3 Juli 13, 2014Leave a comment

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

tutorial desain web membuat menu dropdown

[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]

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *