Menu multi level com CSS3

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Hoje eu estou compartilhando outro grande exemplo de CSS3, no tutorial de hoje quero compartilhar um menu multi-level que funciona com CSS3 puro sem qualquer imagem incluída no menu. Como funciona com CSS3 puro, ele não afeta a velocidade de carregamento do seu blog, em comparação com menus jQuery e outros menus que funcionam com script.

menu multi level

Anteriormente, eu compartilhei um menu horizontal com CSS3, mas um dos meus fiéis leitores me pediu para criar uma menu multi-level que funciona com CSS3 puro, é por isso que eu estou compartilhando este menu hoje.

Veja: Menu horizontal com submenu e caixa de busca

–      Puro CSS3 menu para blogger

Este menu foi desenvolvido por Rethnaraj Rambabu do bloggermint eu fiz alguns ajustes CSS para funcionar bem com o blogger. Agora vamos ao menu multi-level e aprender como instalá-lo no blogger. Veja o demo primeiro do menu clicando no botão verde abaixo.

 

Demo

 

Como colocar o menu multi level no blogger?

Este menu pode ser facilmente instalado em qualquer blog do Blogger em 2 etapas. Na primeira etapa vamos implementar a parte de CSS do menu no modelo e na última segunda parte vamos adicionar a parte do HTML do menu multi level como um widget HTML / JavaScript.

1. Acesso o Painel do Blogger e navegue até Modelo > Editar HTML

(Veja: Como acessar o código XML/HTML na nova interface do blogger)

2. Encontre o seguinte ]]> (use CTRL + F para encontrar o código)

3. Copie e cole o seguinte código antes de ]]>

/* Drop Down Menu By dicasblogger.org */
#nav {
float: left;
font: bold 12px Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
border-top: 1px solid #2b2e30;
overflow: hidden;
width: 100%;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}
 
#nav ul {
margin: 0;
padding: 0;
list-style: none;
}
 
#nav ul li {
float: left;
}
 
#nav ul li a {
float: left;
color: #d4d4d4;
padding: 10px 20px;
text-decoration: none;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* Drop Down Menu By helperblogger.com */
#nav ul li a:hover,
#nav ul li:hover > a {
color: #252525;
background: #3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
 
#nav li ul a:hover,
#nav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* Drop Down Menu By helperblogger.com */
#nav li ul {
background: #3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
 
#nav li:hover ul {
left: auto;
}
 
#nav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
 
.nav ul li ul {
    position: absolute;
    left: 0;
    display: none;
    visibility: hidden;
}
 
.nav ul li ul li {
    display: list-item;
    float: none;
}
 
.nav ul li ul li ul {
    top: 0;
}
 
.nav ul li ul li a {
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
}
 
#nav li li ul {
margin: -1px 0 0 160px;
visibility: hidden;
}
 
#nav li li:hover ul {
visibility: visible;
}
/* Drop Down Menu By dicasblogger.org */

 

 

Salve o seu template.

Agora que implementamos o estilo do menu, vamos para a parte do HTML.

1. Acesse o painel do seu blog
2. Clique na guia “Layout
3. Clique em ‘Adicionar um gadget’ → Escolha tipo’HTML/Javascript’ e cole o seguinte código:

Altere os links e textos como você deseja e salve o seu menu.

Qualquer duvida não hesite em perguntar.

Elegante menu css3 lateral vertical para blog

Até a próxima!

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

3 Comentários

  1. Oi, coloquei um menu deste no meu blog, mas quando eu clico em qualquer ‘tema’ (por exemplo: design> interiores) nao aparece postagens referentes. coloquei um gadget de marcadores e nas postagens coloquei a tag ‘interiores’ pra ver se era isso o problema, mas nada, na verdade eu queria que nao aparecessem tags também, me ajude, por favor???

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.