We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 44877
    • 21 Posts
    Can anyone tell me if it is possible to create a menu like this in wayFinder. I can't figure out how to make it work properly. I'm worried that the responsiveness might not carry over well and I might need to redesign it. I think the first two <li> items with the unique ids are throwing me off. Right now I just have it built to work but not in wayFinder as you an see

    <ul id="nav">
    	<li id="toggleMenu"><a href="[[~[[*id]]]]#nav">Menu</a></li>
    	<li id="hideMenu"><a href="[[~[[*id]]]]#toggleMenu">Menu</a></li>
    	<li class="dropdown">
    	        <a href="[[~2]]">Why ConSeal</a>
    		<ul>
    		<li><a href="[[~9]]">About Us</a></li>
    		<li><a href="[[~10]]">Capabilites</a></li>
    		</ul>
    	</li>
    	<li class="dropdown">
    		<a href="[[~3]]">Sustainability</a>
    		<ul>
    		<li><a href="#">Lean Manufacturing</a></li>
                    <li><a href="#">Leading The Way</a></li>
                    <li><a href="#">Sustainable Products</a></li>
    		</ul>
    	</li>
            <li><a href="[[~4]]">Products</a></li>
            <li class="dropdown">
    		<a href="[[~5]]">Applications</a>
    		<ul>
    		<li><a href="[[~81]]">Precast</a></li>
    		<li><a href="[[~82]]">Poured-In-Place</a></li>
                    <li><a href="[[~86]]">Industrial</a></li>
    		</ul>
    	</li>
    	<li class="dropdown">
    		<a href="[[~6]]">Technical Resources</a>
    		<ul>
    		<li><a href="[[~73]]">Assistance</a></li>
    		<li><a href="[[~35]]">Installation Instructions</a></li>
                    <li><a href="[[~27]]">Recommended Specs</a></li>
                    <li><a href="[[~43]]">Certificates of Conformance</a></li>
                    <li><a href="[[~106]]">Resource Library</a></li>
    		</ul>
    	</li>
            <li><a href="[[~7]]">Project Profiles</a></li>
            <li><a href="[[~8]]">What's New</a></li>
                    
    </ul>
    


    This is what I tried:
    [[Wayfinder? &startId=`0` &level=`2` &outerTpl=`WayfinderOuter` &innerTpl=`WayfinderInner` &parentRowTpl=`WayfinderParentRow` &rowTpl=`WayfinderRow` &cssTpl=`WayfinderCss` &outerClass=`nav` &parentClass=`hide`]]</li>


    I linked the proper css file to the &cssTpl but no luck
      • 28042 ☆ A M B ☆
      • 24,524 Posts
      Do you have a link to an example of a working menu like this? It's usually pretty easy to configure Wayfinder and its tpls to do just about anything.
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 44877
        • 21 Posts
        here is the site I am working on now.

        http://conseal.com.s171806.gridserver.com/index.php?id=1

        it works but only because I don't have it configured in wayFinder yet
          • 44877
          • 21 Posts
          I have attached my css file that i tried linking to as well if that might be of any help
            • 28042 ☆ A M B ☆
            • 24,524 Posts
            Ahah! A bit of clever manipulation of the outerTpl can be used here.

            You'll need to have your outerTpl handle those first two lis, the ones with the ID - they aren't dynamic and are just there to provide "buttons" to activate the menu on small devices. Replace the index.php bit with something like [[++site_start]] to make it still work when you add friendly urls to the mix. Set your site_start resource to not show in the menu.
            <ul id="nav">
              <li id="toggleMenu"><a href="[[~[[++site_start]]]]#nav">Menu</a></li>
              <li id="hideMenu"><a href="[[~[[++site_start]]]]#toggleMenu">Menu</a></li>
              [[+wf.wrapper]]
            </ul> 

            The rest of it should be straightforward use of innerTpl, innerRowTpl, parentRowTpl, etc. etc. until you get the structure you want.
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 44877
              • 21 Posts
              Quote from: sottwell at Aug 27, 2013, 11:15 PM
              Ahah! A bit of clever manipulation of the outerTpl can be used here.

              You'll need to have your outerTpl handle those first two lis, the ones with the ID - they aren't dynamic and are just there to provide "buttons" to activate the menu on small devices. Replace the index.php bit with something like [[++site_start]] to make it still work when you add friendly urls to the mix. Set your site_start resource to not show in the menu.
              <ul id="nav">
                <li id="toggleMenu"><a href="[[~[[++site_start]]]]#nav">Menu</a></li>
                <li id="hideMenu"><a href="[[~[[++site_start]]]]#toggleMenu">Menu</a></li>
                [[+wf.wrapper]]
              </ul> 

              The rest of it should be straightforward use of innerTpl, innerRowTpl, parentRowTpl, etc. etc. until you get the structure you want.

              Thank you, I'll try this out! You've been a huge help!
                • 44877
                • 21 Posts
                WOW, that worked perfectly! I wasn't quite sure how to handle the li ids, but that was an outstanding solution. Thank you!
                  • 44877
                  • 21 Posts
                  What do you mean when you say "set the site_start resource to not show in the menu"?. Do you mean my main home page [[1]]? Just asking because I just tried to set my FURLS and the furls actually work, they show up in the url window correctly, but it throws my site out of whack like it is breaking the links to my css docs. I have set up FURLs before with no problem and did the same exact thing i did for the last site but to no avail this time.

                  I looked at what this page said
                  http://rtfm.modx.com/revolution/2.x/administering-your-site/using-friendly-urls

                  and it says to make the
                  <base href [[!++site_url]]/>
                  but I'm not sure how uncaching the site url would fix this. And would I need to do that on every template or is there a system setting for this? Thank you in advance...
                    • 1343 ☆ A M B ☆
                    • 2,213 Posts
                    Correct, if you are hardcoding the homepage link in the outer tpl. If you leave it showing in the menu then wayfinder will output it normally, so you will have it twice.

                    In regards to the base tag, it should remain cached unless the domain changes between pages.
                      Patrick | Server Wrangler
                      About Me: Website | Tweets |  MODX Hosting
                      • 44877
                      • 21 Posts
                      Here is an example of my my header in one of my templates. I did try uncaching the base url and it did not work.

                      <!DOCTYPE html>
                      <head>
                      <meta charset="utf-8" />
                      <meta name="viewport" content="width=device-width" />
                      
                      <title>[[++site_name]] - [[*pagetitle]]</title>
                      
                      <link rel="stylesheet" href="assets/css/foundation.css" />
                      <link rel="stylesheet" href="assets/css/navigation.css" />
                      <link rel="stylesheet" href="assets/css/style.css" />
                      <link rel="stylesheet" href="assets/css/productpage.css" />
                        
                      <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
                      <link href='http://fonts.googleapis.com/css?family=Noto+Sans:700,400' rel='stylesheet' type='text/css'>
                        
                      <script src="assets/js/custom.modernizr.js"></script>
                      
                      <!--POWER SLIDER JQUERY SCRIPTS and  CSS-->
                      		<!--jquery.js also has the code for the responsive tables to work properly-->
                      		<script type="text/javascript" src="assets/fadeslider/jquery.js"></script>
                      <script type="text/javascript" src="assets/fadeslider/jquery.fadeSliderToggle.js"></script>
                      		<script type="text/javascript" src="assests/fadeslider/jquery.fadeSliderToggle.js"></script>
                      		<script type="text/javascript">
                      		$(document).ready(function() {
                      			$(".fadeNext").click(function(){   
                        				$(this).next().fadeSliderToggle()
                       				 return false;
                       			})
                       		});	
                       		</script>
                              
                      <!--RESPONSIVE TABLES-->
                              
                      		<link rel="stylesheet" href="assets/resp-tables/responsive-tables.css">
                      		<script type="text/javascript" src="assets/resp-tables/responsive-tables.js"></script>
                              
                      <!--END OF RESPONSIVE TABLES-->
                      
                      <style>body{background-image: url(images/Conseal-background2.jpg);}</style>
                      
                      <base href="[[++site_url]]" />
                      
                      </head>



                      Here is my .htaccess file, since my www.conseal.com domain is not directed to this server yet that is why I thought I might have problems. But I am new to MODX for the most part, I've been picking up the design aspects pretty well. It's just some of the more technical stuff that seems to give me problmes. Thanks guys.

                      RewriteEngine On
                      RewriteBase /
                      
                      #php_value session.auto_start 0
                      
                      # Rewrite www.domain.com -> domain.com -- used with SEO Strict URLs plugin
                      #RewriteCond %{HTTP_HOST} .
                      RewriteCond %{HTTP_HOST} !^conseal\.com [NC]
                      RewriteRule (.*) http://conseal.com/$1 [R=301,L]
                      #
                      # or for the opposite domain.com -> www.domain.com use the following
                      # DO NOT USE BOTH
                      #
                      #RewriteCond %{HTTP_HOST} .
                      #RewriteCond %{HTTP_HOST} !^www\.conseal\.com [NC]
                      #RewriteRule (.*) http://www.conseal.com/$1 [R=301,L]
                      
                      
                      
                      # Rewrite secure requests properly to prevent SSL cert warnings, e.g. prevent 
                      # https://www.domain.com when your cert only allows https://secure.domain.com
                      #RewriteCond %{SERVER_PORT} !^443
                      #RewriteRule (.*) https://example-domain-please-change.com/$1 [R=301,L]
                      
                      
                      
                      # The Friendly URLs part
                      RewriteCond %{REQUEST_FILENAME} !-f
                      RewriteCond %{REQUEST_FILENAME} !-d
                      RewriteRule ^(.*)$ index.php?q=$1 [L,QSA]