next »

[ersaurabh101]

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


I want to implement this menu
http://www.muddydogpaws.com/development/wayfinder/examples/example-1.html


Please guide me in steps. What knowlege i need is -

where to copy what ? i mean i dont know what to do with

&parentRowTpl=`cssplay_parentRow`

Is this the name of chuck ?? and in this chuck do i have to copy the code ?

but page is showing an odd result, see this
http://cookasite.com/15j/modx/index.php?id=62

[sharkbait]

please don't double post http://modxcms.com/forums/index.php/topic,45075

[ersaurabh101]

i am so sorry, by mistake i did.

[sharkbait]

no worries

[ersaurabh101]

can you spare a minute to help me on my issue, Sir ?

[sharkbait]

where to copy what ? i mean i dont know what to do with
&parentRowTpl=`cssplay_parentRow`
Is this the name of chuck ?? and in this chuck do i have to copy the code ?

exactly. in your manager go to "Elements" -> "Manage Elements" -> "Chunks" -> "New Chunks" -> call your chunk e.g. "cssplay_parentRow" and copy and paste the code in the text area -> save

then place the Wayfinder Snippet call in your template

[ersaurabh101]

I have 2 questions

Q1> Do i have to write anywhere this statement ?

&parentRowTpl=`cssplay_parentRow`


Q2> For next, i will create another new chunk naming cssplay_outer

and rest will do the same for all..

am i right

[sharkbait]

A1> this will then be referenced in your wayfinder call:

Code:

[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]

A2> yes

[ersaurabh101]

not working, check this

http://cookasite.com/15j/modx/index.php?id=62

i have placed the snippet call in the template and did what was required for chucks..

if u want i can give you my login/password

[sharkbait]

okay, here you go (no styling other than for the menu):
http://cookasite.com/15j/modx/index.php?id=63

1) i created a new template, called it "newTemplate" ( just copy and pasted the minimal template and deleted its own css reference and wayfinder call )

2) placed your wayfinder call in the template:

Code:

[[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]]

3) copied the dropdown css code in the header ( a quick fix because i can't upload the css files on your server -> your files should be here: http://cookasite.com/15j/modx/assets/templates/wayfinder/dropdown.css ):

Code:

/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:2px 0 100px 0; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

for IE:

Code:

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

but they should actually be placed as css files in assets/templates/wayfinder/dropdown.css & assets/templates/wayfinder/dropdown_ie.css

4) created a new ressource "MenuTest" and assigned the template "newTemplate" to it

hope i could help to understand the issue

[ersaurabh101]

Thank u so so much, but to be true i am so more confused...

i thought to implement the code written in that site and make chucks but what u did is whole new way..

I just want to learn 1 way and keep following it, till i master it...now if i want to practise this with new style, how can i do it ??