Solved

Using Bootstrap and Dynamically Generated Menus

Posted on 2016-09-08
6
22 Views
Last Modified: 2016-09-18
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
Comment
Question by:RayBakker
  • 3
  • 3
6 Comments
 
LVL 26

Expert Comment

by:EddieShipman
ID: 41790053
Well, it depends on the CMS and how it handles the filling of the templates.
What CMS are you using?
0
 

Author Comment

by:RayBakker
ID: 41791563
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 41792105
"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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Accepted Solution

by:
RayBakker earned 0 total points
ID: 41796559
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 41796740
Well OK, I thought you meant how to BUILD the menu using your CMS.
0
 

Author Closing Comment

by:RayBakker
ID: 41803593
More research and testing I was able to figure it out.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery Animation faster 5 42
Angular - why isn't this ng-if isn't working? 4 35
Error on link 14 36
insert text field data into html script 13 18
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now