Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Seguinte pessoal, eu criei um script em php que monta um menu a partir de um XML, esta funcionando certinho.
O problema é que pode ser criado varios sub menus ex: menu->sub1->sub2->sub3->sub4->sub5->...
O que eu estou querendo saber é como eu faco para todos os submenus funcionarem, independente da quantidade de sub-menus.
A estrutura que o PHP gera é esta
<html>
<head>
<title></title>
</head>
<body>
<div id="menu">
<ul><!-- INI MENU -->
<li><a href="#">Home</a></li>
<li><a href="#">Empresa</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Historia</a></li>
<li><a href="#">Objetivo</a></li>
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
<li><a href="#">Produtos</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Pecas</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Quadrada</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Pequena</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Grande</a></li>
<li><a href="#">Extra Grande</a></li>
<li><a href="#">Personalizado</a><!-- INI SUBMENU LB -->
<ul class="subMenu"><!-- INI SUBMENU -->
<li><a href="#">Mais alguns menus</a></li>
<li><a href="#">Esta no fim</a></li>
<li><a href="#">Ufa !! Quantos !!!</a></li>
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
<li><a href="#">Redonda</a></li>
<li><a href="#">Triangular</a></li>
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
</ul><!-- FIM SUBMENU -->
</li><!-- FIM SUBMENU LB -->
<li><a href="#">Endereco</a></li>
<li><a href="#">Contato</a></li>
</ul><!-- FIM MENU -->
</div>
</body>
</html>O CSS é este
<html>
<head>
<style>
#menu{
width:200px;
}padding:0;
margin:0;
float:left;
}background:#d7f4ff;
list-style:none;
display:block;
position:relative;
}#menu ul li a{
display:inline-block;
border:1px solid #000;
width: 195px;
height:25px;
margin-top:-1px;
padding-left:5px;
}#menu ul li a:hover{
background:#3eb1ff;
}#menu ul li:hover ul{
display:block;
}#menu ul li:hover ul ul, #menu ul ul li:hover ul ul{display:none}
#menu ul ul li:hover ul, #menu ul ul ul li:hover ul{display:block;}
.subMenu,.subsubMenu,.subsubsubMenu,.subsubsubsubMenu{
position:absolute;
left:201px;
top:0px;
display:none;
}.subMenu li a{
}
</style>
</head>
<body>
</body>
</html>O que eu percebi foi que para cada sub-menu eu tenho que adicionar um UL nestas duas linhas
<html>
<head>
<style></style>
</head>
<body>
</body>
</html>Tem como fazer funcionar sem ter que adicionar um UL para cada Item ? Ou vou ter que dar a volta com JS ?
flws !!
Meu amigo, infelizmente nao é isso que eu quero, ou eu nao entendi o que voce fez :huh:
É assim, o que eu estou fazendo é um menu dinamico, logo eu nao tenho como saber quantos sub-menus de sub-menus vai ter.
Do jeito que esta o meu css, na parte abaix eu tenho que adicionar um UL em cada linha para que o menu funcione:
#menu ul li:hover ul ul, #menu ul ul li:hover ul ul{display:none}
#menu ul ul li:hover ul, #menu ul ul ul li:hover ul{display:block;}
O que o css acima faz é que quando o mouse estiver sobre um elemento LI ele mostra o UL que esta logo em seguida.
O que eu estou querendo fazer é que o menu funcione corretamente sem eu ter que me preocupar com a quantidade de sub-menus encadeados.
flws !!
Depois de muitas horas de pesquisa encontrei isso, e funcionou perfeitamente
<style>
/* oculta todos os <ul> que tenham <ul>'s como antecessores,
isso vale para submenus de qualquer nível *//* exibe o ul descendente direto do <li> em estado :hover
dessa forma, mantemos os submenus ocultos. Como todos os
submenus estão contidos dentro de elementos <li>, não é
necessário ficar declarando 'li:hover ul li:hover' */resultado = sub-menus infitos
flws
>
Meu amigo, infelizmente nao é isso que eu quero, ou eu nao entendi o que voce fez :huh:
É assim, o que eu estou fazendo é um menu dinamico, logo eu nao tenho como saber quantos sub-menus de sub-menus vai ter.
Do jeito que esta o meu css, na parte abaix eu tenho que adicionar um UL em cada linha para que o menu funcione:
#menu ul li:hover ul ul, #menu ul ul li:hover ul ul{display:none}
#menu ul ul li:hover ul, #menu ul ul ul li:hover ul{display:block;}
O que o css acima faz é que quando o mouse estiver sobre um elemento LI ele mostra o UL que esta logo em seguida.
O que eu estou querendo fazer é que o menu funcione corretamente sem eu ter que me preocupar com a quantidade de sub-menus encadeados.
flws !!
Depois de muitas horas de pesquisa encontrei isso, e funcionou perfeitamente
<style>
/* oculta todos os <ul> que tenham <ul>'s como antecessores,
isso vale para submenus de qualquer nível *//* exibe o ul descendente direto do <li> em estado :hover
dessa forma, mantemos os submenus ocultos. Como todos os
submenus estão contidos dentro de elementos <li>, não é
necessário ficar declarando 'li:hover ul li:hover' */resultado = sub-menus infitos
flws
Normalmente eu defino um estilo diferente só para o primeiro nivel e repito o estilo para os demais, aí é só fazer:
ul li ul {
/ estilos aqui /
}
ul li ul li {
/ estilos aqui /
}
Agora se deseja um estilo diferente pra cada menu, aí não tem outro jeito mesmo...