클로저 테이블에서 여러 개의 수직 메뉴

Question

같은 복수의 수직 메뉴를 찾고 있는데 here. 나는 어떤 드롭 메뉴도 원하지 않아. 내 mysql 데이터베이스를 사용하는 전형적인 클로저 테이블 계층 구조 (조상/자손/깊이)에 대한 카테고리와 나는 그들을 렌더링 싶어요. 나는이 방법이 데이터베이스에서 모든 부모와 어린이를 얻으려면 :

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

을 그리고 나는 Nette 프레임 워크를 사용하고 있기 때문에, 나는 라떼 템플릿 엔진을 사용하고 있습니다 : 발표자에

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

을 그냥 가지고 , 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; 

}

UL 리튬 {

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

}

UL의 리 UL {

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

}

,

UL 리 : UL 난 그냥 모두에서 렌더링 간단하게 접을 수있는 수직 메뉴를 원하는