Trouble with multi-level menu with Bootstrap

98 Posts

jimsheppard Reply #1, 7 years, 2 months ago

I'm having trouble getting beyond a level two in what I would like to be a 4 level drop-down menu with bootsrap, My Navbar chunk is below...

<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="/">[[++site_name]]</a>
		</div>
		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
				[[pdoMenu?
					&startId=`0`
					&level=`4`
					&tplParentRow=`@INLINE
					<li class="[[+classnames]] dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" [[+attributes]]>[[+menutitle]]<b class="caret"></b></a>
						<ul class="dropdown-menu">[[+wrapper]]</ul>
					</li>`
					&tplOuter=`@INLINE [[+wrapper]]`
				]]
			</ul>
		</div><!--/.nav-collapse -->
	</div>
</div>

Any help or suggestions to get this to work would be appreciated.

Thanks

Give a man the answer, and he’ll only have a temporary solution. Teach him the principles that led you to that answer, and he will be able to create his own solutions in the future.

4 Posts

tempter Reply #2, 6 years, 5 months ago

have you found the solution? I have the same problem

98 Posts

jimsheppard Reply #3, 6 years, 5 months ago

Quote from: tempter at Oct 21, 2017, 02:55 PM

have you found the solution? I have the same problem

No, but after a lot of googling I discovered that the problem lies with Bootstrap 3. So I re-tooled our site to only two levels by moving things around and using non-menu-ed links in some areas. Not what I had intended and a lot of work but in the end everyone is happy with the result.

Give a man the answer, and he’ll only have a temporary solution. Teach him the principles that led you to that answer, and he will be able to create his own solutions in the future.

19 Posts

Evan Reply #4, 5 years, 9 months ago

I found a workable solution to this problem in this thread: https://forums.modx.com/thread/101884/pdomenu-different-tamplates-for-each-level

Basically, use the [[+level]] attribute to define different templates for &tplParentRow. For the site I am working on, the first pass at this is to simply have anything below level 1 render very simply and then just give it a bit of style in the CSS. In other words, all parent rows below the top level have the Bootstrap classes that cause dropdown behavior removed, only the top level has those classes. Theoretically one could use this approach to then use the dropdown-submenu class of Bootstrap 3 to do fancier stuff.

My site: http://www.chocolatebunnyproductions.com/events/rocky-mountain-race-series/bike-granby-ranch

I believe to use this approach, you have to define a chunk for &tplParentRow as it won't work (?) with the @INLINE template. The chunk I used looks like this:

[[+level:is=`1`:then=`
					<li class="[[+classnames]] dropdown" id="menu[[+id]]-level[[+level]]">
						<a href="[[+wf.link]]" class="dropdown-toggle" data-toggle="dropdown" data-target="#menu[[+id]]" [[+attributes]]>[[+menutitle]]<b class="caret"></b></a>
						<ul class="dropdown-menu">[[+wrapper]]</ul>
					</li>
`:else=`
					<li class="[[+classnames]]" id="menu[[+id]]-level[[+level]]">
						<a href="[[+wf.link]]" [[+attributes]]>[[+menutitle]]</a>
						<ul>[[+wrapper]]</ul>
					</li>
`]]

And the pdoMenu snippet call looks like this, pretty standard here:

				[[pdoMenu?
					&startId=`0`
					&level=`3`
					&templates=`-5,-7`
					&tplParentRow=`parentRowTpl`
					&tplOuter=`@INLINE [[+wrapper]]`
				]]

The older I get, the faster I was.

http://www.evanchute.com/