27 de jan. de 2013

Menu DropDown Simples

Menu DropDown Simples
E ai gente bunita, venho trazer um menu DropDown Vertical simples só com CSS3... é bem simples mas se você posicionar ele em algum lugar no seu template vai ficar bem legal... Aqui eu estou postando só como um exemplo de "Redes Sociais" mas você pode colocar qualquer link... em fim confiram a demo abaixo:

Demonstração

É bem simples de colocar, sigam alguns passos:

Vá em, >> Editar HTML >> procure por:

]]></b:skin>
Acima dela adicione o seguinTe CSS:

.mais {
display: inline-block;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
}

.drop-menu:hover {
border: 1px solid #fff;
}

.drop-menu:hover .sub-menu {
display: inline-block;
}

.drop-menu:hover .plus {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

.sub-menu {
display: none;
width: 400px;
background: #fff;
padding: 10px 10px;
margin-left: -11px;
margin-top: 10px;
border: 1px solid #fff;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}

.sub-menu li {
list-style-type: none;
display: block;
border-bottom: 1px dotted #eaeaea;
font-size: 19px;
height: 22px;
padding: 8px 0;
}

.sub-menu li img {
margin-right: .5em;
}

.sub-menu li:hover {
border-bottom: 1px dotted #bababa;
}

Basta agora usar as seguintes DIV's para chamar o CSS:

<div class="drop-menu">
<span class="mais">+</span> &nbsp; Menu de Redes sociais
<ul class="sub-menu">
<li><a href="#"><img src="http://1.bp.blogspot.com/-aGYzMlEd8DI/UQW1SIehzuI/AAAAAAAAEsI/yD8QRUQoQRk/s1600/rss.png" border="0" alt="rss"> Assine nosso Feed</a></li>
<li><a href="#"><img src="http://4.bp.blogspot.com/-vIKPVTszOcg/UQW1SXyffuI/AAAAAAAAEsU/Bu43TDcbMHA/s1600/email.png" border="0" alt="email"> Assinantes por E-mail</a></li>
<li><a href="#"><img src="http://1.bp.blogspot.com/-5qh3_VgYmac/UQW1TC2lfhI/AAAAAAAAEsg/ugW01VZGkvs/s1600/twitter.png" border="0" alt="twitter">+ Siga-nos</a></li>
</ul>
</div>

Agora é só editar e posicionar em algum lugar que não atrapalhe outras funções do template... Até mais!

4 comentários:

  1. Respostas
    1. Hey Lord eu sou o Mello da Fairy Tail STORM eu vim dizer que aceitamos a parceria e ja adicionei o banner de vocês, a proposito gosto muito do site de vocês boa sorte e continuem o bom trabalho!

      Excluir