Flat Drop down Menu using CSS

Flat drop down menu using CSS
284 Flares 284 Flares ×

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

dropdown-toggle

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.

284 Flares Twitter 14 Facebook 40 Google+ 6 LinkedIn 220 Pin It Share 4 284 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him akash@dzyngiri.com | Twitter | Facebook

Connect with us

6 Comments

  1. Great tutorial, and I love the interface. I was wondering how could i create a sub menu with this design, so when I click on setting another menu would come up. Thanks you for your help!

  2. Hi, I am totally diggin’ this simple CSS menu, but it seems to not work at all on iDevices. The demo will not work on my iPad or iPhone. Any ideas why?

    • I have a better idea why it’s not working, it seem the iDevices does not handle “.dropdown-toggle:focus ~ .dropdown-content” kind of functions. Is there any chance this can be fixed by jQuery?

Leave a Reply

(*) Required, Your email will not be published