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

Megamenu w/ Wayfinder

    • 4749
    • 623 Posts
    cbaone Reply #1, 16 years, 5 months ago
    Hello all,

    I am currently making a megamenu. Here’s the proposed html structure (based on sohtanaka’s megamenu - http://www.sohtanaka.com/web-design/examples/mega-dropdowns/):
    <ul id="topnav">
    	<li>
        	<a href="#" class="home">Home</a>
        </li>
        <li>
        	<a href="#" class="products">Products</a>
            <div class="sub">
            	<ul>
                	<li><h2><a href="#">Desktop</a></h2></li>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><h2><a href="#">Laptop</a></h2></li>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><h2><a href="#">Accessories</a></h2></li>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><h2><a href="#">Accessories</a></h2></li>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                
            </div>
        </li>
</ul>


    The problem with wayfinder is that it adds the <ul> tags from the wrapper twice. Once when wrapping the submenu div and then the actual submenus themselves. So, really, it’s the only problem I’m having integrating the menu. Does anyone have a clever way to manipulate the outerTpl or any other tpl to eliminate the outer <ul>’s but keep the <ul>’s on the sub menus? Currently it looks like this:

    <ul id="topnav">
    	<li>
        	<a href="#" class="home">Home</a>
        </li>
        <li>
        	<a href="#" class="products">Products</a>
            <div class="sub">

            <ul> <!-- Problem -->

            	<ul>
                	<li><h2><a href="#">Desktop</a></h2></li>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><h2><a href="#">Laptop</a></h2></li>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><h2><a href="#">Accessories</a></h2></li>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>
                <ul>
                	<li><h2><a href="#">Accessories</a></h2></li>
                	<li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                    <li><a href="#">Navigation Link</a></li>
                </ul>

                
             </ul><!-- Problem -->

            </div>
        </li>
</ul>



    EDIT: Also, is there a way to use a startItemTpl in the submenus only?
      The MODx has you...
      Utah Web Design
      • 4749
      • 623 Posts
      cbaone Reply #2, 16 years, 5 months ago
      Well, I guess I have another part to this problem. In a menu of seven options only two have dropdowns. One of the dropdowns is just your standard dropdown. The other true "megamenu dropdown" has four different categories. So, the problem is to get all of those behaving correctly.

      I think I’ve got them to a point where they’ll be OK if I can just figure out how to drop the <ul> tags on the outer for the megamenu and keep them for the regular dropdown. Any insight would be greatly appreciated. Thanks.
        The MODx has you...
        Utah Web Design
        • 36926
        • 701 Posts
        bennyb Reply #3, 16 years, 5 months ago
        Quote from: cbaone at May 06, 2010, 09:45 AM

        I think I’ve got them to a point where they’ll be OK if I can just figure out how to drop the <ul> tags on the outer for the megamenu and keep them for the regular dropdown. Any insight would be greatly appreciated. Thanks.

        What are you using for &outerTpl and what are you using for &innerTpl
          • 4749
          • 623 Posts
          cbaone Reply #4, 16 years, 5 months ago
          innerTpl:
          <ul>[+wf.wrapper+]</ul>


          outerTpl:
          <ul id="megamenu">[+wf.wrapper+]</ul>
            The MODx has you...
            Utah Web Design
            • 4749
            • 623 Posts
            cbaone Reply #5, 16 years, 5 months ago
            Well, I solved it by structuring my menus a bit differently, but it had the desired effect.

            I just changed my &categoryFolderTpl to this:
            <ul>
<li><h2><a href="[+wf.link+]">[+wf.linktext+]</a></h2></li>
[+wf.wrapper+]
</ul>


            I was able to drop the <ul>’s on my innerTpl and it displayed the way I wanted it to. But for my menu item with only a single subfolder I had to create a faux container for that. Client isn’t paying enough for me to waste anymore time on it anyway...LOL. Thanks for the suggestions.
              The MODx has you...
              Utah Web Design
              • 25519
              • 265 Posts
              rootsdiv Reply #6, 15 years, 6 months ago
              Hi cbaone

              I know it’s a bit after the event and all, but is there any chance of a pointer to your menu in action? I’m thinking about implementing sohtanka’s menu and I’d just like to see another example.

              Cheers
              rp