Avatar of RayBakker
RayBakker
Flag for Canada

asked on 

Using Bootstrap and Dynamically Generated Menus

Greetings

I am trying to us Bootstrap with our CMS. Are there any techniques in Bootstrap that allows me to style a dynamically generate menu so that it behaves like one that has been hand coded.

I have tried using jQuery to add and remove classes with limited success.

Thanks



Here is some partial code on the menu structure and classes generated by our CMS:

<ul id="sectionMenuElementID_1" class="ipf-sectionmenu">
        <li id="pageid4949" data-pageid="4949" data-level="1">
          <div><a href="Item 1">Item 1</a></div>
        </li>
        <li id="pageid151" data-pageid="151" class="ipf-parent" data-level="1">
          <div><a href="Item 1">Item 1</a></div>
          <ul>
            <li id="pageid152" data-pageid="152" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid4869" data-pageid="4869" data-level="2"><a href="Item 1">Item 1</a></li>
          </ul>
        </li>
        <li id="pageid104" data-pageid="104" class="ipf-parent" data-level="1">
          <div><a href="Item 1">Item 1</a></div>
          <ul>
            <li id="pageid105" data-pageid="105" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid106" data-pageid="106" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid107" data-pageid="107" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid4965" data-pageid="4965" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid5126" data-pageid="5126" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid11991" data-pageid="11991" data-level="2"><a href="Item 1">Item 1</a></li>
          </ul>
        </li>
        <li id="pageid145" data-pageid="145" class="ipf-parent" data-level="1">
          <div><a href="Item 1">Item 1</a></div>
          <ul>
            <li id="pageid2474" data-pageid="2474" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid148" data-pageid="148" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid149" data-pageid="149" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid1838" data-pageid="1838" data-level="2"><a href="Item 1">Item 1</a></li>
            <li id="pageid4653" data-pageid="4653" data-level="2"><a href="Item 1">Item 1</a></li>
          </ul>
        </li>
CSSjQueryResponsive WebBootstrap

Avatar of undefined
Last Comment
RayBakker

8/22/2022 - Mon