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.
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.
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.
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!
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
However, this will place the triangle AFTER the submenu. You could try
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.
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.
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.