Create infinite menu with PHP+CSS+JS

Question

I have a menu (vertical) that works as acordion, this in turn, need to open the "children" limitlessly (my problem to be solved, and can not), since it will be a menu for a store.

As follows:

-PARENT CATEGORY

- CATEGORIA FILHO

- CATEGORIA FILHO

   - CATEGORIA PAI

   - CATEGORIA PAI

      - CATEGORIA FILHO

      - CATEGORIA FILHO

         -CATEGORIA PAI

           - CATEGORIA FILHO

           - CATEGORIA FILHO

And to the auto and onward...

However, I’m not accomplishing such a feat...

So if you could, you could give me a hand in this situation?

Already I am immensely grateful.

This is my JS code (taken from the 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;
  });

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;
    }

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;
}

I really forgot to report my problem. What happens is that this menu only goes down to the 2nd level, and I would like it to be "infinite". That is, if there are sub-menus it still works the JS and CSS.

As for the order of the list, it is right... Running inside PHP is the following:

 <ul><li><!--repete o <ul> anterior caso tenha novos "subs"--></li></ul>

Answer 1

The problem is in Javascript. You need to run the same function for all navigation elements, not just for the parent and their direct descendants.

// Evento de clique do elemento: ul#menu li > a (todos os itens do menu)
$('ul#menu li > a').click(function() {
  // Expande ou retrai o <ul.submenu> irmão do <a> clicado
  $(this).siblings('.sub-menu').slideToggle('fast', function() {
    // Depois de expandir ou retrair, troca a classe 'aberto' do <a> clicado       
    $(this).siblings('a').toggleClass('aberto');
  });
  return false;
});

PS.: Your fiddle’s code is swapping out ul’s for li’s.

Answer 2

The problem is with your CSS and Jquery.

If you remove the property ul ul {display: none;} displays the submenu.

Answer 3

How to make an infinite menu simple:

class MenuInfinito
{

    public  function imprimeMenuInfinito( array $menuTotal , $idPai = 0, $nivel = 0 )
    {
      $menu = "";
        // abrimos a ul do menu principal
        $menu.= str_repeat( "\t" , $nivel ),'<ul class="dropdown">',PHP_EOL;
        // itera o array de acordo com o idPai passado como parâmetro na função
        if (count($menuTotal[$idPai])) {
           foreach( $menuTotal[$idPai] as $idMenu => $menuItem) {
            // imprime o item do menu
            $menu.= str_repeat( "\t" , $nivel + 1 ),'<li '.$menuItem['classe'].'><a href="',$menuItem['link'],'">',$menuItem['name'],'</a>',PHP_EOL;
            // se o menu desta iteração tiver submenus, chama novamente a função
            if( isset( $menuTotal[$idMenu] ) ) $this->imprimeMenuInfinito( $menuTotal , $idMenu , $nivel + 2);
            // fecha o li do item do menu
            $menu.= str_repeat( "\t" , $nivel + 1 ),'</li>',PHP_EOL;
           }
        }
        // fecha o ul do menu principal
        $menu.= str_repeat( "\t" , $nivel ),'</ul>',PHP_EOL;
    } 
     return $menu;
}

EXAMPLE TABLE:

CREATE TABLE `tab_categorias` (
  `id_categoria` int(11) NOT NULL AUTO_INCREMENT,
  `id_pai` int(11) NOT NULL DEFAULT '0',
  `categoria` varchar(255) DEFAULT NULL,
  `slug` varchar(50) DEFAULT NULL,
  `permissao` tinyint(3) NOT NULL DEFAULT '1' COMMENT '1 - ativo, 0 - inativo',
  `ordem` int(11) NOT NULL DEFAULT '1',
  `url` varchar(255) DEFAULT NULL,
  `classe` varchar(255) DEFAULT NULL,
  `menu` tinyint(3) NOT NULL DEFAULT '0' COMMENT '0 - nenhum, 1 - topo, 2 - rodape, 3 - topo e rodape',
  PRIMARY KEY (`id_categoria`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=latin1 COMMENT='tabela de categorias';

SQL for example:

$sql = "SELECT cat.*,
               cat.categoria AS menuNome,
               cat.id_categoria AS menuId,
               cat.id_pai AS menuIdPai 
        FROM   tab_categorias cat 
        WHERE  cat.permissao=1 
        AND    (cat.menu=1 or cat.menu=3) 
        ORDER BY cat.id_pai ASC, 
                 cat.ordem ASC,
                 cat.categoria ASC, 
                 cat.id_categoria DESC,
                 cat.slug ASC";

Sample list:

$menuItens = array();
while($row = $conn->query($sql)) {
    $id_cat = $row['menuId'];
      if ($row['slug']!='') {
         $url_link=$row['slug'];
      } else {
         $url_link =$row['url'] 
      }
     $classe " class='item_{$row['menuId']}'"; 

     $menuItens[$row['menuIdPai']][$row['menuId']] = array(
         'link' => $url_link,
         'name' => $row['menuNome'],
         'classe' => $classe
     );
}
$menu = new MenuInfinito();
echo $menu->imprimeMenuInfinito($menuItens);

Answer 4

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menu - Infinito</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#menu" ).menu();
  });
  </script>
  <style>
  .ui-menu { width: 150px; }
  </style>
</head>
<body>

<ul id="menu">
  <li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Adamsville</a></li>
  <li><a href="#">Addyston</a></li>
  <li>
    <a href="#">Delphi</a>
    <ul>
      <li class="ui-state-disabled"><a href="#">Ada</a></li>
      <li><a href="#">Saarland</a></li>
      <li><a href="#">Salzburg</a></li>
    </ul>
  </li>
  <li><a href="#">Saarland</a></li>
  <li>
    <a href="#">Salzburg</a>
    <ul>
      <li>
        <a href="#">Delphi</a>
        <ul>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Saarland</a></li>
          <li><a href="#">Salzburg</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Delphi</a>
        <ul>
          <li><a href="#">Ada</a></li>
          <li><a href="#">Saarland</a></li>
          <li><a href="#">Salzburg</a></li>
        </ul>
      </li>
      <li><a href="#">Perch</a></li>
    </ul>
  </li>
  <li class="ui-state-disabled"><a href="#">Amesville</a></li>
</ul>
</body>
</html>

Here is a code that can show some things.

Source: http://jqueryui.com/menu/