We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36479
    • 2 Posts
    Hi all,

    I'm working on my fourth site now in MODx Rev. I'm loving it too discover each time new featues in the CMS Framework. I have looked in the past in several CMS systems and must say that MODx is the most flexible system that i have worked with.

    In the past i have set up multiple normal dropdown navigations with wayfinder. Only now i have some kind of mega dropdown menu in my project. The design of of the menu looks pretty similar to the the menu of the MODx site.

    The problem that i'm having is that i have no idea how to get two columns next to each other with a line in the middle. I have put in a picture in the attachement of what i'm trying too accomplish.

    I'm not looking for a complete sollution but some help to get me in the right direction would be very nice en helpfull.
      • 32862
      • 10 Posts
      Any Luck with this? I am trying to do the same?
        • 1778
        • 659 Posts
        Hello
        Did you have a look at the source code in your browser ? The HTML should give you an idea of the tpls in use, and have a look at the css clarify the positionning, and others graphical attributes...
        Cheers
          • 37180
          • 7 Posts
          I'm searching exactly the same menu.

          Did you find ?
            • 26016
            • 561 Posts
            Hi,
            I don't have an easy solution for this, but I thought I'd share some experiences. Some months ago I put in some time trying to implement Soh Tanaka's famous gorgeous mega dropdown.
            http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/

            But I was thwarted by the need to have DIV's within list items on only some levels. I couldn't find a way to get the templates to work. Try it, it's nuts. Someone may have figured it out, though.

            My next thought was to try doing it with a megamenu that is nothing but list items. This looked promising.
            http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/
            I got further on that, and was pleased. But that had a significant issue, too: if you move around and keep clicking too many times (or hovering, depending on which one you're doing), the javascript "gives out" and then the menu stops working. Some kind of memory leak, maybe. But I couldn't sort it, and I don't think the makers of that have published anything new for it in some time.

            I did some inconclusive experimenting with droplines, too. With any mega menu or dropline, the hover behavior becomes pretty important, else you end up missing what you're trying to click on, menu items might vanish too quick, on and on. So significant facility with JQuery may be important.

            I didn't try paid solutions, and some of those may work better. Ideally, I suppose if you could find some killer JQuery script that will handle a more-or-less normal Wayfinder menu, problem could be solved. Superfish, or what-have-you. Cheaping out certainly did not work for me. smiley

            I remember thinking that someone could play with GetResources to pump out a bunch of links, but even that might run into templating complexity.

            Good luck,
            Cheers, Dave
              MODx and Wordpress development
              Linux, PHP 5.2, MySQL 5.0, Evo 1.05, Revo 2.08-pl, Firefox 4
              • 36479
              • 2 Posts
              Pretty long time ago i started this topic. Haven't worked on the menu for a while because it was driving me crazy:P

              Well I started working again on the mega-menu, looking at the code of modx.com has helped me a lot. I have most parts of the menu working now. But still some problems related to pie.htc.

              As the image in my first post shows, i'm using rounded corners in the top level items. For most browsers it's no problem, ie needs a litter bit more work with the behavior pie.htc. But this is giving me the following isue;

              As soon as i apply the css rule; display:inline-block; to the link element pie.htc stops working and bye bye rounded corners.

              @ kiwiworkshop and xheight : When i finish it, ill put it in a tutorial and post it on the forum.

              Grtz,

              J.
                • 37042
                • 384 Posts
                Hi modx-jeero
                How did you get on with the Mega Menu. Any demos available?
                  ...
                  • 28120
                  • 380 Posts
                  http://www.3dwoundimaging.com/ uses the mega menu from Soh Tanaka (although Soh's site is no longer available)

                  Everything is editable in MODX. For the column headings in the Support dropdown I have an extra level in the Resource Tree set as symlinks.

                  Wayfinder call is

                  [[Wayfinder? &startId=`0` &outerTpl=`topOuterTpl` &rowTpl=`topRowTpl` &parentRowTpl=`topParentRowTpl` &categoryFoldersTpl=`topCategoryFoldersTpl` &innerTpl=`topInnerTpl`  &levelClass=`menutext` &level=`3` ]]


                  topOuterTpl
                  <ul>
                  [[+wf.wrapper]]
                  </ul>


                  topRowTpl
                  <li[[+wf.classes]]><a href="[[+wf.link]]"><div>[[+wf.linktext]]</div></a>[[+wf.wrapper]]</li>


                  topParentRowTpl
                  <li[[+wf.classes]]><a href="[[+wf.link]]"><div>[[+wf.linktext]]</div></a>
                            <div class="sub">  
                                [[+wf.wrapper]]      
                            </div>
                          </li>


                  topCategoryFoldersTpl
                  <ul>
                  <li><h2>[[+wf.linktext]]</h2></li>
                  [[+wf.wrapper]]
                  </ul>


                  topInnerTpl
                  [[+wf.wrapper]]

                    • 36446
                    • 184 Posts
                    Hi Sparky!
                    Could you add the complete Menu with Javascript and Css? Would be sooo nice!
                      https://www.beautyislife-shop.de - premium make-up!
                      https://www.topsterne.de - sell it here!
                      ---------------------------------------------------------
                      • 28120
                      • 380 Posts
                      That would be too nice plus that site's gone now.

                      But I've recently implemented http://www.adapt.com using http://codecanyon.net/item/jet-responsive-megamenu/5719593 which


                      • has lots of styles available for the dropdown
                      • responds nicely on mobiles
                      • has 2 touch on touch devices but single click with mouse