Wayfinder Drop-Down Menu

147 Posts

djembe Reply #1, 18 years, 3 months ago

I am gearing up to create a basic Drop-down menu (when the user mouses over a top-level item, all associated child items display below it). Can this be done by working with just the native Wayfinder parameters, or do I need to invoke some external scripting to accomplish the task?

Thanks.

Marconi

623 Posts

cbaone Reply #2, 18 years, 3 months ago

Obviously, you’ll have to style it to your liking, but Wayfinder is quite capable of doing that natively. Look here:
http://www.muddydogpaws.com/development/wayfinder/examples/example-2.html

It may take you a little time, but it’s all there, plus plenty of other similar topics in the forums - you’ll just have to look. Good luck.

The MODx has you...
Utah Web Design

147 Posts

djembe Reply #3, 18 years, 3 months ago

cbaone -

thanks for the info. i was looking through the forums and saw various instances in which people seemed to turn to external code and products in order to create their drop-down menus, so it just was not clear to me that i could do it all within the native wayfinder functionality. anyway, i will see what i can work up.

- marconi

623 Posts

cbaone Reply #4, 18 years, 3 months ago

Here’s a sample from a site I did last year:

[!Wayfinder? &startId=`0` &level=`2` &parentRowTpl=`wfParentRowOne` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow` !]

And here’s all the templates I used:

&parentRow:
<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
<table><tr><td>
[+wf.wrapper+]
</td></tr></table>
<!--[if lte IE 6]></a><![endif]-->
</li>

&outerTpl:
<div class="menu">  
  <ul>
        [+wf.wrapper+]
    </ul>
</div>

&innerTpl:
<ul class="sub">[+wf.wrapper+]</ul>

&rowTpl:
<li><a href="[+wf.link+]"  title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>

And here’s the CSS:

div.menu {
	background: url(../images/navbg.gif) repeat-x top left;
	width: 670px;
	height: 24px;
	z-index: 999;
}
 
.menu {
font-family: verdana, sans-serif;  
position:relative; 
font-size:0.85em;
z-index:100;
}
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
.menu ul li {
float:left;
position:relative;
}
.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#fff;  
height:24px; 
color:#fff; 
border-right:1px solid #be2f1a; 
border-left:1px solid #6e170a;
padding:0 15px; 
line-height:24px;
float: left;
}
* html .menu ul li a, .menu ul li a:visited {
}
.menu ul li ul {
display: none;
}
table {
margin:-1px; 
border-collapse:collapse;
font-size:1em;
}

/* specific to non IE browsers */
.menu ul li:hover a,
.menu ul li a:hover {
color:#fff;
background: #cc0000;
}

.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:24px;
left:0; 
width:150px;
border-right: none;
}
* html .menu ul li a:hover ul {
margin-top:0;
marg\in-top:0px;
}

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {
visibility:hidden; 
position:absolute; 
height:0; 
width:0;
}

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
background:#0072bc; 
color:#fff; 
height:auto; 
line-height:22px; 
padding:0 10px; 
width:129px;
border-right: none;
border-left: none;
}
* html .menu ul li a:hover ul li a {
width:150px;
w\idth:129px;
}

.menu ul li:hover ul li a.drop,
.menu ul li a:hover ul li a.drop {
background:#003399 url(drop.gif) bottom right no-repeat;
}

.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#003370; 
color:#fff;
}

.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {
visibility:visible; 
position:absolute; 
left:150px; 
top:0;
width:150px;
}

.menu ul li:hover ul li:hover ul.left,
.menu ul li a:hover ul li a:hover ul.left {
left:-150px;
}

Hope that helps.

The MODx has you...
Utah Web Design

147 Posts

djembe Reply #5, 18 years, 3 months ago

cbaone -

thanks again very much for all your help. i actually went to the MuddyDogPaws.com site, and imported into my site all of the code associated with the particular menu you linked to earlier (example 2). i placed the call in my main site template and then created chunks to correspond to the 5 templates that are listed with the example. the code i pasted into the chunks came directly from the MuddyDogPaws site. the resulting menu is simply a mess however; for one, the children are displaying by default, rather than being hidden. of course, i do not have the same exact page structure as appears in the sample, but i figured that as long as i am dealing with a document structure that does not go beyond 1 child level, i should be fine since this matches the hierarchy structure in the sample menu. any idea where i might be going wrong here?

- marconi

623 Posts

cbaone Reply #6, 18 years, 3 months ago

Marconi,
I’m not the guru around here, but if you paste your exact Wayfinder call, and the chunks you’re using that will go a long way in sorting out your issue. To help fix your issue, we need to see what’s going on.

The MODx has you...
Utah Web Design

147 Posts

djembe Reply #7, 18 years, 3 months ago

Thanks again cbaone. I have already wiped out all the code I was previously using (which, again, was literally just copied and pasted directly from this example: http://www.muddydogpaws.com/development/wayfinder/examples/example-2.html ), but as I get back into trying to construct a new drop-down menu, I will post code to the forums as needed.

Marconi