Codrops Horizontal drop down menu with wayfinder

Hi !

i'm trying to make this menu with wayfinder : http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/

Did someone tried the same ?

By now, i've done this :

Wayfinder call :



parentRowTpl :



innerTpl :



innerRowTpl :




So, first(parent) level is working, i mean when i click on a parent link, it opens the blue area. The rest is not working
i can figure that i have to call the other elements in another way.


here is my document architecture in modx manager :


Level 1 (opens the blue area, with no link)
¦
¦----Level 2 (only h4 title on the blue square)
¦
¦----Level 3 (link to a page)


thanks for your help, i keep coding, and come back soon

Troubadour [ed. note: troubadour last edited this post 10 years, 2 months ago.]

I think you have a problem with your innerRowTpl, should be:

thanks !
it takes me a step further ! great !

so what i put in innerTpl, you placed it in innerRowTpl.
what do i have to put in innerTpl?

Actually, I was wrong, sorry about that.
I would try:

parentRowTpl



innerTpl



and use your innerRowTpl.

Hope it works, I didn't test it.

wonderful !
just a problem, it doesn't display the <h4> title of level 2!

Maybe use the above innerTpl as a &categoryFoldersTpl, and on the category resources, change the template to blank, or set the link attributes field to rel="category".

You're my God today, i owe you a hand, or a beer

so here is the complete solution :

be sure to set the link attributes field to rel="category" for "<h4>"titles of the exemple

wayfinder call :

<nav id="cbp-hrmenu" class="cbp-hrmenu">[[Wayfinder? &startId=`[[*id]]` &parentRowTpl=`parentRow` &categoryFoldersTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]</nav>

chunks :

parentRow



innerTpl



innerRowTpl




Thanks again Nir Zohar !
I hope it can help somebody else !

Glad it helped

Hi.
Does not want the menu to work. Help please. The second day I think and no ideas.
Head

<meta charset="[[++modx_charset]]">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>[[++site_name]] - [[*pagetitle]]</title>
<meta name="description" content="[[*description]]"/>
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<!-- Favicon Off -->
<!-- CSS -->
<!-- Bootstrap CSS -->
<link href="[[++assets_url]]components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="[[++assets_url]]templates/bootstrap/css/style.css" rel="stylesheet" media="screen">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap CSS Off -->
<!-- FancyBox CSS -->
<link rel="stylesheet" href="[[++assets_url]]templates/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<link rel="stylesheet" href="[[++assets_url]]templates/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<link rel="stylesheet" href="[[++assets_url]]templates/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<!-- FancyBox CSS Off -->
<!-- Mega Menu -->
<link rel="stylesheet" href="[[++assets_url]]templates/bootstrap/css/default.css" type="text/css">
<link rel="stylesheet" href="[[++assets_url]]templates/bootstrap/css/component.css" type="text/css">
<!-- Mega Menu Off -->
<!-- CSS Off -->
<!-- Script -->
<!-- jQuery -->
<script src="[[++assets_url]]components/bootstrap/vendor/js/jquery.modern.js"></script>
<!-- jQuery Off -->
<!-- FancyBox -->
<script type="text/javascript" src="[[++assets_url]]templates/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript" src="[[++assets_url]]templates/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="[[++assets_url]]templates/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript" src="[[++assets_url]]templates/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<!-- FancyBox Off -->
<!-- Mega Menu -->
<script src="[[++assets_url]]templates/bootstrap/js/cbpHorizontalMenu.min.js"></script>
<script src="[[++assets_url]]templates/bootstrap/js/modernizr.custom.js"></script>
<!-- Mega Menu Off -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="[[++assets_url]]components/bootstrap/vendor/js/html5shiv.js"></script>
<script src="[[++assets_url]]components/bootstrap/vendor/js/respond.min.js"></script>
<![endif]-->
<!-- Script Off -->
<base href="[[!++site_url]]" />

Navbar

<div class="navbar navbar-inverse navbar-fixed-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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="[[++site_url]]"><img src="[[++assets_url]]templates/bootstrap/img/logo.png" width="90" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
[[Wayfinder?
&startId=`0`
&parentRowTpl=`parentRowTpl`
&categoryFoldersTpl=`innerTpl`
&innerRowTpl=`innerRowTpl`
]]
</nav>
</div><!--/.nav-collapse -->
</div>
</div>

innerRowTpl

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

innerTpl

<div>
<h4>[[+wf.linktext]]</h4>
<ul>
[[+wf.wrapper]]
</ul>
</div>

parentRowTpl

<li><a href="[[+wf.link]]">[[+wf.linktext]]</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
[[+wf.wrapper]]
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>

Hi louveblr !

Do you have a live example so we can check it out ?