So we're back with a new post and also a new domain so now WidCraft is BWidgets and today i'am sharing this amazing CSS FB style select list with you guys. So many of us creates Facebook layouts so i think this will help :
HTML :
This is a <div class="dropdown" id="dropdown">
<a class="dropdown_button dropdown_close" href="#">Buy/Listen <span class="arrow"></span></a>
<a class="dropdown_button dropdown_open" href="#dropdown">Buy/Listen <span class="arrow"></span></a>
<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>
<li><a href="#">View on PeterSchoffelen.nl</a></li>
</ul>
</div> button in the middle of a line of text.
CSS :
b,
a {
color: #3b5998;
text-decoration: none;
}
a:hover { text-decoration: underline }
h2 {
color: #3B5998;
font-size: 18px;
line-height: 24px;
font-weight: bold;
}
.dropdown {
/* display: block; */
display: inline-block;
margin-right: 3px;
margin-left: 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:target .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 .dropdown_close { display: none }
.dropdown:target .dropdown_close { display: inline-block }
.dropdown:target .dropdown_open { display: none }
/* .dropdown .dropdown_button img {
height: 14px;
margin-top: 1px;
margin-bottom: 1px;
float: left;
margin-right: 5px;
}
================================================== */
.arrow {
display: inline-block;
width: 0px;
height: 0px;
border-top: 5px solid #6B7FA7;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.dropdown:target .arrow {
border-top: 5px solid #fff;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.dropdown .dropdown_content {
display: none;
position: absolute;
border: 1px solid #777;
padding: 0px;
background: white;
margin: 0;
}
.dropdown:target .dropdown_content { display: block }
.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 .dropdown_content li img {
height: 14px;
margin-top: 1px;
margin-bottom: 1px;
float: left;
margin-right: 5px;
border: none;
}
I know it's damn professional so just go and try this on your documents and blogs.....
Article Source : http://cssdeck.com/labs/facebook-style-dropdown-menu
