De forma simplificada lhes entrego esse tutorial, em troca apenas de um like!! =)
NOTA: Este é um menu com 3 menus em drop down.. Ex: Inico | Menu1 com 3 Sub menus | Menu2 com 3 Sub menus | Menu3 com 3 Sub menus | Contato ou o que achar melhor..
Ex: URL <-- destino chave LOCAL<--nome do sub-menu... SUB_URL destino do sub-menu
e na ultima URL você escolhe o nome mais apropriado ao menu(LOCAL)..
Em caso de dúvidas, ou faltando experiência.. aconselho um back up do seu template HTML antes de realizar os códigos à baixo...
Enjoy!!
Abra o ( MODELO / EDITAR HTML ) Procure por: </header> e abaixo desta tag
copie e cole esses parâmetros...
<div id='cssmenu'>
<ul>
<li><a href='URL/'><span>INICIO</span></a></li>
<li class='has-sub'><a href='#'><span>MENU1</span></a>
<ul>
<li><a href='SUB_URL'><span>LOCAL</span></a></li>
<li><a href='SUB_URL'><span>LOCAL</span></a></li>
<li class='last'><a href='SUB_URL'><span>LOCAL</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>MENU2</span></a>
<ul>
<li><a href='SUB_URL'><span>LOCAL</span></a></li>
<li><a href='SUB_URL'><span>LOCAL</span></a></li>
<li class='last'><a href='SUB_URL'><span>LOCAL</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>MENU3</span></a>
<ul>
<li><a href='SUB_URL'><span>parte 1</span></a></li>
<li><a href='SUB_URL'><span>parte 2</span></a></li>
<li class='last'><a href='SUB_URL'><span>Parte 3</span></a></li>
</ul>
</li>
<li class='last'><a href='URL'><span>LOCAL</span></a></li>
</ul>
</div>
Primeira faze ok..
Agora salve e feche o menu HTML e ainda em MODELO, abra o PERSONALIZAR / AVANÇADO / ADICIONAR CSS Agora em: CSS copie e cole o Parâmetro á baixo...
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
#cssmenu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
float: left;
padding: 0px;
}
#cssmenu li a {
background: #333333 url('seperator.png') bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #c734c7;
}
#cssmenu ul ul a {
color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #8205e8 url('hover.png') bottom center no-repeat;
color: #0571f5;
text-decoration: none;
}
#cssmenu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('sub_sep.png') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #8205e8 url('hover_sub.png') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
Pronto! Agora você tem um Super menu, é só desfrutar desta dica e agradecer com um like pro facebook e +1 pro google.. VALEU galera, e até os próximos tutoriais..
NOSSO próximo tutorial será em After Effects ATÉ LÁ...
