Tutorial: Flat Drop down Menu using CSS
In this tutorial we will create a really beautiful and simple flat drop down menu using HTML and CSS only. We are not using any JavaScript or jQuery plugin to achieve the drop down effect. This will be a simple, neat and clean flat drop down menu which will follow the current flat UI trend in the design industry. So let’s start creating our simple drop down menu.
The Markup
<div> <span tabindex="0"></span>
<div class="dropdown"> <span class="dropdown-toggle" tabindex="0"></span>
<div class="dropdown-text">Profile <i class="icon-user icon"></i></div>
<ul class="dropdown-content">
<li><a href="#">Settings <i class="icon-wrench-1 icon"></i></a></li>
<li><a href="#">Messages <i class="icon-mail icon"></i></a></li>
<li><a href="#">Images <i class="icon-picture-1 icon"></i></a></li>
<li><a href="#">Statistics <i class="icon-chart-pie icon"></i></a></li>
<li><a href="#">Projects <i class="icon-folder icon"></i></a></li>
<li><a href="#">Log out <i class="icon-logout icon"></i></a></li>
</ul>
</div>
CSS
So now lets heads towards the CSS
The following classes will add the styling to our main toggle div. After clicking on it our drop down list will appear.
/*
* Dropdown menu
*/
.dropdown {
position: relative;
display: inline-block;
text-align: left;
width: 300px;
}
.dropdown-text {
cursor: pointer;
position: absolute;
text-indent: 10px;
line-height: 38px;
background-color: #4f4f4b;
width: 100%;
}
.dropdown-text,
.dropdown-content a {
color: #fff;
text-transform:uppercase;
letter-spacing: 1px;
}
Now lets style our drop down list. We will be using simple <ul> list for that.
.dropdown-content {
-webkit-transition: .25s ease;
-moz-transition: .25s ease;
-ms-transition: .25s ease;
-o-transition: .25s ease;
transition: .25s ease;
list-style-type: none;
position: absolute;
top: 32px;
padding: 0;
margin: 0;
opacity: 0;
visibility:hidden;
text-indent: 10px;
line-height: 38px;
background-color: #df826b;
width: 300px;
}
.dropdown-content:after {
position: absolute;
right: 14px;
top: -9px;
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 8px 9px 8px;
border-color: transparent transparent #df826b transparent;
}
.dropdown-content li {
border-bottom:4px solid #4f4f4b;
overflow:hidden;
}
.dropdown-content li:last-child {
border-bottom:none;
}
.dropdown-content a {
display: block;
-webkit-transition: .25s ease;
-moz-transition: .25s ease;
-ms-transition: .25s ease;
-o-transition: .25s ease;
transition: .25s ease;
}
.dropdown-content a:hover {
background: #4f4f4b;
padding-left:5px;
}
We have styled our both elements. Now we can go ahead to make the drop down list visible by clicking on dropdown-text. For this we are using :focus selector. We are using :focus selector, so that the drop down list can be hidden after clicking on the screen
.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
background-color: #4f4f4b;
}
.dropdown-toggle:focus ~ .dropdown-text {
border-color: #c5c5c5;
z-index: 2;
}
.dropdown-toggle:focus ~ .dropdown-text:after {
border-width: 0 4px 5px 4px;
border-color: transparent transparent #555 transparent;
}
.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
opacity: 1;
visibility:visible;
top: 55px;
}
In this way we have designed and developed a beautiful flat dropdown menu using CSS only. You can use it in many ways, like account dropdown menu or social share drop down concept. If you find any difficulty in the example the post your comment in the comment section.
We would like to thank Fontello for the beautiful icon font we have used in this example.
To be updated on our latest tutorials, freebies, tips and tricks and inspiration articles, you can subscribe us via Facebook, Twitter or RSS.