How to HTML CSS

How to make Multilevel Dropdown Menu with HTML5 and CSS3

How to make Multilevel Dropdown Menu with HTML5 and CSS3 December 4, 20144 Comments
tutorial desain web membuat menu dropdown

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

To create a dropdown menu in a web page, usually we used Javascript or JQuery. In this Web Design Tutorial, we will give you a tips how to make dropdown menu without javascript or Jquery , (pure HTML and CSS3).

[/col][/row]

Dropdown menu that we will make use Checkbox element. the source code as follows:

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

[wp_ad_camp_3]
and then, create CSS File like below:

* {
	-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]
[wp_ad_camp_1]

4 comments

Leave a Reply

Your email address will not be published. Required fields are marked *