Permitr menu infinito

[brunocorream 0]

Salve salve!

Galera, a alguns dias eu venho perdendo o sono em como resolver isso...

Eu tenho um menu (vertical) que funciona como acordion, este por sua vez, precisa abrir os "filhos" ilimitadamente, visto que será um menu para uma loja.

Da seguinte forma:

 

-CATEGORIA PAI

- CATEGORIA FILHO

- CATEGORIA FILHO

- CATEGORIA PAI

- CATEGORIA PAI

- CATEGORIA FILHO

- CATEGORIA FILHO

-CATEGORIA PAI

- CATEGORIA FILHO

- CATEGORIA FILHO

E para o auto e avante...

 

Porém, não estou conseguindo tal proeza... (Visto que não sei escrever em JS)...

Assim, caso possam, poderiam me dar uma ajuda nesta situação?

Desde já fico imensamente agradecido.

 

Este é meu código JS (retirado da NET):

 

// Evento de clique do elemento: ul#menu li.parent > a

$('ul#menu li.parent > a').click(function() {

// Expande ou retrai o elemento ul.sub-menu dentro do elemento pai (ul#menu li.parent)

$('ul.sub-menu', $(this).parent()).slideToggle('fast', function() {

// Depois de expandir ou retrair, troca a classe 'aberto' do <a> clicado

$(this).parent().toggleClass('aberto');

});

return false;

});

 

==========================================================================

 

Este é o PHP:

 

public static function getHtmlMenu($menu){
$return = '';
foreach($menu as $m){
$class = ($m['NIVEL'] == '0') ? 'parent' : '';
$return .= '<li class="'.$class.'"><a href="'.SITEURL.'produtos/'.$m['ID'].'/'.$m['ALIAS'].'" title="'.$m['TITULO'].'">'.$m['TITULO'].'</a>'.PHP_EOL;
if(sizeof($m['SUB']) > 0){
$return .= '<ul class="sub-menu">'.PHP_EOL;
$return .= self::getHtmlMenu($m['SUB']);
$return .= '</ul>'.PHP_EOL;
}
$return .= '</li>'.PHP_EOL;
}
return $return;
}

 

==========================================================================

 

Este é o CSS:

 

.parent > a {

background: url("../images/menul.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);

color: #052754;

display: block;

font-size: 10.3px;

font-weight: bold;

height: 21px;

padding: 5px 5px 0;

text-transform: uppercase;

}

ul ul {

display: none;

}

.sub-menu > li {

background: none repeat scroll 0 0 #FFFFFF;

height: 21px;

overflow: hidden;

padding: 1px 0;

width: 243px !important;

}

.sub-menu a {

background: none repeat scroll 0 0 #FFFFFF;

border: 1px solid #CCCCCC;

color: #052754;

display: block;

font-size: 12px;

padding: 3px 0 3px 10px;

text-transform: uppercase;

}

Abraços a todos!

Martins

 

 

[Lucas Guima 164]

Você vai precisar de recursão.

[brunocorream 0]

Perdão Lucas,

Há possibilidade de informar como fazer tal situação ou uma resolução, visto que não entendo de JS?

 

Grato!

[Lucas Guima 164]

De recursão você entende?

[brunocorream 0]

Não, o que torna a situação mais complicada...
No momento somente HTML, CSS e PHP (medianamente) :(

[Lucas Guima 164]

Dá uma olhada: https://www.google.com.br/search?q=infinite+menu+js

[brunocorream 0]

Eu já revirei o google do avesso!
Nada se encaixou ao que eu precisava. Assim eu cheguei a duas alternativas: Forum ou aprender JS em "1dia".

Mas valeu pela ajuda!