Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 40
  • Last Modified:

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>
0
RayBakker
Asked:
RayBakker
  • 3
  • 3
1 Solution
 
EddieShipmanCommented:
Well, it depends on the CMS and how it handles the filling of the templates.
What CMS are you using?
0
 
RayBakkerAuthor Commented:
Greetings

CMS: Active Content Management

I create the templates, css, js, etc. and zip them and upload.

What were you thinking with regards to the filling of templates?

Thanks
0
 
EddieShipmanCommented:
"CMS: Active Content Management"
That really doesn't give me enough info to understand how the system handles templates.
Have a link to the vendor?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
RayBakkerAuthor Commented:
Greetings

Thanks for you help, but I got it. I added the following code to the bottom of my template.

<script>
      $("#sectionMenuElementID_1").addClass("nav navbar-nav navbar-right");
      $("#sectionMenuElementID_1 li").addClass("dropdown-toggle");
      $("#sectionMenuElementID_1 li a").addClass("dropdown");
      $("#sectionMenuElementID_1 li a").attr("data-toggle","dropdown");
      $("#sectionMenuElementID_1 li ul").addClass("dropdown-menu");
      
      // By default Bootstrap display sub-menu items only on clicking the parent item.
      // The following code displays the sub-menu items on hover.
      $(function(){
            $('.ipf-parent').hover(function() {
                  $(this).addClass('open');
            },
            function() {
                  $(this).removeClass('open');
            });
      });
</script>
0
 
EddieShipmanCommented:
Well OK, I thought you meant how to BUILD the menu using your CMS.
0
 
RayBakkerAuthor Commented:
More research and testing I was able to figure it out.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now