We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 37550 ☆ A M B ☆
    • 711 Posts
    Hi All,

    I’m trying to implement a wayfinder dropline menu to my site where the dropline always shows:

    http://87.117.200.76/modx-working/index.php?id=47

    "Original menu from cssplay" - is how i would like wayfinder to be setup

    "My Wayfinder test" - is what I have done so far.

    Here is my snippet call

    [[Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`nav` &cssTpl=`cssplay_dropline` &hereClass=`current` &rowClass=`select` &parentClass=`select` ]]

    cssplay_inner

    <ul class="sub">

    [+wf.wrapper+]

    </ul>

    cssplay_outer
    [+wf.wrapper+]

    cssplay_parentRow
    <ul [+wf.classes+]>
    <li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>

    <!--[if lte IE 6]>

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

    <table><tr><td>

    <![endif]-->

    [+wf.wrapper+]

    <!--[if lte IE 6]>

    </td></tr></table>

    </a>

    <![endif]-->

    </li>
    </ul>

    cssplay_row
    <ul [+wf.classes+]>
    <li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>
    </ul>

    Sorry for the extra long post here, I’ve been playing around with this for the best part of the morning but dont seem to get further.

    From what I can see I just need to be able to use either <ul class="sub"> for subitems and if the root menu (container) is selected the subitems class should then change to <ul class="sub_active">

    Thanks
    Aaron

      http://www.onesmarthost.co.uk
      UK MODX Hosting with love.
      • 18862
      • 70 Posts
      So how did you end up setting this up? I see that you now have it showing sub_active as you wanted.

      I’m trying to figure out if there is a way to target inner submenus based on their levels in the same way you can reference sub-items.
      IE:
      <ul class="LevelOne">
      <li class="line1">
      <a href="...">Link</a>
      <ul class="LevelTwo">
      <li class="line2">
      <a href="...">Link</a>
      <ul class="LevelThree">
      <li class=...... etc..

      I know you can do it for the list items using &levelClass parameter, but I don’t see any method to do the same thing for the menu items (ie: <ul>)

      Any thoughts?
        • 22390
        • 11 Posts
        Hi, can you post your code of the implementation of dropline at cssplay laugh :’(
          • 16364
          • 13 Posts
          I also want the submenu always shown. Can anyone help with this? Or how should I change this code to get it work: http://www.muddydogpaws.com/development/wayfinder/examples/example-3.html

          Thanks!
            • 4310
            • 2,310 Posts
            Sorry for the delay in posting, I hadn’t noticed this topic.
            I did the menu for Aaron, in the end he didn’t use it for his live site.
            Here are the basics.
            Wayfinder calls:
             [!Wayfinder? &startId=`0` &config=`dropline2`!]
             [!Wayfinder? &startId=`[[UltimateParent? &topLevel=`0`]]` &config=`dropline2sub`!]


            dropline2.config.php
            <?php
            	$level = 2;
            	$hereClass = 'current'; 
            	$firstClass = '';
            	$selfClass = ''; 
            	$lastClass = '';
            	$parentClass = '';
            	$rowClass = 'select';
            	$innerClass = 'sub';
            	$outerTpl = '@CODE:
            					[+wf.wrapper+]
            					';
            	$activeParentRowTpl = '@CODE:<ul class="current">
            	<li[+wf.classes+]>
            	<a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
            	<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            	[+wf.wrapper+]
            	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>'; 
            	$parentRowTpl = '@CODE:<ul class="select">
            	<li>
            	<a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
            	<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            	[+wf.wrapper+]
            	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>';
            	$innerRowTpl = '@CODE:<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
            	[+wf.wrapper+]</li>';
            	$innerTpl = '@CODE:<ul[+wf.classes+]>
            		[+wf.wrapper+]
            	</ul>';
                 $rowTpl = '@CODE:<ul[+wf.classes+]>
            	<li><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
            	</li></ul>';                   
            	$cssTpl = '@CODE:<link rel="stylesheet" media="screen" type="text/css" href="assets/snippets/wayfinder/configs/dropline2.css" />';
            ?>

            dropline2sub.config.php :
            <?php
            	$level = 2;
            	$hereClass = 'current_sub'; 
            	$firstClass = '';
            	$selfClass = ''; 
            	$lastClass = '';
            	$parentClass = '';
            	$levelClass = '';
            	$innerClass = '';
            	$outerTpl = '@CODE:<ul class="sub_active">
            	[+wf.wrapper+]
            	</ul>';
              $rowTpl = '@CODE:
            	<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
            	</li>';                   
            	$innerTpl = '';                       
            ?>

            dropline2.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/simple_dropline.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.
            =================================================================== */
            /* position of the whole menu */
            #nav {margin:90px 0 10px 0;}
            
            /* background & position for the whole menu  */
            #nav {width:100%; height:20px; background:#000; position:relative;}
            
            /* basic properties for the top level menu  */
            #nav .select, #nav .current {margin:0; padding:0; list-style:none;}
            #nav li {display:inline; margin:0; padding:0; height:auto;}
            
            /* styles for the top level menu  */
            #nav .select a,
            #nav .current a {display:block; height:20px; float:left; background:#000; padding:0 10px 0 10px; text-decoration:none; font-size:12px; line-height:20px; white-space:nowrap; border-right:1px solid #fff; color:#fff;}
            * html #nav .select a, * html #nav .current a {width:1px; height:21px;} /* for IE5.5 and IE6 only */
            
            /* styles for the top level menu on hover */
            #nav .select a:hover, 
            #nav .select li:hover a {background:#888; cursor:pointer; color:#ff0;}
            
            /* hide the sub level menu  */
            #nav .sub {display:none;}
            #nav table {position:absolute; border-collapse:collapse; left:0; top:0;} /* for IE5.5 and IE6 only */
            
            /* style for the active top level menu */
            #nav .current a {background:#666; color:#ff0;}
            
            /* styles for the sub level menu on hover */
            #nav .sub li a:hover, 
            #nav .select a:hover .sub li a:hover, 
            #nav .select li:hover .sub li a:hover {background:#888; color:#ff0;}
            
            /* styles for the active sub level menu on hover */
            #nav .sub_active .current_sub a, 
            #nav .sub_active a:hover {background:#666; color:#ff0;}
            
            /* background for the sub level menu */
            #nav .select li a:hover .sub, 
            #nav .select li:hover .sub {display:block; position:absolute; width:775px; top:20px; left:0; background:#888; margin-top:0; padding:0; z-index:100; color:#fff; font-size:11px;}
            
            /* background & position for active the sub level menu */
            #nav .sub, #nav .sub_active {margin:0; padding:0; list-style:none;}
            #nav .sub_active {display:block; position:absolute; width:775px; top:20px; left:0; background:#666; margin-top:0; padding:0; z-index:10;}
            * html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-t\op:1px;}/* for IE5.5 and IE6 only */
            
            /* styles for active the sub level menu */
            #nav .sub_active a {height:21px; text-decoration:none; line-height:20px; white-space:nowrap; display:block; float:left; background:#666; padding:5px 10px 5px 10px; margin:0; font-size:12px; white-space:nowrap; border:0; color:#fff;}
            
            /* styles for the sub level menu */
            #nav .select a:hover .sub li a, 
            #nav .select li:hover .sub li a {display:block; background:#888; padding:5px 10px 5px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;}
              • 16364
              • 13 Posts
              Thank you very much, I got it working grin
                • 4310
                • 2,310 Posts
                Post a link if/when the site is live smiley
                  • 5588
                  • 6 Posts
                  Hi all,

                  This one works like a charm!

                  note: Be sure to place the wayfinder call inside a ’nav’ Div like:

                  <div id="nav">
                    [!Wayfinder? &startId=`0` &config=`dropline2`!]
                    [!Wayfinder? &startId=`[[UltimateParent? &topLevel=`0`]]` &config=`dropline2sub`!]
                  </div>
                  
                    • 4310
                    • 2,310 Posts
                    codeflow is right wink
                    Sorry, didn’t think to mention the containing <div>.
                      • 5588
                      • 6 Posts
                      Quote from: bunk58 at Nov 05, 2008, 12:42 PM

                      Post a link if/when the site is live smiley

                      Well.. the site is not yet live: but here is another working implementation: http://beta.codeflow.nl/
                      (work in progress - this is my sandbox smiley )

                      Thanks for this "Learning by example" thread... wink