動的充填メガメニュー

Question

私はスパークストアにメガメニューを実装しようとしています。メニューは動的です。 ここにメニューコードの外観を示します。

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> 

私はそのブロックを上書きし、ダイナミックでないメニューが追加されました。大きすぎて非常に非効率的です。メガメニューは、本質的にはこのcodepenです： https://codepen.io/iamgonge/pen/QpOgZB。このメニューでは、5つの列レイアウトと4つの列レイアウトが使用されます。 私はインターンであり、私は良い印象を作りようとしています。私の現在の解決策の種類は吸う。私は、動的にいっぱいのメガメニューで私の上司を驚かせたいです、私はちょうどどこから始めるべきかわかりません。

Answer 1

あなたが探しているのはAJAXを使用していると思います。最初に、保存されたメニューのフィールドがどこにあるかを判断する必要があります.Jsonファイルまたはデータベースに格納することができます。

データベースの場合 - 次に、データベースに接続し、ローカルオブジェクトにデータをロードする機能を持つ中間層をPHP（サーバー側）に書き込む必要があります。

AJAXを使用すると、ページが読み込まれてそのPHPスクリプトからデータがフェッチされるときに、関数を呼び出すことができます。

次のリンクは、クリックするとモーダルにデータが読み込まれる点を除いて、達成しようとしているものに類似したものです。

ページロード時にAJAX関数が呼び出されるように、その部分を変更する必要があります。

To pass dynamic data to a bootstrap modal

（注）この機能を実現することができます多くの方法のこの唯一のもの。お役に立てれば。

編集 - これは、バックエンドのデータフェッチの一般的なアプローチです。メニューに特化したい場合は、jsonファイルに保存してから、メニュー。

詳細については、Creating a Menu from JSONを参照してください。