29 novembro 2015

Menu 142

| |
Olá. Esses dias eu decidi brincar com o HTMLedit e acabou saindo algo que eu gostei. Fiz um menu bem simples. Planejava usa-lo para um template futuro, mas não tenho mais a mesma paciência que eu tinha há alguns anos atrás, então decidi posta-lo aqui. Anyway... exemplo. Espero que gostem.


1. Vá em 'Modelo' e procure por ']]><'. Acima desse trecho cole:

.menu-eah {
font-family: 'slabo 27px'; /* Fonte */
font-size: 19px; /* Tamanho do texto */
padding: 25px;
background-color: #ee8fa9; /* Cor do fundo */
text-align: center;
width: 940px; /* Tamanho */
border-bottom: solid #efefef 1px; /* Borda abaixo do menu */
text-transform: uppercase;
-webkit-transition-duration: .40s;
-moz-transition-duration: .40s;
-ie-transition-duration: .40s;
-o-transition-duration: .40s;}
.menu-eah a {
color: #fff; /* Cor do texto */
margin:5px;
text-align: center;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 7px;
padding-right: 8px;
-webkit-transition-duration: .40s;
-moz-transition-duration: .40s;
-ie-transition-duration: .40s;
-o-transition-duration: .40s;}
.menu-eah a:hover {
color: #f0a2b1; /* Cor do texto hover */
text-align: center;
padding-top: 20px;
padding-bottom:20px;
padding-left: 7px;
padding-right: 8px;
background-color: #fff; /* Cor do menu hover */
opacity: .3; /* Opacidade do menu hover */
-webkit-transition-duration: .40s;
-moz-transition-duration: .40s;
-ie-transition-duration: .40s;
-o-transition-duration: .40s;}

2. Se quiser coloca-lo acima do blog, procure por </header> e cole:

<div style='position: absolute; margin-top: -42px; margin-left: 0px;'>
<div class='menu-eah'>
<a href=''>Página Inicial</a>
<a href=''>tutoriais</a>
<a href=''>downloads</a>
<a href=''>templates</a>
<a href=''>contato</a>
<a href=''>créditos</a>
  </div></div>
Se quiser coloca-lo em outro local, vá em 'Layout' > 'Adicionar Gadget' > 'HTML/JavaScrip' e cole o código que eu passei acima.

3 comentários:

  1. Gostei muito desse menu, provavelmente usarei algum dia :3

    ResponderExcluir
  2. Quanto tempo néh?!
    O resultado ficou super maravilhoso, amei. Depois traz um com caixa de pesquisa por favor?

    Studio-Help.blogspot.com.br

    ResponderExcluir
  3. Já estou usando :3 Ficou super legal, eu só tive que fixa no topo e sobrepor ele aos outros elementos, já que queria ele no topo, mas me ajudou muito! *^*

    http://exalandopurpurina1.blogspot.com.br/

    ResponderExcluir

« »