Hi all,

I hope that everyone is well during lockdown.

I need some help with creating my menu; I understand how to create it in the nested pages (Menu Maker) and need some help migrating it into my HTML, I would like to do it using if statements as the menu is dynamic and changes that I make in the admin panel I want to change in my menu also. Here is a snippet of my code for my menu (please note it won't fully work in a browser because the javascript/css libraries aren't attached).

Code: Select all
<li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Home</a>
  <div class="dropdown-menu">
    <ul class="p-0 m-0">
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Home - landing page</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="index.html">Landing page 1</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-landing-2.html">Landing page 2</a> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Home - creative</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-creative-1.html">Creative layout 1</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-creative-2.html">Creative layout 2</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-creative-3.html">Creative layout 3</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-creative-4.html">Creative layout 4</a> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Home - corporate</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-corporate-1.html">Corporate layout 1</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-corporate-2.html">Corporate layout 2</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-corporate-3.html">Corporate layout 3</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-corporate-4.html">Corporate layout 4</a> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Home - blog</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-blog-1.html">Blog layout 1</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-blog-2.html">Blog layout 2</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-blog-3.html">Blog layout 3</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-blog-4.html">Blog layout 4</a> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Home - portfolio</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-portfolio-1.html">Portfolio layout 1</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-portfolio-2.html">Portfolio layout 2</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-portfolio-3.html">Portfolio layout 3</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-portfolio-4.html">Portfolio layout 4</a> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Home - shop</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-shop-1.html">Shop layout 1</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-shop-2.html">Shop layout 2</a> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Home - one page</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-one-page-1.html">One page top menu</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-one-page-2.html">One page side menu</a> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Niche demos v1</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-cafe.html">Home - cafe</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-fashion.html">Home - fashion</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-bakery.html">Home - bakery</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-fitness.html">Home - fitness</a> </li>
            <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-hotel.html">Home - hotel</a> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Niche demos v2</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <span class="dropdown-item" >Taxi <span class="label hot">coming soon</span></span> </li>
            <li class="nav-item"> <span class="dropdown-item">Lawyer <span class="label hot">coming soon</span></span> </li>
            <li class="nav-item"> <span class="dropdown-item">Real Estate <span class="label hot">coming soon</span></span> </li>
            <li class="nav-item"> <span class="dropdown-item">Non-Profit <span class="label hot">coming soon</span></span> </li>
            <li class="nav-item"> <span class="dropdown-item">Music <span class="label hot">coming soon</span></span> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item dropdown-2"> <a class="dropdown-item drop-right-sub dropdown-sub" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" href="#">Niche demos v3</a>
        <div class="dropdown-menu drop-right-sub">
          <ul class="p-0 m-0">
            <li class="nav-item"> <span class="dropdown-item" >Medical <span class="label hot">coming soon</span></span> </li>
            <li class="nav-item"> <span class="dropdown-item">Barber <span class="label hot">coming soon</span></span> </li>
            <li class="nav-item"> <span class="dropdown-item">Hosting <span class="label hot">coming soon</span></span> </li>
            <li class="nav-item"> <span class="dropdown-item">Travel <span class="label hot">coming soon</span></span> </li>
            <li class="nav-item"> <span class="dropdown-item">Event <span class="label hot">coming soon</span></span> </li>
          </ul>
        </div>
      </li>
      <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-agency.html">Home - agency</a> </li>
      <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-startup.html">Home - startup</a> </li>
      <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-design-studio.html">Home - design studio</a> </li>
      <li class="nav-item"> <a class="dropdown-item animsition-link" href="home-branding.html">Home - branding</a> </li>
    </ul>
  </div>
</li>


Here is what my admin panel generally looks like

Code: Select all
Home
------> Home-landing page
--------------------------> Landing page 1 
--------------------------> Landing page 2


etc... I didn't write out the full admin panel as it would take a while as you could gather from my the code above.

Thanks In Advance