Welcome to GeekShield!
We see that you not logged in or registerd. Please click one of the buttons below!

You are not connected. Please login or register

[CSS] Facebook Style Dropdown

Go down  Message [Page 1 of 1]

1 [CSS] Facebook Style Dropdown on Mon Apr 30, 2012 3:31 am


OK, today we going to learn a facebook style dropdown. It's a pretty simple tutorial.

First off we need the markup, also know as the HTML tounge
<div class="dropdown" id="dropdown">
   <input type="checkbox" id="drop1" />
      <label for="drop1" class="dropdown_button">Buy/Listen <span class="arrow"></span></label>
      <ul class="dropdown_content">
         <li><a href="#">Buy on iTunes</a></li>
         <li><a href="#">Buy on Amazon</a></li>
         <li><a href="#">Buy on CD Baby</a></li>                               
         <li><a href="#">Listen via Spotify</a></li>                                                               
         <li><a href="#">View on YouTube</a></li>                                                               
         <li><a href="#">View on Last.fm</a></li>                               

Now it's just as simple as styling it, they are just basic styles...
.dropdown {
   display: block;
   display: inline-block;
   margin: 0px 3px;
   position: relative;

.dropdown .dropdown_button {
   cursor: pointer;
   width: auto;
   display: inline-block;
   padding: 4px 5px;
   border: 1px solid #AAA;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   font-weight: bold;
   color: #717780;
   line-height: 16px;
   text-decoration: none !important;
   background: white;

.dropdown input[type="checkbox"]:checked +  .dropdown_button {
   border: 1px solid #3B5998;
   color: white;
   background: #6D84B4;
   -moz-border-radius-topleft: 2px;
   -moz-border-radius-topright: 2px;
   -moz-border-radius-bottomright: 0px;
   -moz-border-radius-bottomleft: 0px;
   -webkit-border-radius: 2px 2px 0px 0px;
   border-radius: 2px 2px 0px 0px;
   border-bottom-color: #6D84B4;

.dropdown input[type="checkbox"] + .dropdown_button .arrow {
   display: inline-block;
   width: 0px;
   height: 0px;
   border-top: 5px solid #6B7FA7;
   border-right: 5px solid transparent;
   border-left: 5px solid transparent;

.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent }

.dropdown .dropdown_content {
   position: absolute;
   border: 1px solid #777;
   padding: 0px;
   background: white;
   margin: 0;
   display: none;

.dropdown .dropdown_content li {
   list-style: none;
   margin-left: 0px;
   line-height: 16px;
   border-top: 1px solid #FFF;
   border-bottom: 1px solid #FFF;
   margin-top: 2px;
   margin-bottom: 2px;

.dropdown .dropdown_content li:hover {
   border-top-color: #3B5998;
   border-bottom-color: #3B5998;
   background: #6D84B4;

.dropdown .dropdown_content li a {
   display: block;
   padding: 2px 7px;
   padding-right: 15px;
   color: black;
   text-decoration: none !important;
   white-space: nowrap;

.dropdown .dropdown_content li:hover a {
   color: white;
   text-decoration: none !important;

.dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block }

.dropdown input[type="checkbox"] { display: none }

This tutorial is copyright to GeekShield. It may not be posted elsewhere without written consent
©️GeekShield 2012

View user profile http://www.geek-shield.com

2 Re: [CSS] Facebook Style Dropdown on Mon Apr 30, 2012 9:20 am


Nice tut, the demo button doesn't work though.

View user profile

3 Re: [CSS] Facebook Style Dropdown on Wed May 02, 2012 10:27 pm


Dex♥ wrote:Nice tut, the demo button doesn't work though.

I've got the same problem.

View user profile

Sponsored content

Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum