- This topic is empty.
October 30, 2012 at 11:49 am #40522kjettermanMember
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:
Thank you for any help or guidance you can offer!October 30, 2012 at 12:09 pm #112934Paulie_DMember
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
li.level > a:after
instead and the move it with the positioning.
It’s perhaps not the most elegant solution and I haven’t solved the transitioning. I’ll leave that to others.October 30, 2012 at 10:44 pm #112994ksmithMember
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.
- The forum ‘CSS’ is closed to new topics and replies.