Databases
StackOverflow2013
Postsdbo
POBuild dynamic Mega Menu using recursion?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBuild dynamic Mega Menu using recursion?
    primarykey
    data
    text
    <p>I'm trying to create a Mega Menu using PHP and I'm having a problem getting the structure to output correctly. I've hard-coded the Mega Menu to test everything and it works fine, but obviously I need PHP to create it for me.</p> <p>I have an example with the Mega Menu hard-coded so everyone can see what I'm trying to create:</p> <p><a href="http://www.libertyeaglearms.com/dev" rel="nofollow noreferrer">http://www.libertyeaglearms.com/dev</a></p> <p><strong>Or here's the code:</strong></p> <p><strong>DESIRED OUTPUT:</strong></p> <pre><code> &lt;div id="wrapper"&gt; &lt;ul class="mega-menu"&gt; &lt;li class="mega-menu-drop"&gt; &lt;a href="#"&gt;Firearms&lt;/a&gt; &lt;div class="mega-menu-content"&gt; &lt;div class="column"&gt; &lt;h4&gt;Rifles&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;h4&gt;Handguns&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;h4&gt;Shotguns&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="mega-menu-drop"&gt; &lt;a href="#"&gt;Archery&lt;/a&gt; &lt;div class="mega-menu-content"&gt; &lt;div class="column"&gt; &lt;h4&gt;Bows&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="column"&gt; &lt;h4&gt;Arrows&lt;/h4&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>CURRENT OUTPUT:</strong> (very messed up. be warned, lol)</p> <pre><code>&lt;div id="wrapper"&gt; &lt;ul class="mega-menu"&gt; &lt;li class="mega-menu-drop"&gt; &lt;a href="#"&gt;archery&lt;/a&gt; &lt;div class="mega-menu-content"&gt; &lt;div class="column"&gt; &lt;h4&gt;compound&lt;/h4&gt; &lt;ul&gt; &lt;h4&gt;bows&lt;/h4&gt; &lt;ul&gt; &lt;/div&gt; &lt;/li&gt; &lt;li class="mega-menu-drop"&gt; &lt;a href="#"&gt;firearms&lt;/a&gt; &lt;div class="mega-menu-content"&gt; &lt;div class="column"&gt; &lt;h4&gt;rifle ammunition&lt;/h4&gt; &lt;ul&gt; &lt;h4&gt;ammunition&lt;/h4&gt; &lt;ul&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p><strong>HERE MY PHP:</strong></p> <pre><code>$json = json_decode($category-&gt;buildDepartments(NULL),true); function buildDepartments($array,$parent) { $html = ''; foreach($array as $category) { if($category['parent'] == $parent) { if($category['parent'] == NULL) { $html .= '&lt;li class="mega-menu-drop"&gt;' . "\n\t\t\t\t"; $html .= '&lt;a href="#"&gt;'.$category['category_name'].'&lt;/a&gt;' . "\n\t\t\t\t"; $html .= '&lt;div class="mega-menu-content"&gt;' . "\n\t\t\t\t\t"; $html .= '&lt;div class="column"&gt;' . "\n\t\t\t\t\t\t"; $html .= buildDepartments($array,$category['category_id']); $html .= '&lt;/div&gt;' . "\n\t\t\t"; $html .= '&lt;/li&gt;' . "\n\t\t\t"; } else { $html .= buildDepartments($array,$category['category_id']); $html .= '&lt;h4&gt;'.$category['category_name'].'&lt;/h4&gt;' . "\n\t\t\t\t\t\t"; $html .= '&lt;ul&gt;' . "\n\t\t\t\t"; } } } return $html; } print(buildDepartments($json,NULL)); </code></pre> <p><strong>HERE'S MY DATABSE:</strong></p> <p><img src="https://i.stack.imgur.com/tZvfi.jpg" alt="enter image description here"></p> <p><strong>EDIT AFTER BOUNTY</strong></p> <p>Building off what icktoofay suggested, I cannot seem to figure out the <code>foreach()</code> loops. The problem I'm getting is I get the department name inside the mega menu when I should see category and sub categories. I think the problem is I need to perform a loop with a specific parent id in order to get all the children, but I'm not really sure if that's the problem. Here's the code:</p> <pre><code>&lt;div id="wrapper"&gt; &lt;ul class="mega-menu"&gt; &lt;?php $json = json_decode($category-&gt;buildDepartments(NULL)); ?&gt; &lt;?php foreach($json as $category): ?&gt; &lt;li class="mega-menu-drop"&gt; &lt;a href="#"&gt;&lt;?php if($category-&gt;parent === NULL){echo $category-&gt;category_name;} ?&gt;&lt;/a&gt; &lt;div class="mega-menu-content"&gt; &lt;?php foreach($category as $subcategory): ?&gt; &lt;div class="column"&gt; &lt;?php if($category-&gt;category_id === $category-&gt;parent){echo '&lt;h4&gt;' . $category-&gt;category_name . '&lt;/h4&gt;';}?&gt; &lt;ul&gt; &lt;?php foreach($category as $subcategory) { echo '&lt;li&gt;' . $category-&gt;category_name . '&lt;/li&gt;'; } ?&gt; &lt;/ul&gt; &lt;/div&gt; &lt;?php endforeach; ?&gt; &lt;/div&gt; &lt;/li&gt; &lt;?php endforeach; ?&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMike
    1. USMike
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBuild dynamic Mega Menu using recursion?
      1. USMike
      1. VTBountyStart
    2. VO
      singulars
      1. POBuild dynamic Mega Menu using recursion?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POBuild dynamic Mega Menu using recursion?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI have such a script somewhere but it's all with Albanian language comments IIRC.
      singulars
      1. POBuild dynamic Mega Menu using recursion?
      1. UShakre
    2. COI don't mind the Albanian comments if you wouldn't mind sharing.
      singulars
      1. POBuild dynamic Mega Menu using recursion?
      1. USMike
    3. COThose were actually joking about the militaria analogy your question has, however, we have exisitng Q&A material about the parent child relation-ship you have here for your categories. As an entry question I would suggest the following as the reference question for the topic: [How can I convert a series of parent-child relationships into a hierarchical tree?](http://stackoverflow.com/q/2915748/367456). Watch for related links in that Q&A, they cover querying form Mysql as well as turning in HTML in great detail. And all in plain English ;)
      singulars
      1. POBuild dynamic Mega Menu using recursion?
      1. UShakre
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload