Wayfinder with Bootstrap

☆ A M B ☆
894 Posts

benmarte Reply #11, 10 years, 7 months ago

@eladnova just add this line of css some where on your page after you load bootstrap.

.dropdown:hover>ul{display:block}

That will show all uls that are a child of any li with the class dropdown and display it on hover.

Hope that helps, good luck.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

384 Posts

eladnova Reply #12, 10 years, 7 months ago

Cheers benmarte. Will try it later:)

...

1 Posts

erloko Reply #13, 10 years, 5 months ago

Quote from: rx2 at Nov 19, 2013, 10:46 PM

My Wayfinder call:

[[Wayfinder?
    &startId=`0`
    &level=`0`
    &outerTpl=`mmouterTPL`
    &rowTpl=`mmrowTPL`
    &rowClass=dropdown 
    &hereClass=active
]]

The mmrowTPL (you have to have the Switch Extra installed):

[[!switch?
    &get=`[[+isfolder]]`
    &c1=`0` &do1=`<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>`
    &c2=`1` &do2=`<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">[[+wf.linktext]] <b class="caret"></b></a>
    [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]
    </li>`
    &default=`<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>`
]]

My little fix for mmrowTPL

<li [[+wf.classes]]>
    <a class="dropdown-toggle" [[!switch? &get=`[[+isfolder]]` &c1=`1` &do1=`data-toggle="dropdown"` &default=``]] href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]  
     [[!switch? &get=`[[+hasChildren]]` &c1=`1` &do1=`<b class="caret"></b>` &default=``]] 
    </a>
    [[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]
</li>

this makes being a container does not have the ability to click (title), on the contrary and having children can follow a link.

Regards! [ed. note: erloko last edited this post 10 years, 5 months ago.]

43 Posts

aaron4osu Reply #14, 10 years, 3 months ago

Quote from: phijui at Dec 08, 2013, 04:24 AM

You can do it with one wayfinder call. Lighter than the previous solution in the resource cache

Wayfinder call:

[[Wayfinder? &startId=`0` &level=`2` &outerTpl=`NavbarOuter` &rowTpl=`NavbarRow` &activeParentRowTpl=`NavbarActiveParentRow` &parentRowTpl=`NavbarParentRow` &innerTpl=`NavbarInner` &innerRowTpl=`NavbarInnerRow` &firstClass=`` &lastClass=`` &removeNewLines=`1`]]

NavbarOuter:

<ul class="nav navbar-nav">[[+wf.wrapper]]</ul>

NavbarRow:

<li[[+wf.classes]]><a href="[[+wf.link]]" title="[[+wf.title]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>[[+wf.wrapper]]

NavbarParentRow:

<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[+wf.title]]">[[+wf.linktext]] <b class="caret"></b></a>[[+wf.wrapper]]</li>

NavbarActiveParentRow:

<li class="dropdown active"><a class="dropdown-toggle" data-toggle="dropdown" href="#" title="[[+wf.title]]">[[+wf.linktext]] <b class="caret"></b></a>[[+wf.wrapper]]</li>

NavbarInner:

<ul class="dropdown-menu">[[+wf.wrapper]]</ul>

NavbarInnerRow:

<li class="divider"></li>
<li[[+wf.classes]]><a href="[[+wf.link]]">[[+wf.linktext]]</a>

With a custom css rule:

.dropdown-menu li.divider:first-child {
  display: none;
}

</li[[+wf.classes]]></li[[+wf.classes]]>

I tried this, but can't seem to get it to work. I'm using MODX Revolution 2.2.14-pl (traditional). I have copied and pasted the above way finder call and it's chunks 3 times to double check that I have the same thing.

Here is the html that it is outputting along with some comments I put in to show what is missing:

<nav class="collapse navbar-collapse bs-navbar-collapse pull-right"role="navigation">  
	<ul class="nav navbar-nav">
		<li><!-- missing class="dropdown"-->
			<a href="index.php?id=3" title="Insurance">Insurance</a>
			<!-- missing href="#" class="dropdown-toggle" data-toggle="dropdown"-->

			<ul class="dropdown-menu">
				<li class="divider"></li>
				<!-- href="#" class="dropdown-toggle" data-toggle="dropdown"-->
				<li><a href="index.php?id=2">Auto</a></li><li class="divider"></li>
				<li><a href="index.php?id=5">Auto2</a></li>
			</ul>
		</li>

		<li>
			<a href="index.php?id=4" title="Compare Rates">Compare Rates</a>
		</li>
	</ul>
</nav>

I'm really stuck on this and don't know what to do.

5 Posts

ezersky Reply #15, 9 years ago

Bootstrap 3 navbar menu

[[Wayfinder?                   
  &startId=`0`
  &level=`2`
	&outerClass=`nav navbar-nav`
	&innerClass=`dropdown-menu`
	 &hereClass=`active`
	&rowTpl=`menuNavbarRow`
	&innerRowTpl=`menuNavbarSubmenu`
]]

Chunk menuNavbarRow

<li class="[[+wf.classnames]][[+wf.isfolder:is=`1`:then=` dropdown`]]">
	<a href="[[+wf.isfolder:is=`1`:then=`#`:else=`[[+wf.link]]`]]"
    	title="[[+wf.title]]" [[+wf.isfolder:is=`1`:then=`class="dropdown-toggle" data-toggle="dropdown"`]] 
    	[[+wf.attributes]]>[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=`<b class="caret"></b>`]]
    </a>
	[[+wf.wrapper]]
</li>

Chunk menuNavbarSubmenu

<li class="dropdown-submenu"><a href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

13 Posts

Michael Leipold-Haas Reply #16, 8 years, 10 months ago

Thats cool ezersky – exactly what I was searching for! Thank you so much.

13 Posts

breno785au Reply #17, 8 years, 8 months ago

Quote from: ezersky at Sep 10, 2015, 07:10 PM

Bootstrap 3 navbar menu

[[Wayfinder?                   
  &startId=`0`
  &level=`2`
	&outerClass=`nav navbar-nav`
	&innerClass=`dropdown-menu`
	 &hereClass=`active`
	&rowTpl=`menuNavbarRow`
	&innerRowTpl=`menuNavbarSubmenu`
]]

Chunk menuNavbarRow

<li class="[[+wf.classnames]][[+wf.isfolder:is=`1`:then=` dropdown`]]">
	<a href="[[+wf.isfolder:is=`1`:then=`#`:else=`[[+wf.link]]`]]" title="[[+wf.title]]" [[+wf.isfolder:is="`1`:then=`class="dropdown-toggle"" data-toggle="dropdown" `]]="" [[+wf.attributes]]="">[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=`<b class="caret"></b>`]]
    </a>
	[[+wf.wrapper]]
</li>

Chunk menuNavbarSubmenu

<li class="dropdown-submenu"><a href="[[+wf.link]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Hi, this solution works best so far, with the other solutions on previous pages Wayfinder wasn't picking up CSS for some reason.
But I still have some issues if I could get help from someone? The dropdown doesn't work, I suspect it's because there is no sub-menu items linked - I've created weblinks in the document tree because the submenu items are to link to an external site, how do I add them?

And two, the menu in mobile is constantly showing, it's not hiding like it should.

Any help would be greatly appreciated.
Thanks all for your awesome help!

9 Posts

mick2470 Reply #18, 7 years, 5 months ago

Quote from: ezersky at Sep 10, 2015, 02:10 PM

Bootstrap 3 navbar menu

[[Wayfinder?                   
  &startId=`0`
  &level=`2`
	&outerClass=`nav navbar-nav`
	&innerClass=`dropdown-menu`
	 &hereClass=`active`
	&rowTpl=`menuNavbarRow`
	&innerRowTpl=`menuNavbarSubmenu`
]]

Chunk menuNavbarRow

<li class="[[+wf.classnames]][[+wf.isfolder:is=`1`:then=` dropdown`]]">
	<a href="[[+wf.isfolder:is=`1`:then=`#`:else=`[[+wf.link]]`]]" title="[[+wf.title]]" [[+wf.isfolder:is="`1`:then=`class="dropdown-toggle"" data-toggle="dropdown" `]]="" [[+wf.attributes]]="">[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=`<b class="caret"></b>`]]
    </a>
	[[+wf.wrapper]]
</li>

Chunk menuNavbarSubmenu

<li class="dropdown-submenu"><a href="[[+wf.link]]" [[+wf.attributes]]="">[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Thanks for this @ezersky, worked perfectly!