Drop down menu with child pages not displaying

I’m just about done with my first Content Box app with a Bootstrap layout I created and am having an issue with the menu bar not displaying a drop down with the child pages. I do see in a previous post that Luis says, “We use this extensively in our www.gocontentbox.org site.” The post also shows the following code:

    #cb.rootMenu( type="li", levels="2" )#

You can also use the cb.subPageMenu() as well.

However, I am stumped on how to get this to work. My parent page is “Products” with 2 child pages (Models and Series). If I enter the URL directly, “products/models”, then the page does display correctly, but it’s not visible as a drop down on the menu bar under Products. Any suggestions?

Steve,

We had this same issue on a recent project. If I remember correctly there wasn’t a way to use the built in options you mentioned to get the structure right for function/styling with bootstrap. We put together some alterations to allow the buildMenu function to accept a type of “data” that returns an array of structures of the menu for the developer to then build their own menu around. The call looks like this <cfset menuData = cb.rootMenu(type=“data”,levels="*")>.

You can see the detail of the pull request at https://github.com/Ortus-Solutions/ContentBox/pull/57. The ticket for this addition is at https://www.assembla.com/spaces/contentbox/tickets/258. I don’t believe these changes to “modules/contentbox/plugins/CBHelper.cfc” will be in your version so you will need to change this file and also your “_menu.cfm” view.

The code we have in place in “_menu.cfm” looks like this. It only handles the two levels now. There are plans to upgrade it work throughout all levels of the menu data.

Hope this helps,
SETH
Computer Know How
702 21st Street
Brodhead, WI 53520
Phone: 608.897.3777 ext 112
Toll Free: 888.588.KNOW (5669) ext 112
Fax: 608.897.3779
Web: http://www.CompKnowHow.com

May I ask the reason it cannot do it? Was it adding styles to the underlying ul,li’s?

Luis Majano
CEO
Ortus Solutions, Corp
www.ortussolutions.com

ColdBox Platform: http://www.coldbox.org
Linked In: http://www.linkedin.com/pub/3/731/483
Social: twitter.com/ortussolutions | twitter.com/coldbox | twitter.com/lmajano

Thanks Seth, I'll give it a shot and let you know.

Steve

I wasn't adding anything additional. I just added 2 child pages and
assigned them to the parent. If I use the "pages" layout, then they do
display in the sidebar, but I want them to display as drop downs in
the main menu bar and that isn't happening. I can see where Seth's
recommendation should do the trick, but will have to try it later.
And, yes, I am using your latest and greatest ColdBox and ContentBox.
The reason I want this to work is that I want the client to be able to
add, modify, and delete sub pages (children), per their request, and
they are not very computer savvy.

Well,
we use this a lot in our layouts:

<div class="topmenu"> 
	<ul class="dropdown"> 
	<!--- Root Menu --->
	#cb.rootMenu(type="li", levels="2")# 
	</ul>

                </div>

Not sure if you need anything more for dropdowns.



Luis Majano

CEO
Ortus Solutions, Corp
www.ortussolutions.com

ColdBox Platform: http://www.coldbox.org
Linked In: http://www.linkedin.com/pub/3/731/483
Social: twitter.com/ortussolutions | twitter.com/coldbox | twitter.com/lmajano

I'll try your solution first, seems the simplest, and let you know.

Thanks and see you Thursday, Son.

The issues we were having were the following. Keep in mind that I was attempting to use the menu generation to render code identical to what Twitter Bootstrap was expecting for both the styling and function of the dropdowns.

  1. Inability to set class on the anchor tags (ie: ‘class=“dropdown-toggle”’)

  2. Inability to set data-toggle on the anchor tags (ie: ‘data-toggle=“dropdown”’)

  3. Inability to add additional code after anchor tags (ie: ‘’)

  4. Inability to add a class to the child ul (id: ‘class=“dropdown-menu”’')

The Twitter Bootstrap menu version (from their website) is as follows.

The closest I could get with the built in ContentBox options was this.

Using the following code…

#cb.rootMenu(type=“li”, levels=2, parentClass=“dropdown”)#

Renders…

  • Parent

  • Child
  • The version after the implementation of the code mentioned (using the ‘data’ option) in my prior post mirrors the Twitter Bootstrap’s expectation. Now, I believe that at least 1 and 4 could be resolved via some addition CSS. Adding additional code like the data-toggle and the caret b tag don’t have an option now. The caret that the b tag adds could be done in a different way with CSS or possibly not included at all but I was once again trying to build the menu exactly as Twitter Bootstrap required. The data-toggle could work eventually like the pass through in html helper but I don’t believe it does this now. Let me know if there is a way to accomplish this using the existing options. Maybe just the addition of some class name per element and the pass through idea we could make it more able to customize.

    SETH
    Computer Know How
    702 21st Street
    Brodhead, WI 53520
    Phone: 608.897.3777 ext 112
    Toll Free: 888.588.KNOW (5669) ext 112
    Fax: 608.897.3779
    Web: http://www.CompKnowHow.com

    I totally see it now and yes, that is super custom so I think that approach was the only way.

    signature0.jpg

    Luis F. Majano
    CEO
    Ortus Solutions, Corp
    www.ortussolutions.com

    ColdBox Platform: http://www.coldbox.org
    Linked In: http://www.linkedin.com/pub/3/731/483
    Blog: http://www.luismajano.com
    IECFUG Manager: http://www.iecfug.com

    Social: twitter.com/lmajano facebook.com/lmajano

    Well I did raise a ticket to allow for this, and it was made invalid. I wonder if before making a ticket invalid and a developer is not understanding, how about asking for more information as to the issue before making it invalid?

    Regards,
    Andrew Scott
    WebSite: http://www.andyscott.id.au/
    Google+: http://plus.google.com/113032480415921517411

    signature0.jpg

    LOL,

    I have no clue about that one, Can you resubmit it or talk about it how would you allow this?

    signature0.jpg

    Luis F. Majano
    CEO
    Ortus Solutions, Corp
    www.ortussolutions.com

    ColdBox Platform: http://www.coldbox.org
    Linked In: http://www.linkedin.com/pub/3/731/483
    Blog: http://www.luismajano.com
    IECFUG Manager: http://www.iecfug.com

    Social: twitter.com/lmajano facebook.com/lmajano

    signature0.jpg