<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>
<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>
/* * 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%; opacity:0; z-index:10; cursor:pointer; } .glossy-selectbox label { display:block; line-height:45px; color:rgba(255,255,255,.5); padding:0 15px; -webkit-transition:all 0s ease-out; -moz-transition:all 0s ease-out; -ms-transition:all 0s ease-out; -o-transition:all 0s ease-out; transition:all 0s ease-out; } .glossy-selectbox label:before { content:attr(data-default); } .glossy-selectbox label:after { content:""; display:block; position:absolute; top:0; right:0; bottom:0; width:15px; border-left:1px solid rgba(0,0,0,.4); -webkit-border-radius:0 7px 7px 0; -moz-border-radius:0 7px 7px 0; border-radius:0 7px 7px 0; -webkit-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1); -moz-box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1); box-shadow:inset 1px 0 0 rgba(255,255,255,.1),-1px 0 0 rgba(255,255,255,.1); } .glossy-selectbox input:hover + label { color:Cyan; } .glossy-selectbox input:hover + label:after { background-color:rgba(255,255,255,.04); } .glossy-selectbox ul { margin:0 0; padding:0 0; position:absolute; top:100%; left:14px; right:14px; background-color:#3487B1; border:1px solid #49B5D4; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4); -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4); box-shadow:0 1px 2px rgba(0,0,0,.4),0 5px 7px -2px rgba(0,0,0,.4); visibility:hidden; opacity:0; z-index:99; } .glossy-selectbox li { margin:0 0; padding:0 0; list-style:none; float:left; width:50%; display:inline; } .glossy-selectbox a { display:block; position:relative; color:#fff; text-decoration:none; text-shadow:0 0 2px Cyan; line-height:30px; border-top:1px solid #49B5D4; border-right:1px solid #49B5D4; padding:0 15px 0 32px; -webkit-box-shadow:inset 0 0 0 1px #104E8B; -moz-box-shadow:inset 0 0 0 1px #104E8B; box-shadow:inset 0 0 0 1px #104E8B; /*Nota Opera: Uma caixa de sombra instável irá aparecer se você não definir o raio de fronteira a menos de 1 pixel. Estranho! */ -webkit-border-radius:1px; -moz-border-radius:1px; border-radius:1px; } .glossy-selectbox a:nth-child(even) { border-right-width:0; } CSS .glossy-selectbox a:before { content:""; display:block; width:16px; height:16px; position:absolute; top:7px; left:7px; background-color:transparent; background-repeat:no-repeat; background-position:50% 0; } .glossy-selectbox a:hover:before { background-position:50% 100%; } .glossy-selectbox .social-rss:before {background-image:url('img/social_rss.png');} .glossy-selectbox .social-facebook:before {background-image:url('img/social_facebook.png');} .glossy-selectbox .social-twitter:before {background-image:url('img/social_twitter.png');} .glossy-selectbox .social-google:before {background-image:url('img/social_google.png');} .glossy-selectbox a:hover { background-color:rgba(0,0,0,.2); color:#ccc; } /* On click, then... */ .glossy-selectbox input:checked + label { color:rgba(255,255,255,.4); -webkit-transition-duration:.4s; -moz-transition-duration:.4s; -ms-transition-duration:.4s; -o-transition-duration:.4s; transition-duration:.4s; } .glossy-selectbox input:checked + label:before { content:attr(data-focus); } .glossy-selectbox input:checked + label:after { background-color:rgba(0,0,0,.2); -webkit-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1); -moz-box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1); box-shadow:inset 1px 0 1px rgba(0,0,0,.4),-1px 0 0 rgba(255,255,255,.1); } .glossy-selectbox input:checked ~ ul { visibility:visible; opacity:1; }