Wayfinder with Bootstrap

13 Posts

ross88 Reply #1, 11 years, 11 months ago

After exhausting Google (including all the Russian pages) I really cannot get wayfinder to work with my bootstrap navigation.

    <div class="navbar navbar-default navbar-fixed-top">
		<div class="col-sm-7">
        <div class="navbar-header">
		
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/"><img src="images/Weaver.png"></a>
		  </div>
        </div>
		<div class="col-sm-5">
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/">Home</a></li>
            <li><a href="travel.html">Travel Info</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="#">Val Thorens</a></li>
				</ul>
			</li>
			<li><a href="photos.html">Photo Album</a></li>
            <li><a href="#contact">Holiday</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
		</div>
    </div><!--/.nav-collapse -->

Ignore the silly href links as this was my html test code before porting to modx.

Is what I'm aiming for; got pretty annoyed and deleted my wayfinder code so I cannot show you what I currently have. It works great until i need to add drop downs, that is the problems.

Any push in the right direction would be greatly appricated.

Ross.

☆ A M B ☆
721 Posts

rx2 Reply #2, 11 years, 11 months ago

My Wayfinder call:

[[Wayfinder?
    &startId=`0`
    &level=`0`
    &outerTpl=`mmouterTPL`
    &rowTpl=`mmrowTPL`
]]

The mmouterTPL:

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

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></li>`
    &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></li>`
]]

The key here is to see if the current resource is a folder. If not, we just use a regular link syntax:

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

If the resource is a folder, then it has children, and the resource itself is not clickable for navigation, only to open up the drop down menu (which works well with mobile devices of course) and is the way Bootstrap 3 works.:

<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>

Note that we have another Wayfinder call there to create the submenu:

[[Wayfinder?&startId=`[[+wf.docid]]`&outerTpl=`mminnerTPL`&rowTpl=`mminnerrowTPL`]]

Note the use of &startId=`[[+wf.docid]]`. This ensures that the starting parent resource for this call is the current resource, so that it shows it's children.

The mminnerTPL:

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

The mminerrrowTPL:

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

13 Posts

ross88 Reply #3, 11 years, 11 months ago

You sir, are a god.

Worked perfectly, I think I was getting close, but I wasn't looking at the Switch extra and that could have been my downfall.

Many Thanks.

☆ A M B ☆
721 Posts

rx2 Reply #4, 11 years, 11 months ago

Yes, there are other conditional extras out there such as If but I found Switch good for this case. It was indeed a bit of a mind job and took me awhile to come up with a workable solution.

384 Posts

eladnova Reply #5, 11 years, 11 months ago

Do you have a live URL of the working solution? Would love to see something in action using this Wayfinder call

...

13 Posts

ross88 Reply #6, 11 years, 11 months ago

http://www.weaverski.co.uk/

The site is live but not finished, Wayfinder works wonderfully, just need some styling in my drop downs now.

☆ A M B ☆
100 Posts

Daniel Melo Reply #7, 11 years, 11 months ago

@rx2, thank you very much for this code, I was in need of this too!

----
Daniel Melo

2 Posts

phijui Reply #8, 11 years, 11 months ago

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]]</li>

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></li>

With a custom css rule:

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

3 Posts

zooba Reply #9, 11 years, 9 months ago

Hi rx2 and others,
I have a slightly more complicated menu for a site I'm working on.

I've followed rx2 code and got the basics working, however I need help to expand this a little further if possible.

Attached is a screenshot for you to quickly see what I'm after. I have the html coded below ready to setup in Modx.

So the basics I have working. Now I need to expand on the code that pulls in the drop down menu to look at the site tree and bring back second level (Advice,Investment,Services) as titles, then display the sections within each second level.

Please can anyone help me to get this working please, and point me in the right direction. I'm sure I need to expand/ code more inside mminnerTPL to pull in the extra html to handle but not sure how to.

Thank you guys!

Financial Management
Advice
- Thinking about investment
- Seeking advice
- Thinking about retirement

Investment
- Investment Advice
- Wealth Management
- Rebalancing/ Fund Switch

Services
- Our service agreement
- Trustees
- Fee Agreement

Investment Management
Investment
- Thinking about investment
- Seeking advice
- Thinking about retirement

Portfolios
- Portfolio 1
- Portfolio 2
- Portfolios 3

Services
- Our service agreement
- Trustees
- Fee Agreement

etc...

<nav class="navbar navbar-default hidden-xs" role="navigation">
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav"> 
		<li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Financial Advice</a>
              <div class="dropdown-menu multi-column">
                <div class="row">
                    <div class="col-sm-4 col-md-4">
                    	<span class="subnavheading">Advice</span>
                        <ul class="dropdown-menu">
                            <li><a href="#">Seeking Independent Advice</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4 col-md-4">
                    	<span class="subnavheading">Investment</span>
                        <ul class="dropdown-menu">
                            <li><a href="#">Investment Advice</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4 col-md-4">
                    	<span class="subnavheading">Services</span>
                        <ul class="dropdown-menu">
                            <li><a href="#">Our Service Agreement</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Qualifying Workplace Pensions</a>
              <div class="dropdown-menu multi-column">
                <div class="row">
                    <div class="col-sm-4 col-md-4">
                    	<span class="subnavheading">Advice</span>
                        <ul class="dropdown-menu">
                            <li><a href="#">Seeking Independent Advice</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4 col-md-4">
                    	<span class="subnavheading">Investment</span>
                        <ul class="dropdown-menu">
                            <li><a href="#">Investment Advice</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-4 col-md-4">
                    	<span class="subnavheading">Services</span>
                        <ul class="dropdown-menu">
                            <li><a href="#">Our Service Agreement</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
  </div><!-- /.navbar-collapse -->

Regards
Jordan

384 Posts

eladnova Reply #10, 11 years, 9 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

Hi phijui

Thanks for sharing that. Works beautifully for me.
Did you come across any guidelines for triggering the drop down on MouseOver instead of on click?

...