Menu com Links Ocultos

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

3 Comments

  1. princesinha kawaii27 junho

    kawaii eu coloquei o negocio que baixei , vc sabe me dizer é depois ou antes de que esse negocio?

    ResponderExcluir
  2. Anônimo10 junho

    Oi adoro seu blog queria um assim :3 poderia me passar as larguras dele? Eu emploro!! Preciso urgente!

    ResponderExcluir
    Respostas
    1. Roberta21 julho

      Obrigada :3 Seja sempre bem-vinda!!!
      Esse 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

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up