I'd like to use something like jQuery's accordion menu, but have the triggered elements be angled. I'm guessing this isn't possible, but thought I'd see if anyone has tried it before.

One idea would be to go old-school and work with image maps. I haven't used an image map in years though, so that'd take a bit of testing to see if it's even possible.

Let me know if any clarification is needed.

Attached is a sketch of the concept.

3 answers

This was chosen as the best answer

Have you looked at this:?


I forked the plugin and added limited ability to effect the slope through a diagAdjust param in the defaults:


Answered over 9 years ago by Christopher McCulloh
  • Ooh, that's hot! I haven't seen it. Looks like it automates Josh's idea. I wonder if it'd be possible to change the angle...45 is a bit harsh. Thanks much! Matt Crest over 9 years ago
  • The plugin itself hasn't been touched for 44 weeks. The way it's written it would take some serious work to try and modify it in any way. Almost worth it to just start over... Christopher McCulloh over 9 years ago
  • You could fork it at github though: http://github.com/tinyjs/diagonal-accordion-/blob/master/jquery.diagonal-accordion.js Christopher McCulloh over 9 years ago
  • Ok, I figured out a hackish way to create a shallower angle. I forked the project and made the change. The key is the diagAdjust parameter. 0=45 degree angle, 11 = no angle. Numbers 1 through 10 will be varying degrees of slope between 0 and 45 degrees... http://github.com/cmcculloh/diagonal-accordion- Christopher McCulloh over 9 years ago
  • Hells yeah! Thanks Christopher. I'll take a gander. Matt Crest over 9 years ago
  • Hey Christopher (and any future viewers of this question) - Just thought I'd pass along that I've implemented a variation of your script into a client site that went live today. Check it out: http://AlliedCommunication.com The only things I changed from your version are the angles and I made it start in the middle, then do the accordion thing when first hovered. I think it turned out pretty well. Cheers, Matt Matt Crest over 9 years ago

The only thing I can think of is having multiple link areas and stagger them at an angle (like a staircase). I'm not sure it's a better solution than an image map, though (at least from a code bloat standpoint).

Answered over 9 years ago by Josh Pigford
  • Thought of that one too. Seems it could get a bit hairy, but is an option. Thanks for the input Josh! Matt Crest over 9 years ago
  • This is the only way I've seen it done before. Christopher McCulloh over 9 years ago

Perhaps I'm oversimplifying, but wouldn't utilizing transparent PNGs be better than using image maps? Doesn't solve the text wrapping issue, but depending on how it's designed, maybe it's a non-issue.

Answered over 9 years ago by Ben Dyer
  • Indeed they would be better. The issue is that when they are overlapping, the clickable/hoverable area also overlaps; thereby rendering the overlapped button basically unusable. Here's a followup sketch (drp.ly/ar9c7). The red horizontal lines represent the target area (hoverable) for button 1. Button 2 then has just a tiny section at the top where a user can hover to activate it. Matt Crest over 9 years ago
  • Sorry, here's an active link to the sketch: <a href="drp.ly/ar9c7">drp.ly/ar9c7</a> Matt Crest over 9 years ago
  • Ballz. No can do on the link-within comments I guess. Matt Crest over 9 years ago
  • yeah, I even mocked up a prototype thinking that with the transparent png and a background set to transparent on the div I'd be able to pull it off, but it didn't work. I wonder if there would be a way to do this with HTML 5 canvas... Christopher McCulloh over 9 years ago