We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Wayfinder... please help

    • 2306
    • 7 Posts
    AssimovT Reply #1, 19 years, 5 months ago
    HellO!

    Could anyone help to make out of this code a wayfinder chunks and the call? Sorry I am newbie with it...

    <div id="topmenu_container">
    <div class="topmenu" id="topmenu">
    <!-- these are the containers which are the parent menu items -->
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Resources</a></li>
    <li><a href="#" rel="dropmenu2">News</a></li>
    <li><a href="#" rel="dropmenu3">Search</a></li>
    <li><a href="#" rel="dropmenu4">About</a></li>
    <li><a href="#" rel="dropmenu5">Contact</a></li>
    </ul>
    </div>

    <!-- THese are the child menu items which relate to above containers -->

    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    <a href="http://www.codingforums.com">Coding Forums</a>
    <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    </div>


    <!--2nd drop down menu -->
    <div id="dropmenu2" class="dropmenudiv">
    <a href="http://www.cnn.com/">CNN</a>
    <a href="http://www.msnbc.com">MSNBC</a>
    <a href="http://news.bbc.co.uk">BBC News</a>
    </div>

    <!--3rd drop down menu -->
    <div id="dropmenu3" class="dropmenudiv">
    <a href="http://www.google.com/">Google</a>
    <a href="http://www.yahoo.com">Yahoo</a>
    <a href="http://www.msn.com">MSN</a>
    </div>

    <script type="text/javascript">
    cssdropdown.starttopmenu("topmenu")
    </script>

    <div id="search">
    </div>


    I would be grateful for any help!

    Cheers..
      • 26388
      • 103 Posts
      scitekmike Reply #2, 19 years, 5 months ago
      Not sure how you would set it up with your current menu structure but, if you were to use the suckerfish css menu system (example links are at the bottom of the page) it is super easy to integrate. Here is one of the last one’s I’ve built:

      The Wayfinder call is simply building the child <ul> for the menus based on the container page’s id number . . you further stylize it by adding chunks to template out the different parts of the <ul>’s and calling the tpl’s within the Wayfinder call. I’m not doing this because I have an overall style sheet controlling the child <ul> appearance. 
      <ul id="nav1">
	<li style="height:39px;"><a href="[~1~]"><img src="assets/images/homeUp.gif" width="128" height="39" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','assets/images/homeOver.gif',1)" onmouseout="MM_swapImgRestore()" /></a></li>
	
	<li style="height:38px;"><a href="[~2~]"><img src="assets/images/featuresUp.gif" name="image1" width="128" height="38" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','assets/images/featuresOver.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
	 [[Wayfinder?startId=`2`]]
  </li>
	<li style="height:37px;"><a href="[~4~]"><img src="assets/images/floorplansUp.gif" name="image2" width="128" height="37" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','assets/images/floorplansOver.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
	   [[Wayfinder?startId=`4`]]
	</li>
	<li style="height:35px;"><a href="[~8~]"><img src="assets/images/attractionsUp.gif" name="image3" width="128" height="35" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','assets/images/attractionsOver.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
	   [[Wayfinder?startId=`8`]]
  </li>
	<li style="height:36px;"><a href="[~15~]"><img src="assets/images/calendarUp.gif" width="128" height="36" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','assets/images/calendarOver.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
	   [[Wayfinder?startId=`15`]]
  </li>
	<li style="height:36px;"><a href="[~11~]"><img src="assets/images/residentsUp.gif" name="image5" width="128" height="36" border="0" id="Image6" onmouseover="MM_swapImage('Image6','','assets/images/residentsOver.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
	   [[Wayfinder?startId=`11`]]
  </li>
	<li style="height:38px;"><a href="[~13~]"><img src="assets/images/contactUp.gif" name="image4" width="128" height="38" border="0" id="Image7" onmouseover="MM_swapImage('Image7','','assets/images/contactOver.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
	  [[Wayfinder?startId=`13`]]
  </li>
</ul>
        • 14050
        • 788 Posts
        jesster444 Reply #3, 19 years, 5 months ago
        Hmm, changing the ID for each submenu might get a bit tricky. This template here uses a nice dropdown menu using only CSS:

        http://1-2-3-4.info/webtemplates/multiflex3/demo/

        And you can find the chunks for that dropdown menu here:

        http://modxcms.com/forums/index.php/topic,10171.0.html

        Download the Beta-4 one and you can use the m3_innerRowTpl.chunk, m3_innerTpl.chunk, m3_rowTpl.chunk,m3_parentRowTpl.chunk, and m3_outerTpl.chunk to create chunks of the same name (less the .chunk) with the contents contained inside the files. Then you can do a wayfinder call like so:

        [!Wayfinder?startId=`0` &outerTpl=`m3_outerTpl` &rowTpl=`m3_rowTpl` &innerTpl=`m3_innerTpl` &parentRowTpl=`m3_parentRowTpl` &innerRowTpl=`m3_innerRowTpl`!]
          Jesse R.
          Consider trying something new and extraordinary.
          Illinois Wine

          Have you considered donating to MODx lately?
          Donate now. Every contribution helps.