Category UL and LI recursion

[devianleong]

Hi, This is my php code for category UL and LI recursive. Now is working fine but the output is not what I expected.

Here is the HTML output of the code I provided:

<ul><li> <a href="#">Electronic Gadgets </a><span class="subDropdown plus"></span><ul><li> <a href="#">Pant</a></li><li> <a href="#">Aircond</a></li><li> <a href="#">Shoe</a></li><li> <a href="#">test</a></li><li> <a href="#">hehe</a></li><li> <a href="#">hahahhehe</a></li><li> <a href="#">hehe</a></li><li> <a href="#">hahahhehe</a></li><li> <a href="#">te</a></li><li> <a href="#">te</a></li><li> <a href="#">te</a></li><li> <a href="#">te</a></li></ul></li><li> <a href="#">Fashion &amp; Accessory </a></li><li> <a href="#">Beauty &amp; Wellness  </a><ul><li> <a href="#">Test</a></li><li> <a href="#">test</a></li><li> <a href="#">Test</a></li><li> <a href="#">test</a></li></ul></li><li> <a href="#">Food &amp; Beverages </a></li><li> <a href="#">Baby, Kids &amp; Mommy </a></li><li> <a href="#">Sports &amp; Outdoor </a></li><li> <a href="#">Home</a></li><li> <a href="#">Cars &amp; Bikes </a></li><li> <a href="#">Pets World</a></li></ul>  

Here is my PHP:

function showMenu($items, $parent = null,$level = 0) {
 // Assuming root elements have parent_id of 0:
 $index = $parent == null ? '0' : $parent;

 if (empty($items[$index])) {
  // No children, don't output anything
  return;
 }

 echo '<ul', $parent == null ? '' : '', '>';

 foreach ($items[$index] as $child) {


  echo '<li> <a href="#">', htmlentities($child['Name']).'</a>';

  if($level == 0){

        echo'<span class="subDropdown plus"></span>';

    }

  showMenu($items, $child['ID'],$level= 1);

  echo '</li>';

 }

 echo '</ul>';
}



$items = array();

$res = mysql_query("SELECT * FROM category");
while ($row = mysql_fetch_assoc($res)) {
 $items[$row['Parent_ID']][] = $row;
}

echo showMenu($items);

How can I make it like if there is a children will add <span class="subDropdown plus"> after LI tag and before UL tag. My output only display one time <span class="subDropdown plus">. The other category that have children are not display <span class="subDropdown plus"> . Please help me

[diafol]

I can't see any recursion in your routine. A quick thought...

$q = "SELECT id, parent_id, label, href FROM items ORDER BY parent_id";
$r = mysql_query($q);
$nav = array();
while($d = mysql_fetch_assoc($r))
{
    if($d['parent_id'] === 0)
    {
        $nav[$d['id']]['parent'] = array($d['label'], $d['href']); 
    }else{
        $nav[$d['parent_id']]['child'][] = array($d['label'], $d['href']);
    }
}

function createNav($nav)
{
    $output = '';
    foreach($nav as $id)
    {
        $output .= "<ul>";
        //assume location (href) is NULL if children exist - but some parents' strangely have hrefs (like Daniweb!)
        if(!is_null($id['parent']['href']))
        { 
            $output .= "<li><a href='{$id['parent']['href']}'>{$id['parent']['label']}</a>";
        }else{
            $output .= "<li>{$id['parent']['label']}";
        }

        if(isset($id['child']))
        {
            $output .= "<ul>";
            foreach($id['child'] as $child)
            {
                $output .= "<li><a href='{$child['href']}'>{$child['label']}</a></li>"; 
            }
            $output .= "</ul>";
        }
        $output .= "</li></ul>";
    }
    return $output; 
}

echo createNav($nav);

Not tested and probably not as slick as it could be. Anyway, back to your classes. Do you really need these? Surely you can get away with css such as

.nav li ul li{

}

If you have something like...

<ul class="nav">
    <li>toplevel1
        <ul>
            <li>child1</li>
            <li>child2</li>
            <li>child3</li>
        </ul>
    </li>
    <li>toplevel2
        <ul>
            <li>child1</li>
            <li>child2</li>
            <li>child3</li>
        </ul>
    </li>
    <li>toplevel3</li>
</ul>

[devianleong]

Sir diafol, Yes my out put is like that but my expected output is <span class="subDropdown plus">

<ul class="nav">
    <li>toplevel1
    <span class="subDropdown plus">
        <ul>
            <li>child1</li>
            <li>child2</li>
            <li>child3</li>
        </ul>
    </li>
    <li>toplevel2
    <span class="subDropdown plus">
        <ul>
            <li>child1</li>
            <li>child2</li>
            <li>child3</li>
        </ul>
    </li>
    <li>toplevel3</li>
</ul>

How to display <span class="subDropdown plus">before children <ul> tag and after parent<li> tag if there is a children?

[diafol]

That's a strange way to do it IMO. And I'm not sure how far the span is supposed to span. Is it...

<li>toplevel2
    <span class="subDropdown plus"></span>
    <ul>
        <li>child1</li>
        <li>child2</li>
        <li>child3</li>
    </ul>
</li>

or...

<li>toplevel2
    <span class="subDropdown plus">
        <ul>
            <li>child1</li>
            <li>child2</li>
            <li>child3</li>
        </ul>
    </span>
</li>

I don't think the second method is semantically right though.

For the first method...

function createNav($nav)
{
    $output = '';
    foreach($nav as $id)
    {
        $output .= "<ul>";
        //assume location (href) is NULL if children exist - but some parents' strangely have hrefs (like Daniweb!)
        if(!is_null($id['parent']['href']))
        { 
            $output .= "<li><a href='{$id['parent']['href']}'>{$id['parent']['label']}</a>";
        }else{
            $output .= "<li>{$id['parent']['label']}";
        }
        if(isset($id['child']))
        {
            $output .= "<span class="subDropdown plus"></span><ul>";
            foreach($id['child'] as $child)
            {
                $output .= "<li><a href='{$child['href']}'>{$child['label']}</a></li>"; 
            }
            $output .= "</ul>";
        }
        $output .= "</li></ul>";
    }
    return $output; 
}
echo createNav($nav);

For the second method...

function createNav($nav)
{
    $output = '';
    foreach($nav as $id)
    {
        $output .= "<ul>";
        //assume location (href) is NULL if children exist - but some parents' strangely have hrefs (like Daniweb!)
        if(!is_null($id['parent']['href']))
        { 
            $output .= "<li><a href='{$id['parent']['href']}'>{$id['parent']['label']}</a>";
        }else{
            $output .= "<li>{$id['parent']['label']}";
        }
        if(isset($id['child']))
        {
            $output .= "<span class="subDropdown plus"><ul>";
            foreach($id['child'] as $child)
            {
                $output .= "<li><a href='{$child['href']}'>{$child['label']}</a></li>"; 
            }
            $output .= "</ul></span>";
        }
        $output .= "</li></ul>";
    }
    return $output; 
}

Hope that makes sense. :)