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?
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="*")>.
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.
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.
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.
Inability to set class on the anchor tags (ie: ‘class=“dropdown-toggle”’)
Inability to set data-toggle on the anchor tags (ie: ‘data-toggle=“dropdown”’)
Inability to add additional code after anchor tags (ie: ‘’)
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 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
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?
