Несколько вертикальных меню из таблицы закрытия

Question

Я ищу несколько вертикальных меню, таких как here. Мне не нужно ни одного меню. Я использую в своей базе данных mysql типичную иерархию таблицы закрытия (предок/потомок/глубина) для категорий, и я хочу их визуализировать. Для того, чтобы получить все родитель и родитель из базы данных У меня есть эти методы:

public function getSubtree($node) { 
    $tree = $this->connection->query(" 
    SELECT c.*, cc2.ancestor, cc2.descendant, cc.depth 
    FROM 
     category c 
     JOIN category_closure cc 
     ON (c.cat_id = cc.descendant) 
      JOIN category_closure cc2 
      USING (descendant) 
    WHERE cc.ancestor = $node AND cc2.depth = 1 
    ORDER BY cc.depth, c.cat_id); 

    return $this->parseSubTree($node, $tree); 
} 

private function parseSubTree($rootID, $nodes) { 
    // to allow direct access by node ID 
    $byID = array(); 

    // an array of parrents and their children 
    $byParent = array(); 


    foreach ($nodes as $node) { 
     if ($node["cat_id"] != $rootID) { 
      if (!isset($byParent[$node["ancestor"]])) { 
       $byParent[$node["ancestor"]] = array(); 
      } 
      $byParent[$node["ancestor"]][] = $node["cat_id"]; 
     } 
     $byID[$node["cat_id"]] = (array) $node; 
    } 

    // tree reconstruction 
    $tree = array(); 
    foreach ($byParent[$rootID] as $nodeID) { // root direct children 
     $tree[] = $this->parseChildren($nodeID, $byID, $byParent); 
    } 

    return $tree; 
} 

private function parseChildren($id, $nodes, $parents) { 
    $tree = $nodes[$id]; 

    $tree["children"] = array(); 
    if (isset($parents[$id])) { 
     foreach ($parents[$id] as $nodeID) { 
      $tree["children"][] = $this->parseChildren($nodeID, $nodes, $parents); 
     } 
    } 

    return $tree; 
} 

В предъявитель я только:

$this->template->categories = $this->category->getSubtree(1); 

И потому, что я использую Nette Framework, я использую латт шаблонизатор , это очень похоже на Smarty. Для отображения всех категорий с родителями и детьми у меня есть это:

<ul class="tree"> 
    {block #categories} 
     {foreach $categories as $node} 
      <li> 
       <span">{$node["name"]}</span> 
       <ul n:if="count($node['children'])"> 
        {include #categories, 'categories' => $node["children"]} 
       </ul> 
      </li> 
     {/foreach} 
    {/block} 
</ul> 

Моей самая большая проблема заключается в том, чтобы сделать стиль CSS, если я хочу, три и больше меню уровня. Если выбрана какая-либо категория, то его подкатегории показаны, а другие категории скрыты. Когда выбрано, некоторые подкатегории показывают его подкатегории и другие скрытые подкатегории и т. Д. На самом деле спасибо за продвижение, и я сожалею о своем английском. Надеюсь, ты знаешь, что я имею в виду.

Answer 1

Если я так хорошо понимаю, вы хотите выпадающее меню. Я считаю, что выравнивание вертикально. Подкатегории, должны ли они отображаться под категорией или рядом? Я понимаю, что остальные должны оставаться видимыми.

Answer 2

Если вы хотите, чтобы это было чисто вертикально, вы должны работать с onclick и JavaScript. Если с муссом кадром попробовать это:

ul { 

width: 200px; 
position: relative; 
list-style: none; 
margin: 0; 
padding: 0; 

}

ул Li {

background: #ccc; 
border-bottom: 1px solid #fff; 
position: relative; 

}

уль Li уль {

position: absolute; 
left: 200; 
top: 0; 
display: none; 

}

уль ли: парить ул {

display: block; 

}

уль Li уль Li {

border-left: 1px solid #fff; 

}