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

    I’m trying to configure for Wayfinder the multilevel drop-down menu shown in this demo:
    http://www.cssplay.co.uk/menus/final_drop.html

    My config file is posted as attachment to this thread: http://modxcms.com/forums/index.php/topic,30214.0.html

    The code that my config generates is very close from the one of CSSPlay’s demo.

    CSSPlay’s code add class="drop" in all anchors of the parentRowTpl chunk, but not in top-level parent rows.
    My config is unable to do this.

    In other words, how to prevent to write class="drop" for the menu names that appear in the menu bar ?
    $parentRowTpl = '@CODE:<li><a class="drop" 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>';

    I read a lot about Wayfinder, including this very detailed documentation: http://wiki.modxcms.com/images/f/fa/Wayfinder200_docs_v6.zip
    but I could not find any solution to this problem. Should I create some conditional test and how? Is there another solution?

    Thanks.
      • 10449
      • 956 Posts
        • 15001
        • 697 Posts
        Yes, it is very close. The stylesheet is different.

        The difference is that CSSPlay’s example use a "drop" class for all rows that lead to a submenu.
        This lets define a particular appearance for those rows, like inserting a small arrow picture.

        I saw that setting a special appearance without using any special class is also possible; like does the example on muddydogpaws.com that you told about.

        I tried using the stylesheet ultimate_drop.css from your example and removing the class="drop" from my code.

        Strangely, it worked perfectly for Firefox but not for MSIE 7 in which the menu did not drop.
        I say "strangely" because MuddyDogPaws example works with MSIE and seem using the same stylesheet as for Firefox.

        There is a small difference in the code for parentRowTpl between my config and Muddydogpaw’s, where the
        "<table><tr><td>" and "</td></tr></table>" are written whatever the browser. I tried with Muddydogpaws code but the menus still did not drop.

        Another difference is that I specify an inner template which is different from the outer. This is because I put my <div class="menu">...</div> sandwich in the outer model. But this should really not be the reason of the problem.

        I know that my former config and stylesheets would be OK for both browsers if I could remove the class="drop" from the top-level parent row. I tested a copy-paste of the code in a static HTML file, removed the "drop" class for all top-menu entries and it worked with both Firefox 3 and MSIE 7.

        With ultimate_drop.css, there must be a small trick so that outputed code also works with MSIE but I cannot find it.
          • 15001
          • 697 Posts
          After years of coding, I cannot believe my eyes...
          Due to a copy-paste operation, I had forgotten a <html> tag before the DOCTYPE declaration in the template. Like this:

          <html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml">


          During days and days I could not understand why the drop-down menu was working perfectly with Firefox and not with MSIE.

          Now, the reason seem to be a lacking doctype declaration. Most of my code was in XHTML but I had just put an <html> tag at the beginning of the document. Tonight, I had the ideaadding the DOCTYPE, but my menu was still not working.
          Wayfinder output was OK and I could not understand the error. Until I decided to copy the page in a static HTML file.
          When checking the document with the W3C validator (http://validator.w3.org), I found out that I had forgotten an <html> tag before the DOCTYPE. Removing it solved all problems.

          Even using the stylesheets from CSSPlay with all --top level and sublevel-- parent rows having class="drop" works. grin

          The worse in this story is that in MSIE, the stylesheet behavior was partially working as the top-level menu item highlighted when the mouse was over them.

          Sometimes it’s terrible how a mini error can make you loose a lot of time.