title: Mega Menu with PHP in Laravel
body: <p><strong>EDIT</strong>: Based on the advice by Tom, here's my modified code. Works well, so thanks Tom. </p>
  
  <pre><code>&lt;?php
      $categories = Category::where('parent_id', '0')-&gt;get();
  
      foreach($categories as $category):
  
          $category_courses = get_courses($category-&gt;id);
          $sub_categories = Category::where('parent_id', $category-&gt;id)-&gt;get();
          $max_iteration = ceil(count($sub_categories) / 4);
  ?&gt;
      &lt;li class="dropdown mega-menu-4"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" title="{{ $category-&gt;name }}"&gt;{{ $category-&gt;name }} &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu style-plain"&gt;
              &lt;li class="one-column"&gt;
                  &lt;?php foreach($sub_categories as $key=&gt;$sub_category): ?&gt;
                      &lt;ul&gt;
                          &lt;li class="nav-title"&gt;{{ $sub_category-&gt;name }}&lt;/li&gt;
                          &lt;?php foreach(get_courses($sub_category-&gt;id) as $course): ?&gt;
                              &lt;li&gt;{{ $course-&gt;title }}&lt;/li&gt;
                          &lt;?php endforeach; ?&gt;
                      &lt;/ul&gt;
                      &lt;?php if(($key + 1) % $max_iteration == 0): ?&gt;
                          &lt;/li&gt;
                          &lt;li class="one-column"&gt;
                      &lt;?php endif; ?&gt;
                  &lt;?php endforeach; ?&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;?php endforeach; ?&gt;
  </code></pre>
  
  <p>Though now I'm thinking I should create a tree in memory after getting some advice from machuga in the #laravel IRC. Essentially based on this SO answer <a href="https://stackoverflow.com/questions/14740429/flat-php-array-to-hierarchy-tree">Flat PHP Array to Hierarchy Tree</a>.</p>
  
  <hr>
  
  <p>I'm trying to create a mega menu in my Laravel app with the following structure, so that it works well with Bootstrap 2.3.</p>
  
  <pre><code>&lt;div class="navbar"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;div class="nav-collapse collapse"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li class="dropdown mega-menu-4 transition"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;$category &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li class="one-column"&gt;
                                  &lt;ul&gt;
                                      &lt;li class="nav-title"&gt;$subCategory 1&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;ul&gt;
                                      &lt;li class="nav-title"&gt;$subCategory 1&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li class="one-column"&gt;
                                  &lt;ul&gt;
                                      &lt;li class="nav-title"&gt;$subCategory 2&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;ul&gt;
                                      &lt;li class="nav-title"&gt;$subCategory 2&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li class="one-column"&gt;
                                  &lt;ul&gt;
                                      &lt;li class="nav-title"&gt;$subCategory 3&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;ul&gt;
                                      &lt;li class="nav-title"&gt;$subCategory 3&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li class="one-column"&gt;
                                  &lt;ul&gt;
                                      &lt;li class="nav-title"&gt;$subCategory 4&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;ul&gt;
                                      &lt;li class="nav-title"&gt;$subCategory 4&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;$course&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my database I have the following:</p>
  
  <pre><code>table: categories
  fields: id, parent_id, name, slug
  
  table: courses
  fields: id, category_id, title, slug
  </code></pre>
  
  <p>I am struggling with the for and foreach loop logic in order to generate the ul elements within the li:one-column elements. I want a maximum of 4 columns, with as many rows as necessary, depending on how many sub-categories there are.</p>
  
  <p>So, in the categories table a top level category will not have a 'parent_id' assigned to it but a sub-category will have a top level 'parent_id' assigned to it.</p>
  
  <p>So I can foreach through $categories as $category and setup the top level menu structure which will create a li:dropdown element for each top level category. The problem comes when trying to implement the li:one-column elements. Each li:one-column element is essentially a column in the mega menu, so I need a maximum of four. Each ul within the column is a sub-category.</p>
  
  <p>So if there are 13 sub-categories under the top level category, each column will have the following:</p>
  
  <pre><code>Column 1: 4
  Column 2: 3
  Column 3: 3
  Column 4: 3
  </code></pre>
  
  <p>Then if a new sub-category were added, it would be:</p>
  
  <pre><code>Column 1: 4
  Column 2: 4
  Column 3: 3
  Column 4: 3
  </code></pre>
  
  <p>And so on. So essentially each new sub-category would fill up the next available column.</p>
  
  <p>There's probably a really easy solution to this but I'm struggling with the logic at the minute. Thanks in advance.</p>
  
  <p><strong>EDIT</strong>: I'm getting closer using:</p>
  
  <pre><code>    &lt;ul class="nav"&gt;
              @foreach($categories as $category)
                      &lt;?php
                              $category_courses = get_courses($category-&gt;id);
                              $sub_categories = Category::where('parent_id', $category-&gt;id)-&gt;get();
                              $sub_categories_total = count($sub_categories); // int(5)
                              $sub_category_split = round($sub_categories_total / 4); // int(1)
                      ?&gt;
                      &lt;li class="dropdown mega-menu-4"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" title="{{ $category-&gt;name }}"&gt;{{ $category-&gt;name }} &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu style-plain"&gt;
                                      @for($i=0; ++$i &lt;=4;)
                                      &lt;li class="one-column"&gt;
                                              @foreach($sub_categories as $sub_category)
                                                              &lt;ul &gt;
                                                                      &lt;li class="nav-title"&gt;{{ $sub_category-&gt;name }}&lt;/li&gt;
                                                                      @foreach(get_courses($sub_category-&gt;id) as $course)
                                                                              &lt;li&gt;{{ $course-&gt;title }}&lt;/li&gt;
                                                                      @endforeach
                                                              &lt;/ul&gt;
                                              @endforeach
                                      &lt;/li&gt;
                                      @endfor
                              &lt;/ul&gt;
                      &lt;/li&gt;
              @endforeach
      &lt;/ul&gt;
  </code></pre>
  
  <p>I'm still not quite there though, as it adds all sub_categories to each li:one-column element. I feel I'm certainly closer to a solution though.</p>
  
  <p><strong>EDIT</strong>: OK, I'm a lot closer now. I'm now able to output only the maximum iteration in each li:one-column element but it outputs exactly the same data. I need a way to continue the foreach loop from where it breaks.</p>
  
  <pre><code>&lt;ul class="nav"&gt;
              @foreach($categories as $category)
                      &lt;?php
                              $category_courses = get_courses($category-&gt;id);
                              $sub_categories = Category::where('parent_id', $category-&gt;id)-&gt;get();
                              $max_iteration = round(count($sub_categories) / 4);
                      ?&gt;
                      &lt;li class="dropdown mega-menu-4"&gt;
                              &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" title="{{ $category-&gt;name }}"&gt;{{ $category-&gt;name }} &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu style-plain"&gt;
                                      @for($ci=0; ++$ci &lt;=4;)
                                              &lt;li class="one-column"&gt;
                                                      @foreach($sub_categories as $key=&gt;$sub_category)
                                                              @if($key &lt;= $max_iteration)
                                                                      &lt;ul &gt;
                                                                              &lt;li class="nav-title"&gt;{{ $sub_category-&gt;name }}&lt;/li&gt;
                                                                              @foreach(get_courses($sub_category-&gt;id) as $course)
                                                                                      &lt;li&gt;{{ $course-&gt;title }}&lt;/li&gt;
                                                                              @endforeach
                                                                      &lt;/ul&gt;
                                                              @else
                                                                      &lt;?php break; ?&gt;
                                                              @endif
                                                      @endforeach
                                              &lt;/li&gt;
                                      @endfor
                              &lt;/ul&gt;
                      &lt;/li&gt;
              @endforeach
      &lt;/ul&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>: OK, this is the closest I've got so far and it's almost there. Still not right though, as it outputs 1 subcategory in the first column, column 2, column 3 but 2 in column 4. :-(</p>
  
  <pre><code>    @foreach($categories as $category)
              &lt;?php
                      $category_courses = get_courses($category-&gt;id);
                      $sub_categories = Category::where('parent_id', $category-&gt;id)-&gt;get();
                      $max_iteration = round(count($sub_categories) / 4) + 1;
              ?&gt;
              &lt;li class="dropdown mega-menu-4"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" title="{{ $category-&gt;name }}"&gt;{{ $category-&gt;name }} &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu style-plain"&gt;
                              &lt;li class="one-column"&gt;
                                      @foreach($sub_categories as $key=&gt;$sub_category)
                                              &lt;ul&gt;
                                                      &lt;li class="nav-title"&gt;{{ $sub_category-&gt;name }}&lt;/li&gt;
                                                      @foreach(get_courses($sub_category-&gt;id) as $course)
                                                              &lt;li&gt;{{ $course-&gt;title }}&lt;/li&gt;
                                                      @endforeach
                                              &lt;/ul&gt;
                                              @if($key &lt;= $max_iteration)
                                                      &lt;/li&gt;
                                                      &lt;li class="one-column"&gt;
                                              @endif
                                      @endforeach
                              &lt;/li&gt;
                      &lt;/ul&gt;
              &lt;/li&gt;
      @endforeach
  </code></pre>