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

Re: [DropMenu] style

    • 26435
    • 1,193 Posts
    ScottyDelicious Reply #1, 18 years, 6 months ago
    Can anyone post the CSS you are using to style [[DropMenu]] and your call for the snipppet. I don’t want to copy you, I just want to learn how to use this by looking at working examples. All these new ways to call snippets (compared to the etomite days) with the &MenuName and &TopNavClass, I am a bit overwhelmed/confused.

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

      I send pointless little messages
    • Ryan Thrash Reply #2, 18 years, 6 months ago
      http://modxcms.com/snippet-dropmenu.html

      It’s a start, but no where close to done.
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
      • sottwell Reply #3, 18 years, 6 months ago
        I just called it plain, no arguments at all, to start with. I put the call in a <div id=’sideMenu’> in a chunk because I prefer not to have to look in a dozen places for my element and container names.
        <div class="sideblock" id="sideMenu">
<h2>Navigation</h2>
[[DropMenu]]
</div>


        #sideMenu ul {
    list-style:none;
    }
#sideMenu a {
	text-decoration: none; 	
	padding: 4px;	
	margin:2px 20px;	
	display: block;	
	color: #000000;	
	border: 1px solid #ababab;
	font-size:0.9em;    
	}
#sideMenu a:hover {
	color: #821517;	
	border: 1px solid #003399;
	}
#sideMenu li.here {
	padding: 4px;	
	margin:2px 20px;	
	color: #821517;	
	border: 1px solid #003399;
    }


        This gives me this simple menu:



          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
          ScottyDelicious Reply #4, 18 years, 6 months ago
          Thanks Susan! grin

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

            I send pointless little messages
          • sottwell Reply #5, 18 years, 6 months ago
            When I’m done, it’ll be a knock-down, drag-out, no-holds-barred multilevel dropdown. Then I’ll write up a document for styling it. In the meantime, I recommend that you check out the CSS links on my site. Several of the sites have excellent tutorials on list-based menu styling.
              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
            • sottwell Reply #6, 18 years, 6 months ago
              Wow. Found out some major things wrong with that simple styling! It’s OK for a single level, but that’s all.

              Will come back with a better way ASAP!
                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
                ScottyDelicious Reply #7, 18 years, 6 months ago
                I can’t figure out how to make it "hide" the documents in "Folders" until that "Folder" is opened.

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

                  I send pointless little messages
                • Ryan Thrash Reply #8, 18 years, 6 months ago
                  Ahhh... that’s where the .here class comes in. wink

                  Quick tip:

                  Make all nested ULs display: none

                  Make all li.here ul display: block

                  A bit of combined relative/absolute positionings and you’re done.

                  (I need time to document the landplan.net menu as that’s a beast that demonstrates LOTS of techniques...)
                    Ryan Thrash, MODX Co-Founder
                    Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
                  • sottwell Reply #9, 18 years, 6 months ago
                    When I wanted to have everything be a link so I could style the <a> tags, I did this:

                    [[DropMenu?maxLevels=2&selfAsLink=true]]


                    and nothing gets tagged with the ’here’ class any more, not even the <li> tags. huh

                    According to the comments, the ’here’ <a> tag will be given the class name; but I can’t find anywhere in the code where any <a> tag gets the class name.

                    Maybe instead of not having the ’here’ element be a link, it would be better to have it be an "empty" link (<a href="javascript:;">) so it can still be used for styling.
                      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
                    • Ryan Thrash Reply #10, 18 years, 6 months ago
                      From a pure semantics standpoint, the non-linked <li class="here"> is correct. I’ve personally duplicated the styling of the A tag to the li.here for consistency’s sake:

                      a, li.here { blah }


                      Regardless, sounds like we’ve got some corrections to make for the code.
                        Ryan Thrash, MODX Co-Founder
                        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me