Dynamically filled mega-menu

Question

I am trying to implement a mega menu into a sparkpay store. The menu is dynamic. here is what the menu code looks like.

html:

<ul class="nav navbar-nav">
                    <li>
                      <div class="affix-logo">
                        <a href="/" class="logo_2">
                          <img src="/images/logo.png">
                        </a>
                      </div>
                    </li>
                    <ac:layoutarea id="Item">
                      <ac:visibilityarea id="phDDLink">

                        <li class="dropdown">
                          <a href="$$HREF$$" target="$$TARGET$$" data-toggle="">$$TEXT$$</a>
                          <ac:visibilityarea id="phSubMenu">
                            <ul class="dropdown-menu">$$SUBMENU$$</ul>
                          </ac:visibilityarea>
                        </li>
                      </ac:visibilityarea>
                      <ac:visibilityarea id="phNoDDLink">
                        <li>
                          <a href="$$HREF$$" target="$$TARGET$$">$$TEXT$$</a>
                        </li>
                      </ac:visibilityarea>
                    </ac:layoutarea>

                  </ul>

I have overwritten that block and added a menu that isn't dynamic. It is too big and very inefficient. The mega menu is essentially this codepen: https://codepen.io/iamgonge/pen/QpOgZB. The menu uses both five and four column layouts. I'm a intern and I'm trying to make a good impression. My current solution kind of sucks. I would like to surprise my boss with a dynamically filled mega menu, I just don't know where to start.

Answer 1

I think what you are looking for is using AJAX. You first need to determine where are the fields of the menu saved - they can be in a json file or in a database.

In case of a database - Then you need write a middle layer in PHP (server side), which will connect to the database and have functions to load the data in to a local object.

Using AJAX, you can then call a function when the page loads to fetch data from that PHP script.

The following link describes something similar to what you are trying to acheive, except that this one loads data in to a modal, on click.

You need to change that part so that the AJAX function is called on page load itself.

To pass dynamic data to a bootstrap modal

Note that this only one of the many ways you can achieve this functionality. Hope this helps.

Edit - Note that this is a general approach to back end data fetching, in your case, if you want to be very specific to menus then you would rather have it saved in a json file and then load it into the menu.

Refer: Creating a Menu from JSON for more details