Menu Deslizante Fofo Acima do Cabeçalho

Olá, bem-vindos sempre! E como anda a Páscoa? Ganharam muitos ovos de chocolate? Se ainda não ganharam, não fiquem triste porque eu tenho certeza (e desejo muito) que vão ganhar, mesmo que não seja chocolate, mas coisas doces para sua vida sempre acontecem!
Eu não posso reclamar porque ganhei até ninho de chocolate rsrsrs...sério, minha mãe me deu um ninho de chocolate; é a metade de um ovo todo decorado com um montão de bombons em forma de ovinhos, com uma falsa palha coloridinha, lindo, trufado, que comi quase com a embalagem rsrsrs...por isso não tirei foto ¬¬ Adoro as criações da amiga da mamãe, dona de uma padaria em que encontro os melhores cupcakes, bolos, docinhos e coisinhas gostosas :3
Mas, vamos a postagem, que é um tutorial (aproveitando o feriadão neh).
Vou mostrar para vocês como fazer um menu super fofo, igual àquele que está no layout do template que disponibilizei (veja aqui como fica). Ele é muito bom porque fica escondido acima do cabeçalho (1ª imagem), permite uma economia de espaço no blog já que tem 3 colunas, aceita HTML e suas imagens e palavras podem ser modificadas ao gosto de cada um. Aprendi a fazer no Ciudad Blogger. (Clique nas imagens para ampliar)
Menu Aberto
Vamos lá! Acesse a área de edição de HTML do seu template e...
1. A primeira coisa a ser feita é adicionar este código abaixo de <head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

// Expand Panel
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
});

// Collapse Panel
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
});

// Switch buttons from &quot;Abrir menu&quot; to &quot;Fechar menu&quot; on click
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
});

});</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #toppanel {display:none !important;}
</style>
</b:if>

2. Agora, acima de ]]></b:skin>, vamos adicionar o código que personaliza o menu, de modo que fique bem fofinho. Notem que eu já deixei tudo prontinho, com gifs e cores pré-definidas, como no template que disponibilizei; caso queira alterar fique a vontade, basta substituir imagens, definir novos tamanhos para novas imagens, escolher outros códigos de cores...:
/* Top Sliding Menu
----------------------------------------------- */

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
.clearfix {height: 1%;}
.clearfix {display: block;}

.tab {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQefgxR7XqFtYf1ZKEX5RuOsNvuCNjzq_ZO9Dpj2hr4s5UAntpoacwrfViBu9fvSvL-Cl0DGZQ3aHJrfWC1fAEMmOMyUR0PtfkiHZp0Iuz2abO2Xjj-YuoknXGQUAaDaHjo4fdocTp79io/s226/dv%252520%25252810%252529.gif) repeat-x 0 0;
height: 42px;
position: relative;
top: 0;
z-index: 999;
}
.tab ul.login {
display: block;
position: relative;
float: right;
clear: right;
height: 42px;
width: auto;
font-weight: bold;
line-height: 42px;
margin: 0;
right: 150px;
color: #db7093;
font-size: 16px;
text-align: center;
}
.tab ul.login li.left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQefgxR7XqFtYf1ZKEX5RuOsNvuCNjzq_ZO9Dpj2hr4s5UAntpoacwrfViBu9fvSvL-Cl0DGZQ3aHJrfWC1fAEMmOMyUR0PtfkiHZp0Iuz2abO2Xjj-YuoknXGQUAaDaHjo4fdocTp79io/s226/dv%252520%25252810%252529.gif) no-repeat left 0;
height: 42px;
width: 30px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li.right {
background: url(http://i1121.photobucket.com/albums/l505/saycute/Gifs/New%20Gifs/6z2H.gif) no-repeat left 0;
height: 201px;
width: 80px;
padding: 0;
margin: 0;
display: block;
float: left;
}
.tab ul.login li {
text-align: left;
padding: 0 6px;
display: block;
float: left;
height: 42px;
background: url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHBkoJgR1dnJkQR7nR-O2nDROHV2wEdvnlTZnCEjAviJ2Lyjo3rE46gldJrsNLiok8NZ-D9BZfCTVPMrJDZzbDuGqAwg86TRkcPxzZVEyLaDQbH7AZO6mqRy3-tjmWO93LliZ2yTWh/s1600/sparklelink.gif) repeat-x 0 0;
}

.tab ul.login li a {color: #db7093;}
.tab ul.login li a:hover {color: #ff1493;}
.tab .sep {color:#414141}

.tab a.open, .tab a.close {
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
cursor: pointer;
display: block;
width: 100px;
position: relative;
top: 11px;
}

.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUorrIieWqnmMvPCK_2zU_jO-PaXzqi0QFqgOdnCfq6clQQN-TRbhYXIteJzmTY2wKtVsqLM16Q_5JiCFIPf6c9bM4t3WS5Lq_gwEnKE9BRo007kgL0tGYaAKF4wIed4fy2nRt_IQUwts/s128/1659.gif) no-repeat left 0;}
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOxTtTQhb9rkXTzxujQZRGQ9SmV2PVflw3fLg5vcvHzrhPEsOjR5mFnwwOXNRcgc8ccZ521DoX8_Z48wyF_LkvaNM8mailMs6wBvHqWOAsVH_lJ0V91PkILntE0HUKCE-1Tx_YWJnbEQ/s1600/87238.gif) no-repeat left 0;}
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCoo_dOaJNbzEE_FPedd1aXcHzwaoO7CdFrIrfPrY7VhpiWcD320ts7aBVt88-d8yliBoJaX6hfAoCQpo5JEv8uvyQnxJ_BlwpQrzDKOyETKiuKvMs5Va6dULpRlc8vqzawdEeVaRx5CO2/s1600/bt_open.png) no-repeat left -19px;}
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJ8sjN_hMDreVDwjlb406tyRDbMwz8I6AX1wHDdUyK0GG6xxSrbuqN0ZkebNDMb72DrtA_A5z4J9PqSoTT2mGafNkNBjRkSnZuK3Hp3NJXqREVmp0Tzsf84OAo6_2CrnKnOuqwRpyNY68/s1600/bt_close.png) no-repeat left -19px;}

#toppanel {
position: absolute;
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#panel {
width: 100%;
height: 406px; /* Alto del slide */
color: #c71585;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgReM5fRlxdyupCt55E-ueicQUGkY2ad4hgsRuTBC2qLhG4_z-BCAtkmCXCp0brbAw5FRr_J5s-hTKy8ig7Njlpp3UPTOJYkDC5NbFeAU2Qn9DUGXxuJPJrPvQmup31hKe8fWQ51WxzAZb/s640/222.png);
overflow: hidden;
position: relative;
z-index: 3;
display: none;
}
#panel h4 {
font-size: 1.6em;
padding: 5px 0 10px;
margin: 0;
color: #ff1493;
text-align: center;
}
#panel p {
margin: 5px 0;
padding: 0;
}
#panel a {
text-decoration: none;
color: #15ADFF;
}
#panel a:hover {
color: white;
}
#panel .content {
width: 960px;
margin: 0 auto;
padding-top: 15px;
text-align: left;
font-size: 0.85em;
}
#panel .content .left {
width: 280px;
float: left;
padding: 0 15px;
border-left: 1px dotted #ffffff;
}
#panel .content .right {
border-right: 1px dotted #ffffff;
}
#panel .content form {
margin: 0 0 10px 0;
}
#panel .content label {
float: left;
padding-top: 8px;
clear: both;
width: 280px;
display: block;
}

#slide-menu {
width: 160px;
float: left;
}
#slide-menu2 {
width: 160px;
float: right;
}
#slide-menu ul, #slide-menu2 ul{
font-family: Arial, Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
}
#slide-menu ul li a, #slide-menu2 ul li a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRslGQd0xamdoEhvnnvdFjhHbLk9VhzpLI418UtTAeQmqF3FjjEph-gHhCExXF19j5DT2wHJILy3Cz1ih0H1z-OsAQN3aa4e_8eZCKe4L7N6Dq1Reh4UZorBiON13sEhNULTxG9HOf/s1600/bullet07.gif) center left no-repeat;
margin:0;
padding:3px 3px 3px 18px;
}
#slide-menu li, #slide-menu2 li {display: inline;}
#slide-menu a, #slide-menu2 a{
color: #FFFFFF;
text-decoration: none;
font-size: 13px;
display: block;
padding: 3px;
width: 160px;
}
#slide-menu a:link, #slide-menu a:visited, #slide-menu2 a:link, #slide-menu2 a:visited {
color: #c71585;
text-decoration: none;
}
#slide-menu a:hover, #slide-menu2 a:hover {
color: #FFFFFF;
}
3. Para finalizar, vamos adicionar a parte escrita, conteúdo do nosso menu. Essa parte será adicionada depois de <body> ou <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>:
<!-- Inicio top sliding menu -->
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>

<!-- Primeira secao -->
<div class='left' style='width:240px !important'>

<h4>Olá! Seja bem-vindo ao meu blog!</h4>
<p>Aqui você dá as boas vindas aos seus leitores, fala sobre você e seu blog, contato:</p>

<div align='center'>
E aqui você deixa os links de suas redes sociais, com ícones de sua preferência:
 <a href='link'><img src='URL DO ÍCONE' style='padding:25px 5px;' width='100'/></a>
<a href='link2'><img src='URL DO ÍCONE' style='padding:25px 5px;' width='100'/></a>
</div>

</div>

<!-- Segunda secao -->
<div class='left' style='width:320px !important'>
<h4>Categorias</h4>

<div id='slide-menu'>
<ul>
<li><a href='http://kawaiilays.blogspot.com.br/link1'>Categoria 1</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link2'>Categoria 2</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link3'>Categoria 3</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link4'>Categoria 4</a></li>
</ul>
</div>

<div id='slide-menu2'>
<ul>
<li><a href='http://kawaiilays.blogspot.com.br/link5'>Categoria 5</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link6'>Categoria 6</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link7'>Categoria 7</a></li>
<li><a href='http://kawaiilays.blogspot.com.br/link8'>Categoria 8</a></li>
</ul>
</div>
</div>


<!-- Terceira secao -->
<div class='left right'>

<h4>Menu</h4>
<p>Faça um tour pelo blog ;3</p>

<div align='center'>
<div id='nav'><a href='LINK 1' title='Título'>Título 1</a> &#8211; Texto Opcional</div>
<div id='nav2'><a href='LINK 2' title='Título'>Título 2</a> &#8211; Texto Opcional</div>
<div id='nav3'><a href='LINK 3' title='Título'>Título 3</a> &#8211; Texto Opcional</div>
<div id='nav4'><a href='LINK 4' title='Título'>Título 4</a> &#8211; Texto Opcional</div>
<div id='nav5'><a href='LINK 5' title='Título'>Título 5</a> &#8211; Texto Opcional</div>
<div id='nav6'><a href='LINK 6' title='Título'>Título 6</a> &#8211; Texto Opcional</div>
</div>

</div>
</div>
</div>


<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>WELCOME!</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>Abrir Menu</a>
<a class='close' href='#' id='close' style='display: none;'>Fechar Menu</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
<!-- Fim top sliding menu -->

Altere ao seu gosto; você pode substituir o que há em cada seção. Na terceira seção há o código do menu colorido e para que ele funcione você tem que ter adicionado ele ao HTML do seu, como mostrei neste post aqui.
É isso. Beijinhus<3






Postar um comentário

22 Comentários

  1. Ro muuuuito obrigada...
    amei . bjsss

    ResponderExcluir
    Respostas
    1. De nada Pri :D
      Fico super feliz que tenha gostado!!
      Beijus<3

      Excluir
  2. Oi amiga, tudo bem? saudades :3 bom, tenho o meu novo blog é http://adriellekawaii.blogspot.com.br/
    segue lá? xoxo^^

    ResponderExcluir
    Respostas
    1. Ok Adri ^^
      Assim que puder passo lá tah bom;
      Boa sorte com o blog!!!
      Beijus<3

      Excluir
  3. Eu amei!!! eu vou intentarlo en meu blog :D

    você não tem mais layouts kawaii? para baixar

    Kisses~

    ResponderExcluir
    Respostas
    1. Oi Mary.
      Futuramente, farei mais layouts free e disponibilizarei aqui ok?
      Beijus<3

      Excluir
  4. Feliz Páscoa para você e toda sua família. E que esse dia lhe traga felicidades e muitos sorrisos.

    http://dayannediary.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada Dayanne!
      Uma Páscoa muito feliz e especial para você e todos aqueles a quem vc ama e que te amam!
      Beijus<3

      Excluir
  5. Oi linda, tudo bem? bom, eu mudei meu blog agora ele é
    adriellekawaii.blogspot.com
    espero que siga, bjs e vc é d+ te adoro^^

    ResponderExcluir
  6. Ah Roberta, eu fiz o mesmo comentário, pois ele fica dando erro desculpa, bjs^^

    ResponderExcluir
  7. amore,ensina a como fazer esse link brilhante que tem nesse template? POR FAVOR eu me apaixonei!

    ResponderExcluir
    Respostas
    1. Que bom que gostou Beatriz ^^
      O efeito nos links é daquele tutorial que já postei aqui dos links com brilho: http://reinokawaii.blogspot.com/2011/08/tutorial-links-com-brilho.html
      Você pode substituir a imagem dos brilhinhos por qualquer uma! Aí seus links ficam com backgrounds :3
      Beijus

      Excluir
  8. Eu gostei, mas o meu deu errado

    ResponderExcluir
  9. Juju, que estranho; esse tutorial quase não dá erro; já usei ele aqui no blog e no template kawaii free que disponibilizo, que está funcionando.
    Você fez backup do seu template? Se fez, basta restaurar, ou então retire os códigos e/ou tente novamente.
    Caso não dê certo não se preocupe; posteriormente vou postar mais tutoriais para menu ok?
    Beijus<3

    ResponderExcluir
  10. como mudar a cor do wellcome e abrir menu?

    ResponderExcluir
  11. :v:Rockii:Dá uma olhadinha no segundo código, nesse trecho:
    -----------------------------------------------
    .tab ul.login {
    display: block;
    position: relative;
    float: right;
    clear: right;
    height: 42px;
    width: auto;
    font-weight: bold;
    line-height: 42px;
    margin: 0;
    right: 150px;
    color: #db7093;
    ---------------------------------------------
    E nesse trecho:
    ---------------------------------------------
    .tab ul.login li a {color: #db7093;}
    .tab ul.login li a:hover {color: #ff1493;}
    .tab .sep {color:#414141}
    ----------------------------------------------

    Onde está escrito color:#código da cor; basta substituir pelos códigos das cores que preferir.
    Espero ter ajudado vc ^^
    Bjus

    ResponderExcluir
  12. Não?! Fiz esse tutorial tantas vezes e não deu problemas; tem até um template free que disponibilizei e que tem esse menu funcionando...me diz o que deu errado Ana para eu poder ajudá-la.
    Beijinhus<3

    ResponderExcluir
  13. É muito lindo mas eu tenho uma dúvida :
    Como colocamos um background nele como você colocou no template free kawaii ??

    ResponderExcluir
    Respostas
    1. O background já está incluído; esse é o menu daquele template ^^

      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