Vertical menu with css3 slideout transition and css3 triangle

[kjetterman]

Hello,

I need a little help with my project. I’m trying to design a vertical menu with a slide-out submenu. Additionally, instead of a graphic, I would like to use a css3 generated triangle to the right of menu items with a sub-menu using the :after selector.

Unfortunately, I am having trouble getting the CSS3 transition to work (the slide or slide-out) and my triangle is not showing up.

Here is my code on JS fiddle:

http://jsfiddle.net/6ueCU/

Thank you for any help or guidance you can offer!

[Paulie_D]

You cannot transition visibility or display:none as they have binary states (either on or off).

You are trying to transition opacity without setting two different opacity states.

The triangle will not show up because you have omitted the content property

li.level:after {
content:””;
}

However, this will place the triangle AFTER the submenu. You could try

li.level > a:after

instead and the move it with the positioning.

http://codepen.io/Paulie-D/pen/vdfIq

It’s perhaps not the most elegant solution and I haven’t solved the transitioning. I’ll leave that to others.

[ksmith]

Tricky problem. Think I have a decent solution that could possibly be implemented with some adjusting and testing! You’ll need to go though and make sure the browser prefixes are in there I didn’t bother with those pesky things. Check it out [here](http://codepen.io/Etromania/pen/eJfIm “http://codepen.io/Etromania/pen/eJfIm”).

PS: I made it much more scary since it was lacking for this time of year. Also on a more serious note you may want to visually break up the links in the vertical nav since a user will have to stay inside the a tag to extend the submenu. Just a thought.

Also I didn’t mess with the triangle in css. Thats a bit overkill IMO for a tiny image. I used JS to add the image automatically though which is nice.

[Author]

Posts