DDMPCMS

Drop Down Menu para compartilhar Mídia Social(07/09/2014)

by Mairink Oemes

HTML

<div class="glossy-selectbox">
    <input type="checkbox">
    <label data-default="Compartilhe este artigo!" data-focus="Escolha um dos serviços de mídia social ..."></label>
    <ul>
        <li><a class="social-rss" href="http://feeds.feedburner.com/mult-focos" target="_blank">RSS Feed</a></li>
        <li><a class="social-facebook" href="https://www.facebook.com/pages/Mult-focos/1432542490311026" target="_blank">Facebook</a></li>
        <li><a class="social-twitter" href="https://twitter.com/multfocos" target="_blank">Twitter</a></li>
        <li><a class="social-google" href="https://plus.google.com/u/0/107868990022648564296/about" target="_blank">Google+</a></li>
    </ul>
</div>

CSS

/*
 * Drop Down Menu para compartilhar Mídia Social
 * Mult-focos
 * URL: https://plus.google.com/u/0/107868990022648564296/about
 */

.glossy-selectbox {
  display:inline-block;
  font:normal bold 12px Arial,Sans-Serif;
  position:relative;
  width:300px;
  background-color:#348EB7;
  text-align:left;
  /* CSS3 Browser */
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,.4) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,.1) 100%);
  /* IE only */
  filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr='#00688B',endColorstr='#3489B3');
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  -webkit-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 1px 1px rgba(255,255,255,.1),0 1px 3px rgba(0,0,0,.7);
}

.glossy-selectbox:before,
.glossy-selectbox:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:3px solid transparent;
  border-width:5px 3px;
  border-bottom-color:#00FFFF;
  position:absolute;
  top:25%;
  right:5px;
  z-index:4;
}

.glossy-selectbox:after {
  border-color:#00FFFF transparent transparent;
  top:auto;
  bottom:25%;
}

.glossy-selectbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:15px;
  height:100%;
 ...

JavaScript

<div class="glossy-selectbox">
    <input type="checkbox">
    <label data-default="Compartilhe este artigo!" data-focus="Escolha um dos serviços de mídia social ..."></label>
    <ul>
        <li><a class="social-rss" href="AQUI A URL" target="_blank">RSS Feed</a></li>
        <li><a class="social-facebook" href="AQUI A URL" target="_blank">Facebook</a></li>
        <li><a class="social-twitter" href="AQUI A URL" target="_blank">Twitter</a></li>
        <li><a class="social-google" href="#AQUI A URL" target="_blank">Google+</a></li>
    </ul>
</div>