Menu Drop Down colorful (diversas cores) para blog | Quero Dicas | Tutoriais para seu blogs


Menu Drop Down colorful (diversas cores) para blog


Vamos colocar este lindo Menu Drop down Colorido no seu templates? Este menu estava no meu antigo template e hoje eu irei disponibiliza-lo para você. =D

Ele modifica a cor para cada item que você instalar. Claro, somente na barra principal de navegação, não nas sub-pastas.

Este menu, precisa um pouco de atenção para arrumá-lo, após instalá-lo, para deixá-lo no lugar correto. Vamos começar? Siga-me...


  Instalando o Código

Antes de começarmos, recomendo sempre fazer um backup do seu template. Dessa forma caso dê alguma erro, você terá seu template salvo em sua maquina. Não tem problema, clique e aprenda

Após!

1 - Acesse o painel do seu blog. Vá em "Modelo" e "Editar HTML".

Dica: Para ser mais rápido a procura, 1º clique dentro do HTML depois use CTRL + F e na caixa de pesquisa cole o código.

2 - Procure pelo código:

 ]]></b:skin> 

3 - Acima dele cole o seguinte código:

/* menu Drop Down colorido www.querodicasde.com.br
----------------------------------------------- */
#main-nav {
width: 1020px;  /*---- tamanho do template ----*/ 
background: #000;   /*---- Cor base ----*/ 
margin: 0 auto;
height: 50px;
margin-bottom: 2px;
margin-left: 50px;
border-bottom: 5px solid  #dd2864;  /*---- Cor da borda  ----*/ 
}
#main-nav .menu-alert{
float:center; 
padding:18px 0 0 10px ;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob, .sidelay{ display:none; }
#main-nav ul li {z-index:20;
text-transform: uppercase;
font-family: Oswald,arial,Georgia, serif;
font-size:14px;  /*---- tamanho da fonte ----*/ 
position: relative;
display: inline-block;
float: left;
border:1px solid;
border-width:0 0 0 1px;
height:50px;
}
#main-nav ul li:first-child,
#main-nav ul li:first-child a{border:0 none;}
#main-nav ul li:last-child a{border-right:0 none;}
#main-nav ul li a {
display: inline-block;
height: 50px;
line-height: 50px;
color: #fff;  /*---- Cor do link ----*/ 
padding:0 14px;
text-shadow:0 1px 1px #000; 
border-left:1px solid #383838;
}

#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding:0;
position: absolute;
top: 50px;
width: 180px;
z-index: 99999;
float: left;
background: #2d2d2d !important;
-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}

#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border:0 none;
border-bottom: 1px solid #222; 
border-top: 1px solid #383838;
font-size:11px;
height:auto;
margin:0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border:0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;  /*---- tamanho caixa ----*/ 
display: block !important;
margin-right: 0 !important;
z-index: 99999;
color: #fff !important;
text-shadow:0 1px 1px #000 !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { color: #FFF ;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {color: #DCDCDC !important; padding-left:15px !important;padding-right:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-left:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
background:#9EC22D;  /*---- Cor sub-pastas ----*/ 
text-shadow:0 1px 1px #b43300;
color:#FFF;  /*---- Cor do link ----*/ 
height:50px;
line-height:50px;
border-left:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 0 0 10px;
}
#top-menu-mob{
width: 350px; 
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
left:0;margin-left: 0px;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}
#menu-main a.home{ background-color:  #dd2864 !important;margin-left: -40px;text-indent:-9999px;padding:0;
width:60px;background-image:url(http://3.bp.blogspot.com/-gLyWqvxTm1I/UkxNBw50IQI/AAAAAAAADO8/Qn-VSHK9N1g/s1600/bhome.png);
background-position:center;background-repeat:no-repeat}
.main-menu .menu li.green a:hover { 
background-color: #8FC821 !important;}.main-menu .menu li.green:hover > a { 
background-color: #8FC821 !important;}.main-menu .menu li.yellow a:hover { 
background-color: #F39C12 !important;}.main-menu .menu li.yellow:hover > a { 
background-color: #F39C12 !important;}.main-menu .menu li.red a:hover { 
background-color: #E8373E !important;}.main-menu .menu li.red:hover > a { 
background-color:#1E90FF !important;}.main-menu .menu li.orange a:hover { 
background-color: #FE6600 !important;}.main-menu .menu li.ornage:hover > a { 
background-color: #FE6600 !important;}.main-menu .menu li.green-2 a:hover { 
background-color: #accc46 !important;}.main-menu .menu li.green-2:hover > a { 
background-color: #accc46 !important;}.main-menu .menu li.blue a:hover { 
background-color: #2950A3 !important;}.main-menu .menu li.blue:hover > a { 
background-color: #2950A3 !important;}.main-menu .menu li.green-3 a:hover { 
background-color: #1abc9c !important;}.main-menu .menu li.green-3:hover > a { 
background-color: #1abc9c !important;}.main-menu .menu li.pink a:hover { 
background-color: #D90162 !important;}.main-menu .menu li.pink:hover > a { 
background-color: #DC143C !important;}
.menu li.rose a:hover { 
background-color: #dd2864 !important;}.main-menu .menu li.blue:hover > a { 
background-color: #dd2864 !important;}




4 - Ainda dentro do HTML do seu template procure por:

 </header> 
 


5 - Ao encontrar, abaixo dele cole o seguinte código:

 


   

Termino da instalação. Agora vamos personalizá-lo

  Customização

Agora vamos aprender a personalizá-lo, preste atenção.

► No primeiro código instalado, acima de ]]></b:skin>, eu deixei ao lado de cada código o que você poderá manusear para alterar, conforme o seu template, como:
• Cores
• Tamanho
• Mais pra cima ou mais pra baixo

Vá alterando devagar até chegar ao ajuste. Só cuidado para não tirar sinais, tais como: aspas (" "),  dois pontos ( : ), entre outros, principalmente chaves de fechamento de código ( } )

Nome sublinhado
Após, conseguir acertá-lo, você ver que os nomes do menu base e sub-pastas estão sublinhados e queira tirá-los, faça o seguinte

1 - Procure por:

 a:hover {  

Você achará algo parecido ou igual a este:
a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

2 - Troque a parte "underline" por "none". Exemplo:

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
}

Pronto! Agora vamos pro segundo código instalado.

► No segundo código instalado, abaixo de </header>, é muito mais fácil!

Este é o que é mostrado em seu blog. Você terá que modificar colocando os nomes e direcionado seus links. Exemplo:

<li class='green'><a class='home'ENDEREÇO DO BLOG'>Home</a></li>

Onde está escrito ENDEREÇO DO BLOG ou ENDEREÇO DO LINK, você deve colocar o endereço do link que será direcionado.
Onde está > Home <, será onde você colocará o nome do seu menu.

Você irá fazer o mesmo em todos.
Eu deixei varias sub-pastas, caso queira retirar alguma, é só apagar :
<li><a href='ENDEREÇO DO LINK'> SUB-PASTA 1 </a></li>. O mesmo se estende para acrescentar!
Caso queira, não ter sub-pastas em um determinado local, apague:

de - <ul class='sub-menu'>
<li><a href='ENDEREÇO DO LINK'>SUB-PASTA 1r</a></li>
<li><a href='ENDEREÇO DO LINK'>SUB-PASTA 2</a></li>
até - </ul>

Prontinho! demorou um pouquinho para ajustar o menu? Mas compensa, não é?! Concordo!

Caso tenha alguma dúvida ou elogio, deixe seu comentário! Beijinhos
Me Contrate!

1 comentários:

Clique e deixe seu comentários
terça-feira, 31 março, 2015 ×

Olá!! Muito obrigada por suas dicas, fiz esse menu e ficou mara, mas precisei corrigir essa parte pois ele estava dando erro e o próprio blogger indicou a correção
home'ENDEREÇO DO BLOG
home'>ENDEREÇO DO BLOG... Beijinhos

Armazém Jp fez o primeiro comentário! Comente você também!
Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

1 - Devido a falta de tempo, não prometo responder a todos os comentários. Mais farei o possível.

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.