MODELO / EDITAR HTML </header> copie e cole em baixo da tag </header>
<div id='cssmenu'>
<ul>
<li><a href='URL HOME'><span>NOME HOME</span></a></li>
<li class='has-sub'><a href=' LINK MENU'><span>NOME PRIMEIRO MENU</span></a>
<ul>
<li><a href='PRIMEIRO LINK SUB-MENU'><span>PRIMEIRO SUB-MENU</span></a></li>
<li><a href='#'><span>SEGUNDO SUB-MENU</span></a></li>
<li class='last'><a href='TERCEIRO LINK SUB-MENU'><span>TERCEIRO SUB-MENU</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='LINK SEGUNDO MENU'><span>SEGUNDO MENU</span></a>
<ul>
<li><a href='PRIMEIRO LINK SEGUNDO SUB-MENU'><span>NOME PRIMEIRO SEGUNDO SUB-MENU</span></a></li>
<li class='last'><a href='LINK SEGUNDO SEGUNDO SUB-MENU'><span>NOME SEGUNDO SEGUNDO SUB-MENU</span></a></li>
</ul>
</li>
<li class='last'><a href='LINK CONTATO'><span>CONTATO</span></a></li>
</ul>
</div>
Salve e feche o HTML editor e PERSONALIZAR / AVANÇADO / ADICIONAR CSS.. Em CSS copie e cole os parâmetros a seguir...
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
@charset 'UTF-8';
/* Base Styles */
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 250px;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #bd0e36;
color: #ffffff;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
}
#cssmenu > ul > li > a > span {
background: #ed1144;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #bd0e36;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/* Sub menu */
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #ed1144;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
}
#cssmenu ul ul li.odd {
background: #f4f4f4;
}
#cssmenu ul ul li.even {
background: #fff;
}
Pronto, agora você tem um super menu em jquery, quer os parâmetros em jquery? Então lá vai..
Copie e cole a baixo de <b:else/> o parâmetro á seguir..
$(document).ready(function(){
$('#cssmenu > ul > li ul').each(function(index, e){
var count = $(e).find('li').length;
var content = '<span class="cnt">' + count + '</span>';
$(e).closest('li').children('a').append(content);
});
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if($(this).closest('li').find('ul').children().length == 0) {
return true;
} else {
return false;
}
});
});
Obrigado pela atenção; se foi útil o tutorial, de um like para o facebook e +1 pro Google...
Até o próximo tutorial...
