Javascript 动态填充巨型菜单

我正试图在sparkpay商店中实现一个超大菜单。菜单是动态的。 下面是菜单代码的样子

html:

我已经覆盖了那个块并添加了一个非动态菜单。它太大，效率很低。mega菜单基本上就是这个代码笔： . 菜单使用五列和四列布局。

---

我是实习生，我想给人留下好印象。我目前的解决方案有点糟糕。我想用一个动态填充的超大菜单给我的老板一个惊喜，我只是不知道从哪里开始。

我想你想要的是使用AJAX。您首先需要确定菜单的字段保存在哪里——它们可以在json文件或数据库中

如果是数据库- 然后，您需要在PHP服务器端编写一个中间层，它将连接到数据库，并具有将数据加载到本地对象的函数

使用AJAX，您可以在页面加载时调用函数，从PHP脚本获取数据

下面的链接描述了一些与您试图实现的内容类似的内容，不同的是，此链接在单击时将数据加载到模式中

您需要更改该部分，以便在页面加载本身时调用AJAX函数

请注意，这只是实现此功能的众多方法之一。希望这有帮助

编辑- 请注意，这是后端数据获取的一般方法，在您的情况下，如果您希望非常特定于菜单，那么您宁愿将其保存在json文件中，然后将其加载到菜单中

---

请参阅：有关来自json的更多详细信息

数据？菜单效率如何？

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