Menu vertical com efeito deslizante

em 5 de agosto de 2015

Aqui no blog há uma coleção bem interessante de menus, dos mais variados estilos.
Confira:
Menus de navegação para blogs

Hoje vou mostrar como ter em seu blog este menu:

Demonstração do tutorial

Não é legal?
Ele desliza para mostrar o conteúdo das sub-abas, e o melhor: sem uso de Jquery, apenas efeitos de CSS.
Isso significa, explicando de modo bem primário, que o menu é mais leve e não pesa tanto no carregamento de seu blog.
E não depende de arquivos externos para funcionar!
Vamos aprender?

Instalando o menu no blog


Antes de mais nada leia as orientações abaixo.Atentamente.

1- O menu funciona perfeitamente no Chrome, Firefox e Safari. No Internet Explorer ele funciona mas não tem o efeito deslizante suave.
O lugar ideal para coloca-lo é na sidebar, mas pode ser inserido em qualquer parte do blog, até em páginas estáticas ou postagens.
Faça testes. Se não gostar basta excluir.

2- Deixei marcado em capslock no código os lugares onde você vai mudar o nome NOME DA ABA e SUB ABA.
Onde tem a # você apaga e coloca o endereço para onde o menu direciona.
Veja o meu exemplo:

<nav>
<div class="menu-item alpha">
<h4><a href="http://www.elainegaspareto.com/">Início</a></h4>
<p>Dicas, tutoriais, receitas, livros...e muito mais!</p>
</div>

<div class="menu-item">
<h4>Leia no blog</h4>
<ul>
<li><a href="http://www.elainegaspareto.com/search/label/Dicas%20para%20blogs">Dicas para blogs</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/Receitas">Receitas</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/cr%C3%B4nicas">Crônicas</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/Colunistas">Textos das colunistas</a></li>
</ul>
</div>

<div class="menu-item">
<h4>Encontre seu tutorial</h4>
<ul>
<li><a href="http://www.elainegaspareto.com/search/label/Menus">Menus</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/Coment%C3%A1rios">Comentários</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/Monetiza%C3%A7%C3%A3o">Monetização</a></li>
<li><a href="http://www.elainegaspareto.com/search/label/Otimiza%C3%A7%C3%A3o">Otimização</a></li>
</ul>
</div>

<div class="menu-item">
<h4>Conheça também</h4>
<ul>
<li><a href="http://portfolio.elainegaspareto.com/">Meu portfólio</a></li>
<li><a href="http://loja.elainegaspareto.com/">Minha loja virtual</a></li>  
</ul>
</div>

<div class="menu-item">
<h4>Eu, por aí</h4>
<ul>
<li><a href="http://twitter.com/elainegaspareto">Twitter</a></li>
<li><a href="https://www.facebook.com/ElaineGaspareto">Facebook</a></li>
<li><a href="https://plus.google.com/+ElaineGasparetoParada/">Google +</a></li>
<li><a href="http://instagram.com/elainegasparetoparada">Instagram</a></li>
</ul>
</div>

<div class="menu-item">
<h4>Formas de contato</h4>
<ul>
<li><a href="http://www.elainegaspareto.com/p/contato_27.html">Fale comigo</a></li>      
</ul>
</div>
</nav>

Então, é exatamente assim que você precisa fazer:
Onde está a # coloque o endereço para onde deseja levar o leitor (pode ser página, marcador, outro blog, etc...);
Onde marquei em capslock é o lugar para colocar o nome que vai aparecer.
Leia e releia até se certificar de haver entendido, ok?

3- Deixei marcado no código os campos editáveis, ou seja: cores, fontes, tamanho de fonte, etc.
Altere para combinar com seu blog, tendo cuidado para não mexer onde não esteja definido.
Cores você altera mudando o código hexadecimal delas.
Aqui tem uma tabela de cores com seus códigos hexadecimais.
As fontes prefira fontes comuns, tipo arial, verdana, trebuchet, etc...
Assim o menu será visto do mesmo modo por todos os leitores.

4- Sim, é trabalhoso editar a aparência, e só será possível se você fizer com calma, atenção e paciência.
Leia o código. Sei que parece uma sopa de letras mas não é, tudo ali faz sentido e tem um motivo para estar ali.
Estude até entender.


Leu tudo? Entendeu tudo?
Então mãos à obra!
Comece copiando este código:

Copiar o código

Agora vá ao seu blog, no painel administrativo dele, e clique em Design (ou Esquema, se você estiver em Portugal).
A seguir escolha a opção Adicionar um gadget. Selecione HTML/JAVASCRIPT.
Na caixinha que expandir cole o código copiado.
Edite-o conforme expliquei acima; insira seus links, altere cores se desejar, deixe como desejar.
Salve.
Arraste para onde deseja que fique e salve as alterações do layout.
Se você fez tudo certinho, está pronto, lindo e funcional!

Uma dica extra:

Sempre que nos deparamos com um tutorial grande e cheio de códigos ficamos receosos e intimidados.
Não fique!
É muito simples, edição simples de aparência e inserção de links.
Acredite, você pode fazer!
Então, bora lá?
Faz e me diz... a sensação de tentar e conseguir é maravilhosa!!!




Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

11 comentários , comente também!

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Oii, amei esse menu, parabéns, mas preciso de ajuda, instalei tudo direitinho, mas não consigo mudar o fundo vermelho, mesmo alterando no código, na página não entra. Consegui alterar o fundo interno, a cor da fonte, o tamanho da fonte, mas o fundo vermelho não sai, rsrs...me ajudaaa

    ResponderExcluir
  3. Boa tarde. Não encontrei nenhum lugar dizendo se é necessário creditar, caso utilize algum código seu.
    Acabei de colocar no meu blog esse menu, mas não sei se você pede que nós creditemos. Mas vou criar um local no blog só para inserir créditos, ai coloco o link do seu site, tudo bem?
    Agradeço por disponibilizar esses códigos e, principalmente, esse menu, que eu adorei :)

    ResponderExcluir
  4. Bom dia Elaine, como faço pra aumentar o número de sub-abas, já tentei aumentando o número de links mas visualiza apenas 3 sub-abas.

    ResponderExcluir
    Respostas
    1. Oi eu tambem quero saber sobre isso, pois o meu so visualiza 4 sub-abas

      Excluir
  5. Como faço para colocar mais de 7 abas???

    ResponderExcluir
  6. Muito bom! como eu faço para deixa-lo transparente ?

    ResponderExcluir
  7. Oi Elaine, como consegue no blog de testes ter tipos diferentes de menu? Queria fazer isso para aprender. Já tenho um no topo que queria colocar subabas, ai vou ter que excluir?

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…