We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • I prefer to have the "decorative" styling in the A tag. For example, if you want a border or background for the links, and you have the LI.here tag styled with the border and background, all of its subnav elements are inside of its border and background! Not at all what I want. Also, the LI no longer shares the left margin, so if I give li.here a left margin to match the rest of the links, all of its subnav links are pushed over as well, again breaking the styling. That’s why I wanted the li.here to also be a link, so I could style it to match the rest, but when I did that it lost the "here" class.

    I’m working on it; there seem to be enough identifier options that there should be a way to do this. But it sure would be easier if the A tag had the "here" class identifier!

    I had arranged to have the site moved to my hosting company’s new Dublin servers from their Texas servers, and didn’t expect anything immidiate. But they had the site moved within the hour, DNS and all! They moved their latest backup snapshot, of course...and I ended up losing about four hours of work! That will teach me; never work on the remote site! Work on the local site then upload! But I wanted to impress my partner with how quick and clever I am rolleyes . <sigh> Life is hard!
      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
    • Ok, I changed three line in DropMenu, in the MakeMap function, between lines 224 and 250:

      // If at the top level
      if (!$inside) 
      {
      $itm .= ((!$selfAsLink && ($child['id'] == $modx->documentIdentifier)) || ($itsEmpty && $useCategoryFolders)) ? 
      // changed - sottwell
      '<a href="javascript:;">'.$pre.$child[$textOfLinks].$post.'</a>' :
      '<a href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$pre.$child[$textOfLinks].$post.'</a>';
      $itm .= ($debugMode) ? ' top' : '';
      }
      
      // it's a folder and it's below the top level
      elseif ($isFolder && $inside) 
      {
      
      $itm .= ($itsEmpty && $useCategoryFolders) ?
      // changed - sottwell
      '<a href="javascrip:;">'.$pre.$child[$textOfLinks].$post.'</a>'. (($debugMode) ? ' subfolder F' :'') :
      '<a href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$pre.$child[$textOfLinks].$post.'</a>'. (($debugMode) ? ' subfolder F' :'');        					
      }
      
      // it's a document inside a folder
      else 
      {
      $itm .= ($child['alias'] > '0' && !$selfAsLink && ($child['id'] == $modx->documentIdentifier)) ? 
      // changed - sottwell
      '<a href="javascript:;">'.$child[$textOfLinks].'</a>' :
      '<a href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$child[$textOfLinks].'</a>';
      $itm .= ($debugMode) ? ' doc' : '';
      }
      $itm .= ($debugMode)? "$useCategoryFolders $isFolder $itsEmpty" : '';
      
      
        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
      • Yes! Finally! With the hack below and this snippet call

        <div class="sideblock" id="sideMenu">
        <h2>Navigation</h2>
        [[DropMenu?subdiv=`true`]]
        </div>


        with this css

        /* side menu */
        #sideMenu ul {
            list-style:none;
            }
        #sideMenu a {
        	text-decoration: none; 	
        	padding:7px 5px 5px 5px;	
        	margin:5px 0 5px 5px;	
        	display: block;	
        	color: #000000;	
        	border-left:1px solid #ababab;
        	border-right:1px solid #ababab;
        	background:url(../images/barbg.jpg) top left repeat-x;
        	}
        #sideMenu li.here a {
            color:#3f729f;
            }
        #sideMenu li.here a:hover{
            color:#821517;
            }
        #sideMenu div.subdiv a {
            color:#000;
            }
        #sideMenu div.subdiv li.here a {
            color:#3f729f;
            }    
        #sideMenu a:hover, #sideMenu div.subdiv a:hover, #sideMenu li.here a:hover {
        	color: #821517;
        	}
        #sideMenu ul li ul li a {
            padding-left:20px;
            }
        


        I get this



          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
        • Nice job Susan!

          (You could also use the cascade to reach the same end point with the original code by using: { a, li.here: blah } then using li.here li { margin-left: blah } )

          From looking at the the code change, it doesn’t look like there’s the ability to turn off the links on the "you are here" page any longer, correct?
            Ryan Thrash, MODX Co-Founder
            Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
          • No, for the way I work I need them. This isn’t for everybody, I’m aware. It could be made into an option from the snippet call as well.
              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
              • 26435
              • 1,193 Posts
              Ok, If anyone is still looking at this post:

              first, Ryan... Thank you for those links. I have read a lot, absorbed some, and I am preparing to read again. There is a lot of information out there, emphasis on "a lot"! I guess I really didn’t know what to search for, so thank you for the direction.

              In this post, I am hoping a more knowledgeable member than I can point me to a tutorial or reference on how the drop menu handles childeren of documents marked as folders. What I am trying to do is what the original Etomite "MenuBuilder" snipped did. Top level elements were shown in the menu. When you selected a link that was a folder, the childeren of that folder would be revealed. Can this be done in DropMenu. Does anyone have any advice that could point me in the right direction. I tried using &subdiv=`true`, then syling that with display:none, but those children are always listed with the subdiv class and therefore never displayed, so... I am confused as usual lately.

              -sD-
                Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
                All of the above... in no specific order.


                I send pointless little messages
              • #menucontainer li ul {
                    display:none;
                    }
                #menucontainer li:hover ul {
                    display:block;
                    }
                 


                This doesn’t work with IE. You have to use Javascript with IE. This is my preferred method.

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

                This is for a horizontal dropdown, but the same thing applies to a vertical drop down, the display:hide and display:block, and the javascript .over class descriptor addition for IE. The li:hover ul can also be positioned absolutely or relatively, creating interesting popup effects.

                although lately, just out of spite, I’ve been putting an IE conditional in my templates, setting the li ul to display:block, and IE users get the whole menu all the time. Too bad.
                  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
                • True IE doesn’t natively support the :hover behavior on anything but the A element, but with some minor limitations, you can easily get around this and get it to work in IE. See http://www.xs4all.nl/~peterned/csshover.html for more information.
                  • The default template includes a behavior (.htc) file  that makes IE support hover on any HTML element.

                    Scotty,

                    That’s  very easy to do using "the cascade" coupled with the you-are-here class:
                    /*  turn off sub-menus */
                    .menu ul ul {
                        display: none;
                    }
                    
                    /* show the ones in the path were you are */
                    .menu li.here ul {
                        display: block;
                    }
                      Ryan Thrash, MODX Co-Founder
                      Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                      • 26435
                      • 1,193 Posts
                      Quote from: rthrash at Nov 01, 2005, 01:03 PM

                      The default template includes a behavior (.htc) file that makes IE support hover on any HTML element.

                      Scotty,

                      That’s very easy to do using "the cascade" coupled with the you-are-here class:
                      /*  turn off sub-menus */
                      .menu ul ul {
                          display: none;
                      }
                      
                      /* show the ones in the path were you are */
                      .menu li.here ul {
                          display: block;
                      }


                      That works on all my templates Ry... Thanks. You get the Gold Star for the day. In fact, I give you a whole page of gold stars. I finally feel ready to get back to templating! Thanks dood.
                        Husband, Father, Brother, Son, Programmer, Atheist, Nurse, Friend, Lover, Fighter.
                        All of the above... in no specific order.


                        I send pointless little messages