wayfinder menu

42 Posts

Ivar Reply #1, 18 years, 11 months ago

hello,

can sombody please help me to convert this menu code to wayfinder code.

<div id="menu">
 <table class="hflyoutwidth" border="0" cellspacing="0" cellpadding="0" style="padding-left: 10px;">
  <tr>

   <td style="color: #00FF00 /*#5F7703*/;"> | </td>

   <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu7')">Home</a>
     <div id="linkmenu7" class="hanylinkcss">
     </div>
   </td>

   <td style="color: #00FF00 /*#5F7703*/;"> | </td>

   <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu12')">Organisatie</a>
     <div id="linkmenu12" class="hanylinkcss">
    		<a href="[+wf.link+]" title="[+wf.title+] ">[+wf.linktext+]</a>
		<a href="[+wf.link+]" title="[+wf.title+] ">[+wf.linktext+]</a>
		<a href="[+wf.link+]" title="[+wf.title+] ">[+wf.linktext+]</a>
     </div>
   </td>

   <td style="color: #00FF00 /*#5F7703*/;"> | </td>

   <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu14')">Mantelzorg</a>
     <div id="linkmenu14" class="hanylinkcss">
    		<a href="[+wf.link+]" title="[+wf.title+] ">[+wf.linktext+]</a>
		<a href="[+wf.link+]" title="[+wf.title+] ">[+wf.linktext+]</a>
		<a href="[+wf.link+]" title="[+wf.title+] ">[+wf.linktext+]</a>
     </div>
   </td>

   <td style="color: #00FF00 /*#5F7703*/;"> | </td>
		
  </tr>
 </table>
</div>

I have tried it but it doesn’t work.

I hope the class names can almost stay the same!

The Id which is in the class hanylinkcss must be the same as in "dropdownmenu(this, event, ’linkmenu14’)" above it in the hrootcatcss.

If you need more information please say it also.

Thanks al lot,

Ivar in ’t Veen

P.S. tips are als good but the wiki and the muddydogpaws.com are a little bit confusing for me (it’s to much in one time tongue

)

4,205 Posts

dev_cw Reply #2, 18 years, 11 months ago

The tricky part is getting the classes to work as you said. One solution I see for this is to use the value of the document id in the class call. So for example if the document id is 34 the class would become linkmenu34. This can be done directly in Wayfinder.

Another method, this works if you need a predefined id rather than the document id, is to add a Template Variable to the container documents and include the linkmenu14 value in this TV and use it in the Wayfinder call. Actually I am not sure you can use a TV placeholder in a WF tpl, I assume that you can.

Personally I would use the first method since you don’t need to have any extra data, but both should work.

To build this menu in WF you need custom outerTpl, rowTpl, and innerRowTpl as follows:

outerTpl:

<div id="menu">
 <table class="hflyoutwidth" border="0" cellspacing="0" cellpadding="0" style="padding-left: 10px;">
  <tr>
  
  [+wf.wrapper+] 
  		
   <td style="color: #00FF00 /*#5F7703*/;"> | </td>
		
  </tr>
 </table>
</div>

rowTpl:

   <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu[+wf.id+]')">Home</a>
     <div id="linkmenu[+wf.id+]" class="hanylinkcss">
     [+wf.wrapper+] 
     </div>
   </td>

Notice I added the document unique ID to the linkmenu id. So if the document has an ID of 99 it would read "linkmenu99" so you may need to edit the javascript to reflect this.

innerRowTpl:

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

This should work in theory, but has not been tested. Hope it helps.

[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]

42 Posts

Ivar Reply #3, 18 years, 11 months ago

Thanks for the fast answer!

but when I put this code in chunks and it call it via this code:

[!Wayfinder? &startId=`0` &level=`2` &RowTpl=`[u]menu_row[/u]` &outerTpl=`[u]menu_outer[/u]` &innerTpl=`[u]menu_inner[/u]`!]

(the underlined words are the names I have given the chunks.)

then I get a basic list (so without any style) do I have to give the style via a special chunk or can it just stay in my <head> as a <link>?

end further: note that all the submenu’s have other ID’s so the [+wf.id+] won’t work I think huh

edit: your code creates this kind of code:

  <div id="menu">
    <table class="hflyoutwidth" border="0" cellspacing="0" cellpadding="0" style="padding-left: 10px;">
  <tr>
  
  <li><a href="http://steunpunt.nexethosting.com/" title="MODx CMS Install Success" >Base Install</a></li>
<li class="last active"><a href="/index.php?id=2" title="TEST" >Base Install</a></li>
 
  		
   <td style="color: #00FF00 /*#5F7703*/;"> | </td>
		
  </tr>
 </table>

  </div>

and that is not the same structure as my example.

4,205 Posts

dev_cw Reply #4, 18 years, 11 months ago

[!Wayfinder? &startId=`0` &level=`2` &RowTpl=`[u]menu_row[/u]` &outerTpl=`[u]menu_outer[/u]` &innerTpl=`[u]menu_inner[/u]`!]

I think the problem is that the call is case sensitive, you need to use &rowTpl not &RowTpl. See if this helps.

[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]

42 Posts

Ivar Reply #5, 18 years, 11 months ago

now I get this:

  <div id="menu">
    <table class="hflyoutwidth" border="0" cellspacing="0" cellpadding="0" style="padding-left: 10px;">
  <tr>
  
   <div id="linkmenu12" class="hanylinkcss">
  
 </div>
 <div id="linkmenu12" class="hanylinkcss">
  
 </div>
 
  		
   <td style="color: #00FF00 /*#5F7703*/;"> | </td>

		
  </tr>
 </table>
  </div>

so with a double id.

also as aditional information:
-the hanylinkcss are submenu’s
-the main menu item’s are the hrootcatcss

42 Posts

Ivar Reply #6, 18 years, 11 months ago

I have tried something but it doesn’t work!

--------------[ &outerTpl ]-[placed in chunk: menu_outer]

<table class="hflyoutwidth" border="0" cellspacing="0" cellpadding="0" style="padding-left: 10px;"?
 <tr>
  <td style="color: #0F0;"> | </td>
  [wf.wrapper]
 </tr>
</table>

--------------[ &rowTpl ]-[placed in chunk: menu_row]

<td style="cursor: pointer;" class="hrootcatbg">
 <a class="hrootcatcss" href="[+wf.link+]" title="[+wf.title+]" onMouseover="dropdownmenu(this, event, '[+wf.docid+]')">[wf.linktext+]</a>
 <div id="[+wf.docid+]" class="hanylinkcss">
  [+wf.wrapper]
 </div>
</td>
<td style="color: #0F0;"> | </td>

--------------[ &innerTpl ]-[placed in chunk: menu_inner]

[+wf.wrapper+]

--------------[ &innerRowTpl ]-[placed in chunk: menu_innerrow]

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

--------------[ templaterule ]-[placed in template]

[!Wayfinder? &startId='0' &level='2' &outerTpl='menu_outer' &rowTpl='menu_row' &innerTpl='menu_inner' &innerRowTpl='menu_innerrow'!]

(I have not put them all in the same chunk, but I have copied them to one code field above.)

I think that I have chosen the wrong chunk types for this.

I have chosen for [+wf.docid+] to make the submenu id’s unique, but I think this is also the wrong way!

You can see the original menu working at http://home.hetnet.nl/~steunpuntmantelzorg/site/index_3.htm

4,205 Posts

dev_cw Reply #7, 18 years, 11 months ago

Hello, I found some bugs and I think it works now. Lets start from scratch:

We need 4 tpl chunks to pull this off, outerTpl, rowTpl, innerTpl, and innerRowTpl.

outerTpl:

<div id="menu">
 <table class="hflyoutwidth" border="0" cellspacing="0" cellpadding="0" style="padding-left: 10px;">
  <tr>
  
  [+wf.wrapper+] 
  		
   <td style="color: #00FF00 /*#5F7703*/;"> | </td>
		
  </tr>
 </table>
</div>

rowTpl:

 <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu[+wf.docid+]')">[+wf.linktext+]</a>
     <div id="linkmenu[+wf.docid+]" class="hanylinkcss">
     [+wf.wrapper+] 
     </div>
   </td>

innerTpl (this was the one giving us trouble), just a simple wrapper tag to stop it from repeating the outerTpl code:

[+wf.wrapper+]

innerRowTpl:

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

Wayfinder call:

[!Wayfinder? &startId=`0` &level=`2` &rowTpl=`rowTpl` &outerTpl=`outerTpl` &innerRowTpl=`innerRowTpl` &innerTpl=`innerTpl`!]

This worked for me on my test site, let me know if it does the trick for you. Sorry for the initial errors, I am learning this as I go grin

EDIT!!! I just noticed this looks just like what you did above but you say it did not work. It looks like it works for me. Here is the result I get:

<div id="menu">
 <table class="hflyoutwidth" border="0" cellspacing="0" cellpadding="0" style="padding-left: 10px;">
  <tr>
  
   <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu1')">Home</a>
     <div id="linkmenu1" class="hanylinkcss">

      
     </div>
   </td>
 <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu2')">Blog</a>
     <div id="linkmenu2" class="hanylinkcss">
      
     </div>
   </td>

 <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu15')">Features</a>
     <div id="linkmenu15" class="hanylinkcss">
         	<a href="/index.php?id=16" title="Ajax ">Ajax</a>
    	<a href="/index.php?id=22" title="Menus and Lists ">Menus and Lists</a>
    	<a href="/index.php?id=14" title="Content Management ">Manage Content</a>

    	<a href="/index.php?id=24" title="Extendable by design ">Extendability</a>
 
     </div>
   </td>
 <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu33')">Getting Help</a>
     <div id="linkmenu33" class="hanylinkcss">
      
     </div>

   </td>
 <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu39')">Templates</a>
     <div id="linkmenu39" class="hanylinkcss">
         	<a href="index.php?id=39" title="MODxHost ">MODxHost</a>
    	<a href="/index.php?id=42" title="MODxCSS Wide ">MODxCSS Wide</a>

    	<a href="/index.php?id=43" title="MODxCSS ">MODxCSS</a>
 
     </div>
   </td>
 <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu32')">Design</a>
     <div id="linkmenu32" class="hanylinkcss">
      
     </div>

   </td>
 <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu6')">Contact us</a>
     <div id="linkmenu6" class="hanylinkcss">
      
     </div>
   </td>
 
  		
   <td style="color: #00FF00 /*#5F7703*/;"> | </td>

		
  </tr>
 </table>
</div>

[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]

42 Posts

Ivar Reply #8, 18 years, 11 months ago

I now get this:

<div id="menu">
 <table class="hflyoutwidth" border="0" cellspacing="0" cellpadding="0" style="padding-left: 10px;">
  <tr>
  
  <td style="color: #00FF00 /*#5F7703*/;"> | </td>  
 <td style="cursor: pointer;" class="hrootcatbg">
    <a class="hrootcatcss" href="#" onMouseover="dropdownmenu(this, event, 'linkmenu1')">Base Install</a>
     <div id="linkmenu1" class="hanylinkcss">
      
     </div>

  </td>
 
  		
   <td style="color: #00FF00 /*#5F7703*/;"> | </td>
		
  </tr>
 </table>
</div>

this is nearly perfect, but I only get 1 document/directory listed.

42 Posts

Ivar Reply #9, 18 years, 11 months ago

STUPID ME!!!!!

I was forgotten to ’tell’ the docs to be viewable in the menu!

dev_cw thanks for all your help!