E oi de novo! Nesse post vamos fazer um menu super legal, que oculta os links e só aparece quando você passar o mouse sobre ele; assim você poupa espaço, pode dar um efeito legal e fácil de ser feito.
Veja o resultado abaixo (no de vocês não vai aparecer o coração rosa que está aparecendo aqui no blog; no meu aparece porque personalizei as listas com marcadores):
Para isso, em seu HTML, antes de /b:skin, cole isso:
#me-nu { /* area geral */
margin: 0 20px 0 10px;
position: relative;
width: 210px;
z-index: 100;
}
#me-nu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#me-nu li { list-style-type: none; }
#me-nu a { /* links */
color: brown;
font-size: 17px;
text-decoration: none;
text-shadow: 0px 1px 1px #fff;
font-family: 'Lobster', cursive;
}
#me-nu a:hover { color: #FFB0B0; }
#me-nu .palavra {/* palavra menu */
background-color: #FED8CD;
outline: rgb(252, 250, 250) 1px dashed;
outline-offset: -3px;
padding: 5px 0;
text-align: center;
display: block;
position: absolute;
width: 210px;
}
#me-nu ul.palavra li {
color: brown;
font-family: 'Lobster', cursive;
font-size: 24px;
text-shadow: 0px 1px 1px #fee;
}
#me-nu ul.palavra ul li {/* itens ocultos */
border-top: 2px dashed #fcc;
padding: 0 0 5px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
/* links ocultos */
#me-nu .oculto {
display: block;
padding: 0 10px;
position: relative;
top: 10px;
height: 0;
overflow: hidden;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#me-nu ul.palavra:hover .oculto { height: 200px;
}
Agora, onde quer que o menu apareça, como por exemplo, em um gadget HTML/JavaScript, cole isso:
<div id="me-nu">
<ul class="palavra">
<li>Menu<ul class="oculto">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li></ul>
</div>
Espero que gostem! Esse menu está no template free que logo logo vou disponibilizar para vocês :D
Créditos: Vagabundia
Imagem: Weheartit
kawaii eu coloquei o negocio que baixei , vc sabe me dizer é depois ou antes de que esse negocio?
ResponderExcluirOi adoro seu blog queria um assim :3 poderia me passar as larguras dele? Eu emploro!! Preciso urgente!
ResponderExcluirObrigada :3 Seja sempre bem-vinda!!!
ExcluirEsse template que uso é responsivo, fica da largura da tela de acordo com o dispositivo que estiver usando, tipo, tablet, pc ou celular... Recomendo usar um desses, fica mais fácil para definir a largura certinho. Já postei sobre sites que colocam templates assim para download, que nem o sora templates (link lá no final do blog)que foi onde baixei o que uso. Bju