We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 28042 ☆ A M B ☆
    • 24,524 Posts
    In case anybody is interested, I modded ListMenuX to allow for javascript-enabled dropdowns, a-la Suckerfish Dropdowns as found here:

    http://www.alistapart.com/articles/dropdowns/

    The issue is that good ’ol IE doesn’t support the :hover pseudo-class on anything except <a> tags, so having a nice CSS-based dropdown list menu is impossible (well, very awkward and semantically incorrect, anyway) without javascript. I added an optional argument, "ulId", that determines if the first
    <ul> is given an ID for the javascript to do its DOM thing.

    // --------------------
    // Snippet: ListMenuX
    // --------------------
    // Version: 1.2
    // Date: 2005.05.31
    // [email protected]
    //
    // Based on the SimpleListMenu snippet.
    //
    // Note: This snippet will only show documents and 
    // folders at the current level and below.
    //
    // Credit for the base code goes to [email protected]
    // based on the SimpleListMenu snippet.
    // 
    // Modded 17/09/2005 by [email protected]
    // to add optional argument ulID to allow the top
    // ul element to be given an ID.  Nested ul elements
    // will not have the id.
    //  
    // Usage:
    // [[ListMenuX?id=0&depth=2&divId=my-menu&activeLinkClass=currentMenuItem]] 
    //
    $id = !isset($id)?$modx->documentIdentifier:$id;
    $depth = !isset($depth)?0:$depth;
    $nodiv = !isset($nodiv)?false:$nodiv;
    $sDivId = empty($divId)?"":" id='$divId'";
    $sDivClass = empty($divClass)?"":" class='$divClass'";
    $sUlClass = empty($ulClass)?"":" class='$ulClass'";
    $sLiClass = empty($liClass)?"":" class='$liClass'";
    $sActiveLinkClass = empty($activeLinkClass)?"":" class='$activeLinkClass'";
    $ulId = !isset($ulId)?false:$ulId;
    $children = $modx->getActiveChildren($id); 
    $menu = ""; 
    $childrenCount = count($children);
    if($children==false) {
    return $menu;
    }
    if ($nodiv==false) $menu .= "<div$sDivId$sDivClass>\n";
    if ($ulId==true) {$menu .= "<ul$sUlClass id='nav'>\n";}
    else{$menu .= "<ul$sUlClass>\n"; }
    foreach ($children as $child)
    {
    $level = ($depth < 1)?1:$depth;
    
    // If child is current document, add activeLink class
    if ($child['id']==$modx->documentIdentifier)
    { 
    $menu .= "<li$sLiClass><a$sActiveLinkClass href='[~".$child['id']."~]' title='".$child['description']."'>".$child['pagetitle']."</a>";
    } 
    else 
    {
    $menu .= "<li$sLiClass><a href='[~".$child['id']."~]' title='".$child['description']."'>".$child['pagetitle']."</a>";
    }
    
    if ($depth > 1) {
    $subDepth = $depth - 1;
    $suffix = "-nested";
    if (($snippetOut = $modx->runSnippet('ListMenuX', array('id'=>$child['id'],
    		'nodiv'=>true, 
                    'ulId'=>false,
    		'divId'=>!empty($divId)?$divId.$suffix:'', 
    		'divClass'=>!empty($divClass)?$divClass.$suffix:'', 
    		'ulClass'=>!empty($ulClass)?$ulClass.$suffix:'', 
    		'liClass'=>!empty($liClass)?$liClass.$suffix:'',
    		'activeLinkClass'=>!empty($activeLinkClass)?$activeLinkClass:'', 
    		'depth'=>$subDepth
    	))) != false)
    {
    $menu .= $snippetOut;
    } 
    }
    
    $menu .= "</li>\n";
    
    }
    
    $menu .= "</ul>\n";
    if ($nodiv==false) $menu .= "</div>\n";
    
    return $menu;


    The javascript that enables the dropdowns in IE:

    <script type="text/javascript"><!--//--><![CDATA[//><!--
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>


      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
      • 32982
      • 674 Posts
      very good im waiting to use it tonight
      i think the only thing is to point to the js from the template and edit the css...
      thanks
        Jabiertxof (formerly XYZVISUAL)
        My bussines: http://marker.es
        https://www.youtube.com/user/jabiertxof/videos
        • 32982
        • 674 Posts
        Hi
        i couldent use
        i put the code in the head of my template:
        <script type=\"text/javascript\" src=\"assets/site/drop.js\"></script>
        upload the code into a js (the second quote)to this folder
        change my snippet listmenux to the first quote
        and call to the snippet from my template whith the code provider
        [!ListMenuX?id=21&depth=2&divId=my-menu!]
        and it only return in firefox and explorer a simple menu
        vertical..
        whath doing broung.
        is my link to the css
        i need to change it
        could give an example
        thanks
          Jabiertxof (formerly XYZVISUAL)
          My bussines: http://marker.es
          https://www.youtube.com/user/jabiertxof/videos
          • 28042 ☆ A M B ☆
          • 24,524 Posts
          Sounds like you need to work on the CSS. There are several articles and tutorials on setting up list-based menus on http://www.alistapart.com; that’s where I get all my dropdown menu code from. It’s all in the CSS, with a bit of help from the Javascript to persuade IE to play nice. The Javascript depends on the presence of a div with the id of "nav" in order to be able to create the rollover dropdown effect. You can edit that in the .js file if you really want a different id.

          navRoot = document.getElementById("nav");


          You can call the CSS file in two different ways in the head of your template:


          <link rel="stylesheet" type="text/css" href="assets/site/mystyle.css" />
          - or -
          <style type="text/css">
          @import assets/site/mystyle.css;
          </style>

          Edit the href path to where you put your .css file.
          In your .css file, I recommend grouping your entries by the area they are for, and using comments to separate them:


          /* Main List Menu style */
          #mainMenu ul { list-style:none; }
          #nav li ul { display:none; }
          #nav li:hover ul, #nav li.over ul { display:block; }
          etc etc...

          /* Main Content style */
          #main p { padding:10px; }
          etc etc...

          Here’s your reading for the week wink
          I strongly recommend taking the time to work through the tutorials.


          http://www.alistapart.com/articles/taminglists

          http://www.alistapart.com/articles/dropdowns

          http://www.alistapart.com/articles/horizdropdowns

          http://www.alistapart.com/articles/hybrid
            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
            • 32982
            • 674 Posts
            thanks im waiting to work on it...
            the only cuestion is
            is posibol to link 2 files of css
            and put in the template two calls to <script></script>
            one whith the link to the js file
            and the other whith some customs scripts i have
            sorry for my little knoweledge
            thanks again
            javier
              Jabiertxof (formerly XYZVISUAL)
              My bussines: http://marker.es
              https://www.youtube.com/user/jabiertxof/videos
              • 28042 ☆ A M B ☆
              • 24,524 Posts
              You can have as many .css files as you want, using either method. Be careful of the order you put them, though, these are Cascading style sheets, because the styles "cascade" down like water in a waterfall; for example if you say "body { background:white; }" in the first stylesheet, then "body {background:black;}" in the second one, the body background will be black.

              For this reason, if I have a specific snippet whose content requires specific CSS, I am careful to use the snippet name in some way in the id and class names I use in any html the snippet generates. For example, my Document Manager snippet uses a lot of forms. All of the html tag id or class names start with dm, such as <form id="dmForm" ...>, or <div class="dmWide">. This way, you can add the snippet’s .css file in the header wihout having to modify your main template’s .css file, and you don’t need to worry about any style conflicts.

              Interestingly, the NiftyCorners javascript rounded corner system has one .css file, import.css, which is linked to in the head of your template, and its content is nothing more than several @import commands, since the javascript itself generates a number of tags requiring specific css. So if you are going to have a number of .css files, you can do it that way to make it easier to link to them from your template head.

              However, if you wish to have alternate stylesheets to allow user to switch styles, you must use the <link rel="alternate stylesheet" title="secondStyle" ... /> form.

              Here is the javascript and css links I used for this site (being worked on) http://www.alandaniel.co.uk. Click on the images at the top to see the style switcher at work.

              <script type="text/javascript" src="assets/templates/4in1/javascript/nifty.js"></script>
              <script type="text/javascript" src="assets/templates/4in1/javascript/layout.js"></script>
              <link rel="stylesheet" type="text/css" title="yellow" href="assets/templates/4in1/styles/import.css" />
              <link rel="alternate stylesheet" type="text/css" title="green" href="assets/templates/4in1/styles/green.css" />
              <link rel="alternate stylesheet" type="text/css" title="sky" href="assets/templates/4in1/styles/sky.css" />
              <link rel="alternate stylesheet" type="text/css" title="grey" href="assets/templates/4in1/styles/grey.css" />
              <link rel="alternate stylesheet" type="text/css" title="puzzle" href="assets/templates/4in1/styles/green.css" />

              The "yellow" style, the first one, uses the NiftyCorners javascript system, and you can see that I used the "import.css" file mentioned above.

              As far as javascript goes, again you can link to as many as you like, although there is no function comparable to the css @import function; you cannot include or import other .js files from within javascript.

                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
                • 32982
                • 674 Posts
                sorry i see the the post and i think still working in the css dropdown and see the post and reply later but in my main become a diferents ideas for modx and park the css dropdown to later, and dont reply your help.
                thanks
                  Jabiertxof (formerly XYZVISUAL)
                  My bussines: http://marker.es
                  https://www.youtube.com/user/jabiertxof/videos
                  • 28571
                  • 11 Posts
                  Hmm

                  I tried this and got a

                  manager/includes/document.parser.class.inc.php(705) : eval()’d code on line 1

                  error (some sort of internal php error?)

                  PS if this script needs a basic css to support this or does the standard css that comes with a standard install deal with this?

                  Thanks
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    In the first place, ListMenuX has not been used for months. And if you get an error, it’s best to copy/paste the entire error message into code tags (the # button in the post editing menu), otherwise we have no idea what the error is.
                      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
                      • 28571
                      • 11 Posts
                      "In the first place, ListMenuX has not been used for months. "

                      Thanks that’s usefull but may be someone should note this fact on the resources page?
                      ie version compatibility etc?
                      so that if is is no longer current we konw to avoid it!