In Tutoriais

Menu Super Fofo e Completo!

Olá!!! Super feliz em receber sua visita!!! Bom, como eu disse no resumo aí em cima, hoje vou mostrar para vocês como fazer um menu que eu adoro! Ele é bem completo, com espaço para submenus, área para HTML e efeito de opacidade que o destaca quando se passa o mouse nele. Mas como nem tudo é perfeito, existem os poréns: talvez esse menu entre em conflito com outros scripts do seu blog, como aconteceu comigo, que queria usá-lo nesse template, só que ele não dá certo aqui. Ele usa Jquery e é feito em apenas 3 passos: CSS - Scripts - HTML. Antes de testar, vale a pena fazer um backup do seu template. Vai ficar assim (claro, você pode editar):

Para ver como ele funciona, acesse o blog de testes do Reino Kawaii: Laboratório Kawaii
Vamos lá!!!!
1 - CSS:
Vamos primeiro dar um estilo ou aparência ao nosso menu. Acesse a área de edição de HTML do seu modelo e procure por ]]></b:skin>. Quando encontrar cole acima dele:

.oe_overlay { /* opacidade quando passa o mouse */
    background: none repeat scroll 0 0 #ffffff; /* cor da opacidade */
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
ul.oe_menu {  /* largura e posicionamento */
    clear: both;
    float: left;
    list-style: none outside none;
    margin: 30px 0 0 30px;
    position: relative;
    width: 100px; /* aumente o numero para colocar na horizontal */
}
ul.oe_menu > li {  /* cada menuzinho */
    float: left;
    height: 100px;
    padding-bottom: 2px;
    position: relative;
    width: 90px;
}
ul.oe_menu > li > a { /* texto de cada menuzinho */
    color: #FF079E;
    display: block;
    font-size: 16px;
font-family: Lobster;
    font-weight: bold;
-moz-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
    height: 100px;
    margin: 1px;
    opacity: 0.8;
    padding: 10px;
    text-decoration: none;
    text-shadow: 0 0 1px #fff;
    width: 90px;
    background: url(http://olhar-43.net/conteudo/patterns/patterns3/4.gif) repeat;
border-left: 0 solid #fff;
    border-radius: 18px 18px 18px 18px;
box-shadow: 5px 5px 5px 5px #fcc;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a { /* cada menuzinho selecionado  */
    background: none repeat scroll 0 0 #fee;
    color: #FF079E;
text-shadow: 0 0 1px #fff;
    opacity: 1;
border-left: 0 solid #fff;
    border-radius: 18px 18px 18px 18px;
}
.oe_wrapper ul.hovered > li > a { /* efeito hover */
    background: url(http://olhar-43.net/conteudo/patterns/patterns3/4.gif) repeat;
    text-shadow: 0 0 1px #fff;
    color: #FF079E;
border-radius: 18px 18px 18px 18px;
}
ul.oe_menu div { /* estilos para o que fica oculto */
    background: url(http://2.bp.blogspot.com/-cBbKleukTFg/T_oDuw5pKrI/AAAAAAAABQs/P5pxeqjXWsA/s400/bgbodycortininha.png) repeat;
    display: none;
    height: 200px;
    left: 1px;
    padding: 30px;
    position: absolute;
    top: 103px;
    width: 400px;
border-radius: 18px 18px 18px 18px;
box-shadow: 5px 5px 5px 5px #fee;
}
ul.oe_menu div ul li a {/* estilos para o texto do submenu que fica oculto */
    color: #F694FF;
    display: block;
    font-size: 16px;
font-family: Lobster;
    margin: 2px;
    padding: 2px 2px 2px 4px;
    text-decoration: none;
text-shadow: 1px 2px 3px #fff;
}
ul.oe_menu div ul.oe_full {
    width: 100%;
}
ul.oe_menu div ul li a:hover {/* estilos para o texto selecionado do submenu que fica oculto */
    background: none repeat scroll 0 0 #fee;
    color: #FF079E;
border-radius: 10px;
box-shadow: 1px 2px 3px #fcc;
}
ul.oe_menu li ul {
    float: left;
    list-style: none outside none;
    margin-right: 10px;
    text-align: left;
    width: 150px;
}
li.oe_heading {
    color: #F6B8FC;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-shadow: 0 0 1px #ffffff;
}

No código já vem explicando o básico para alterar seu menu, ou seja, as cores, tamanhos...perceba que se usa listas, que em HTML são representadas por <ul> e <li>. Essas listas farão com que apareçam aqueles marcadores em forma de bolinhas ou de outro ícone, caso você tenha adicionado algum estilo para listas. Se você não adicionou ou não quer as bolinhas, cole isso acima de ]]></b:skin> também:
.post ul, li {
line-height:1.5em;
list-style:none;
background:url("http://2.bp.blogspot.com/_0CLPmP1ydOo/SX6YmxWi2XI/AAAAAAAAATo/m7Bh7pxxWpo/s1600/list.png") no-repeat $startSide .3em;
vertical-align:top;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .6em;
padding-$startSide: 17px;
margin:0;
}
Créditos do código acima: Ipietoon
Elas irão sumir ou no lugar delas uma flor aparecerá. Ok? Vamos adicionar os...
2 - Scripts
Acima de </head> cole isso aqui:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

IMPORTANTE: se você já usa essa versão do Jquery, não precisa colar o script acima.
Continuando, acrescente este aqui também acima de </head>:
<script type='text/javascript'>
//<![CDATA[
            $(function() {
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
                $oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});
$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})
            });
      //]]>
</script>

Visualize e se tudo estiver bem, salve. Caso contrário, refaça os passos anteriores ou então talvez o menu não dê muito certo em seu atual modelo.
Você ainda não vai ver o menu. Para vê-lo, vamos ao HTML que o estrutura...

3 - HTML
Agora, no local em que você deseja que o menu apareça, cole isso:
<div class="oe_wrapper">
   <div id="oe_overlay" class="oe_overlay"></div>
   <ul id="oe_menu" class="oe_menu">
    <li><a href=""><img src="http://olhar-43.net/conteudo/avatares/90x90_4/4.gif"><br>About</a>
     <div>
      <ul>
       <li class="oe_heading">About</li>
       Fale um pouco sobre você e seu blog!      </ul>
     </div>
    </li>
    <li><a href=""><img src="http://olhar-43.net/conteudo/avatares/90x90_4/70.gif"><br>Goodies</a>
     <div style="left:-111px;"><!-- -112px -->
      <ul>
       <li class="oe_heading">Tags</li>
       <li><a href="#">Wallpapers</a></li>
       <li><a href="#">Coisinhas</a></li>
       <li><a href="#">Programas</a></li>
       <li><a href="#">Gifs</a></li>
       <li><a href="#">Outros</a></li>
      </ul>
   
           </div>
    </li>
    <li><a href=""><img src="http://olhar-43.net/conteudo/avatares/90x90_4/37.gif"><br>Contato</a>
     <div style="left:-223px;">
      <ul class="oe_full">
       <li class="oe_heading">Deixe seu recadinho!</li>
       COLE O CÓDIGO REDIMENSIONADO DE ACORDO COM A LARGURA E ALTURA QUE DEFINIR NO SEU MENU NA PARTE OCULTA DE UMA C-BOX OU FORMULÁRIO DE CONTATO.
      </ul>
     </div>
    </li>
    <li><a href=""><img src="http://olhar-43.net/conteudo/avatares/90x90_4/47.gif"><br>F.A.Q</a>
     <div style="left:-335px;">
      <ul>
       <li class="oe_heading">Regras:</li>
       <li>Credite quando usar ou repassar algo.</li>
       <li>Não use palavras ofensivas.</li>
       <li><a href="#">Créditos</a></li>
      </ul>
     </div>
    </li>
   
     </div>
    </li>
   </ul>
  </div>

Veja como ficou e vá alterando ao seu gosto. Como você deve ter visto, se pode adicionar links (substitua o "#" por algum link), html de chatbox ou formulários, entre outros e imagens. As que estão aí no código encontrei no Olhar43.net e aqui no Reino Kawaii mesmo. Só tome cuidado quanto a largura e altura das coisas que adicionar, que nesse caso é 400x200 o ideal. Vocês podem adicionar imagens editadas com suas descrições ou mapeadas, que imagino dar certo, já que aceita html. Enfim, há uma infinidade de coisas para adicionar ao seu menu ^-^
Eu espero que gostem e beijinhus.

Créditos: Codrops via GemaBlog  

Related Articles

9 comentários:

  1. Fica muito fofo, mais é muito difícil de colocar precisa mexer muito no html, eu tenho um pouco de receio hehehe bjs
    blogbondmais

    ResponderExcluir
    Respostas
    1. Até que no HTML é mais fácil mexer ^^ Caso queira, pode usar esse modelo mesmo, ou usá-lo como base.
      Beijus...

      Excluir
  2. nyak rô um tutorial muito bom!
    Adorei o novo layout, ficou bem mais leve e mais kawaii ♥

    ResponderExcluir
    Respostas
    1. Que bom que gostou do tutorial e do layout ^^
      Beijinhus e muito obrigada <3

      Excluir
  3. Nossa *w* que kawaii >u< , nyah adorei seu blog, vou usar o menu ~seguindo esse blog kawaii aqui *u*~

    ResponderExcluir
  4. Muito lindo ! coloquei no meu blog ! , Tem pouco tempo que comecei a visitar o blog , Eu adorei !!! é super-cute

    ResponderExcluir
    Respostas
    1. Ninah: Muito obrigada e que bom que gostou!!! Seja sempre bem-vinda!!!
      Débora: Obrigada ^^ Fico muito feliz com sua presença e que tenha gostado daqui!!!
      Beijus e obrigadão a todas!!!

      Excluir
  5. Happy belated B-day

    Eu AMEI o novo desenho!

    muito fofinho! <3

    Beijos~

    ResponderExcluir

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 - Google+ - Deviantart