Adapt complex dropline menu in wayfinder

11 Posts

oscar arzola Reply #1, 18 years, 3 months ago

Hi everybody, the wayfinder snippet its amazing, but i dont make a more complex dropline, maybe i dont understand good the idea.. could you help me, to adapt this drop line menu, to wayfinder..

http://www.cssplay.co.uk/menus/pro_dropline

I have already make this, example

http://www.muddydogpaws.com/development/wayfinder/examples/example-3.html

but i don´t understad how to make the first

rolleyes

:’(

1,024 Posts

Frank Reply #2, 18 years, 3 months ago

I just saw that menu yesterday and would like to use that one too. I have not got the knowledge to do that but hey maybe together we can figure it out. It is owrth a try, no?

As it is written on the CSS play site it is a combination of a dropdown and the dropline menu, if I recall well.

Both these menus are in assets/snippets/wayfinder/examples/cssplay.. So maybe combine this. Dont know but lets see. Hints and tips are welcome off course so heres the HTML/CSS of the above menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional dropline / dropdown menu </title>
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_dropline_dropdown.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.pro_linedrop {
height:36px;
width:742px;
background:url(line/blank_sepia.gif);
position:relative; 
font-family:arial, verdana, sans-serif; 
font-size:11px;
z-index:500;
}

.pro_linedrop .select {
margin:0; 
padding:0; 
list-style:none; 
white-space:nowrap;
}

.pro_linedrop li {
float:left;
background:url(line/blank_over_sepia.gif);
}

.pro_linedrop .select a {
display:block; 
height:36px; 
float:left; 
background: url(line/blank_sepia.gif); 
padding:0 0 0 15px; 
text-decoration:none; 
line-height:25px; 
white-space:nowrap; 
color:#ddd;
}

.pro_linedrop .select li.line a {color:#fc0;}

.pro_linedrop .select a b {
display:block; 
padding:0 30px 10px 15px; 
background:url(line/blank_sepia.gif) right top;
}

.pro_linedrop .select a:hover, 
.pro_linedrop .select li:hover a {
background: url(line/blank_over_sepia.gif); 
padding:0 0 0 15px;
line-height:27px;
cursor:pointer; 
color:#fff;
}

.pro_linedrop .select li.line a:hover, 
.pro_linedrop .select li.line:hover a {
color:#fc6;}

.pro_linedrop .select a:hover b, 
.pro_linedrop .select li:hover a b {
display:block; 
padding:0 30px 9px 15px; 
background:url(line/blank_over_sepia.gif) right top; 
cursor:pointer;
}

.pro_linedrop .sub {
display:none;
}
.pro_linedrop ul ul {display:none;}

/* IE6 only */
.pro_linedrop table {
border-collapse:collapse; 
margin:-1px; 
font-size:1em; 
width:0; 
height:0;
}

.pro_linedrop .sub {
margin:0; 
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:25px;
display:block; 
position:absolute;
float:left;
width:740px;
top:28px; 
left:0; 
text-align:center;
background:transparent url(line/transparent.gif);
border:1px solid #aaa;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a 
{display:block; height:25px; line-height:22px; float:left; background:transparent url(line/transparent.gif); padding:0 16px; margin:0; white-space:nowrap; color:#888;font-size:10px;}

.pro_linedrop .select :hover .sub li.subline a {color:#c00;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:20px; position:relative;}

.pro_linedrop .select :hover .sub li:hover > a {color:#000;}

.pro_linedrop .select :hover .sub :hover ul {padding:0; margin:0; list-style:none; display:block; width:112px; position:absolute; left:-1px; top:25px; border:1px solid #aaa; border-top:0; background:#fff;}

.pro_linedrop .select :hover .sub :hover ul li a {width:80px; text-align:left; height:20px; line-height:18px;}
.pro_linedrop .select :hover .sub :hover ul li a:hover {line-height:16px;}

</style>

</head>

<body>
<h1>Professional dropline / dropdown menu</h1>
<div class="pro_linedrop">
<ul class="select">
<li><a href="#nogo"><b>Home</b></a></li>
<li class="line"><a href="#nogo"><b>Products</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li class="subline"><a href="#nogo">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="#nogo">Nikon</a></li>
			<li><a href="#nogo">Minolta</a></li>
			<li><a href="#nogo">Pentax</a></li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li class="subline"><a href="#nogo">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="#nogo">Wide Angle</a></li>
			<li><a href="#nogo">Standard</a></li>
			<li><a href="#nogo">Telephoto</a></li>
			<li><a href="#nogo">Zoom</a></li>
			<li><a href="#nogo">Mirror</a></li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="#nogo">Flashguns</a></li>
		<li><a href="#nogo">Tripods</a></li>
		<li><a href="#nogo">Filters</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="line"><a href="#nogo"><b>Services</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li><a href="#nogo">Printing</a></li>
		<li><a href="#nogo">Photo Framing</a></li>
		<li><a href="#nogo">Retouching</a></li>
		<li><a href="#nogo">Archiving</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="line"><a href="#nogo"><b>Contacts</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub rt">
		<li><a href="#nogo">Support</a></li>
		<li class="subline"><a href="#nogo">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
			<li><a href="#nogo">USA</a></li>
			<li><a href="#nogo">Canadian</a></li>
			<li><a href="#nogo">Australian</a></li>
			<li><a href="#nogo">Asian</a></li>
			<li><a href="#nogo">South American</a></li>
			</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
		</li>
		<li><a href="#nogo">Buying</a></li>
		<li><a href="#nogo">Photographers</a></li>
		<li><a href="#nogo">Stockist</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="line"><a href="#nogo"><b>Shop</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub rt">
		<li><a href="#nogo">Online</a></li>
		<li><a href="#nogo">Catalogue</a></li>
		<li><a href="#nogo">Mail Order</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Privacy Policy</b></a></li>
</ul>
</div>

<h3>Copyright © 2007 CSS play - Stu Nicholls</h3>
</body>
</html>

Frank.

2,310 Posts

bunk58 Reply #3, 18 years, 3 months ago

I completed a version of a the simple CSS Play Dropline a while ago.
If I find the time over this weekend I’ll try to achieve the Pro Dropline version.
Don’t promise it to anyone in the meantime wink

11 Posts

oscar arzola Reply #4, 18 years, 3 months ago

Thanks a lot, but, the css i can really understand, but not the logic at the Wayfinder constrain the recursive tree, no matters its useful laugh

4,205 Posts

dev_cw Reply #5, 18 years, 3 months ago

It can be done with using custom outterTpl, rowTpl, innerTpl, parentRowTpl and innerRowTpl. You will also need to include some class attributes to get the correct classes working. This almost works. I was unable to get the current level to default to open, if someone could work out that part it will be complete. Note: don’t forget to edit your css to point the images to the correct path.

EDIT: Added the activeParentRowTpl parameter and edited the parentRow tpls...

outterTpl:

<div class="nav">
<div class="table">
    [+wf.wrapper+]
</div>
</div>

rowTpl:

<ul class="select">
    <li><a href="#nogo"><b>[+wf.linktext+]</b></a></li>
</ul>

parentRowTpl:

<ul class="select">
<li><a href="[+wf.link+]"><b>[+wf.linktext+]</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
    [+wf.wrapper+]
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>>

innerTpl:

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

parentRowHereTpl:

<ul class="current">
<li><a href="[+wf.link+]"><b>[+wf.linktext+]</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
    [+wf.wrapper+]
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

activeParentRowTpl:

<ul class="current">
<li><a href="[+wf.link+]"><b>[+wf.linktext+]</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
    [+wf.wrapper+]
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

innerRowTpl:

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

innerHereTpl:

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

I put the CSS in a chunk and called it with the cssTpl parameter but for a final project I would add the CSS to an external file.

[[Wayfinder? &startId=`0` &level=`2` &outerTpl=`xxOutter` &rowTpl=`xxRowTpl` &innerTpl=`xxInnerTpl` &innerRowTpl=`xxInnerRowTpl` &innerHereTpl=`xxInnerHereTpl` &parentRowHereTpl=`xxParentRowHereTpl` &parentRowTpl=`xxParentRowTpl` &cssTpl=`xxCSS` &hereClass=`sub_show` &activeParentRowTpl=`xxActiveParentRowTpl`]]

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

1,024 Posts

Frank Reply #6, 18 years, 3 months ago

so correct me if i am wrong.
Should this show the menu with the third level dropdown. Without however the current level to open?

Because I dont get the third level dropdown. Hope someone will be able to figure this one out, because I think its a realy nice menu.

4,205 Posts

dev_cw Reply #7, 18 years, 3 months ago

I edited the chunks above to make it work including the active parent and the selected subs.
As for the 3rd level, I don’t think that this menu is built to go beyond the 2nd level (top and sub).

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

1,024 Posts

Frank Reply #8, 18 years, 3 months ago

Uhps,

my mistake, I was thinking about this menu:

http://www.cssplay.co.uk/menus/pro_dropline_dropdown.html

Have been reading things wrong, sorry.
However your chunks with that CSS seem to go almost to the end. Just missing the last dropdown.