Help with a complex Wayfinder menu please

197 Posts

jonahnaylor Reply #1, 8 years, 11 months ago

Hi I'm trying to recreate a fairly complex looking menu with Wayfinder, would anybody be able to help or suggest how to recreate it please?

Here is the original:

			<nav class="navbar navbar-default">
				<div class="navbar-header nav_2">
					<button type="button" class="navbar-toggle collapsed navbar-toggle1" data-toggle="collapse" data-target="#bs-megadropdown-tabs">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div> 
				<div class="collapse navbar-collapse" id="bs-megadropdown-tabs">
					<ul class="nav navbar-nav ">
						<li class=" active"><a href="index.html" class="hyper "><span>Home</span></a></li>	
						<li class="dropdown ">
							<a href="#" class="dropdown-toggle  hyper" data-toggle="dropdown" ><span>Category<b class="caret"></b></span></a>
								<ul class="dropdown-menu multi">
									<div class="row">
										<div class="col-sm-4">
											<ul class="multi-column-dropdown">
			
												<li><a href="page1.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page2.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page3.html"> <i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page4.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
										
											</ul>
										
										</div>
										<div class="col-sm-4">
											<ul class="multi-column-dropdown">
												<li><a href="page5.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page6.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page7.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page8.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
										
											</ul>						
										</div>
										<div class="col-sm-4 someclass">
											<a href="page9.html"><img src="[[++base_url]]assets/template/images/menu1.jpg" class="img-responsive" alt=""></a>
										</div>
										<div class="clearfix"></div>
									</div>	
								</ul>
						</li>
						<li class="dropdown">
								<a href="#" class="dropdown-toggle hyper" data-toggle="dropdown" ><span> Personal Care <b class="caret"></b></span></a>
								<ul class="dropdown-menu multi multi1">
									<div class="row">
										<div class="col-sm-4">
											<ul class="multi-column-dropdown">
												<li><a href="page10.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text </a></li>
												<li><a href="page11.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page12.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page13.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
										
											</ul>
											
										</div>
										<div class="col-sm-4">
											
											<ul class="multi-column-dropdown">
												<li><a href="page14.html"> <i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page15.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page16.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
												<li><a href="page17.html"><i class="fa fa-angle-right" aria-hidden="true"></i>Link text</a></li>
										
											</ul>
											
										</div>
										<div class="col-sm-4 someclass">
											<a href="page18.html"><img src="[[++base_url]]assets/template/images/menu2.jpg" class="img-responsive" alt=""></a>
										</div>
										<div class="clearfix"></div>
									</div>	
								</ul>
						</li>
						<li><a href="about.html" class="hyper"><span>About</span></a></li>
						<li><a href="contact.html" class="hyper"><span>Contact Us</span></a></li>
					</ul>
				</div>
			</nav>

Any help at all is really appreciated.

Yorkshire UK based hosting provider: https://www.simulant.uk

932 Posts

LK Reply #2, 8 years, 11 months ago

From the markup it doesn't look like there's anything too complex about it but it would be easier and more simple if you just did your styling with CSS without the reliance of bootstrap classes.

ie: give your nav an id and then styling everything off of that ID.

Otherwise you'll have to look into using the different templates properties that wayfinder/pdotools has to offer.

https://www.youtube.com/watch?v=8OaHzmrAmU4

■ email: [email protected] | ■ website: https://alienbuild.uk

The greatest compliment you can give back to us, is to spend a few seconds leaving a rating at our trustpilot: https://uk.trustpilot.com/review/alienbuild.uk about the service we provided. We always drop mention of services offered by businesses we've worked with in the past to those of interest.

197 Posts

jonahnaylor Reply #3, 8 years, 11 months ago

Hi thanks for the reply, unfortunately though I'm fitting this menu to a premade template with its own styles etc already set up.

So I'm trying to make outerTpl, innerTpl etc etc to give the above output but so far not managing to get it quite right...

I have:

outerTpl -

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

rowTpl -

<!-- rowTpl -->
<li[[+wf.id]][[+wf.classes]]>
<a href="[[+wf.link]]" class="hyper" title="[[+wf.title]]" [[+wf.attributes]]><span>[[+wf.linktext]]</span></a>
[[+wf.wrapper]]
</li>

innerRowTpl -

<!-- innerRowTpl -->
<li><a href="[[+wf.link]]"><i class="fa fa-angle-right" aria-hidden="true"></i>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>

Which nearly works but shows the dropdown menus all the time currently and doesn't give the 3 column style to the dropdown either...

Thanks again for any help or tweaks to improve what I have already.

Yorkshire UK based hosting provider: https://www.simulant.uk

140 Posts

ilja-web Reply #4, 8 years, 9 months ago

You should look at PdoMenu, more options there..