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

Vertical Fake Accordeon Menu

    • 6561
    • 139 Posts
    Darkelve Reply #1, 17 years, 6 months ago
    People helped me a lot here, so I thought I would try to offer some help too and create this ’config pack’ for a CSS-based menu I recently needed to create.

    This zip file provides a very simple ’fake accordeon’-style, list-based CSS menu, meant to be positioned in a sidebar on the right side of the page.

    Instructions are included, see the instructions.txt in the zip file.

      • 26931
      • 2,314 Posts
      anonymized-26931 Reply #2, 17 years, 6 months ago
      Hi Darkelve,

      thank you for sharing! smiley

      jan
        • 7231
        • 4,205 Posts
        dev_cw Reply #3, 17 years, 6 months ago
        Cool, I have it bookmarked for the next time I need an accordeon  grin

        Thanks!
          [font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx
          Something is happening here, but you don't know what it is.
          Do you, Mr. Jones? - [bob dylan]
          • 29525
          • 388 Posts
          Terry Reply #4, 17 years, 6 months ago
          Is there a site that is using this? Or a couple of screen shots?
            www.terrybarthdesign.com
            • 6561
            • 139 Posts
            Darkelve Reply #5, 17 years, 6 months ago
            Quote from: Terry at Mar 25, 2009, 04:37 PM

            Is there a site that is using this? Or a couple of screen shots?

            Well, this is a screenshot from work in progress, but should give you a good idea how it’d work:

            http://modxcms.com/forums/index.php?action=dlattach;topic=33617.0;attach=9201;image
              • 10449
              • 956 Posts
              ganeshXL Reply #6, 17 years, 6 months ago
              I installed it, but apart from boxed link styles I don’t see any accordeon-functionality at all. Do you have a working demo? I guess the title "fake accordeon menu" is a bit misleading. Isn’t this just a regular Wayfinder call with nothing but a custom stylesheet attached to it? Shouldn’t there be some kind of rollover/click show/hide effect? Otherwise I wouldn’t call it "accordeon" - it’s just a styled list. Or did you forget to send the JS file with the ZIP?
                http://www.fantastique.ch/
                http://www.dnik.ch/
                http://www.flickr.com/photos/dnik/
                • 6561
                • 139 Posts
                Darkelve Reply #7, 17 years, 6 months ago
                Quote from: ganeshXL at Mar 26, 2009, 04:55 AM

                I installed it, but apart from boxed link styles I don’t see any accordeon-functionality at all. Do you have a working demo? I guess the title "fake accordeon menu" is a bit misleading. Isn’t this just a regular Wayfinder call with nothing but a custom stylesheet attached to it? Shouldn’t there be some kind of rollover/click show/hide effect? Otherwise I wouldn’t call it "accordeon" - it’s just a styled list. Or did you forget to send the JS file with the ZIP?

                Yes, you are right: it is just a basic styled list with boxes. No images or rollovers, nothing fancy or advanced about it. That’s why I called it ’fake’ accordeon ... 

                Edit: oops, seems I forgot to include a hover state (different background color and foreground color) for the links. I’ll upload a new version when I can. The css file lacks these CSS rules:

                #sidebar li a:hover, #sidebar li.level2 a:hover, #sidebar li.level3 a:hover  {
background:  #ffdd00;
color: #fff;
}