- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi,
I’m trying to create a togglable css side menu. Default state is open, user can close menu if desired, clicked again, it will open. Below are two photos of the effect I want to create:
[Side menu shown](http://pluto.justdied.com/w2box/data/tab-out.png “Sidebar out”)
[Side menu hidden (mirrored/reflected, but you get the idea)](http://pluto.justdied.com/w2box/data/tab-in.png “Sidebar in (wrong side, but you get the idea”)
I figured I’d use a checkbox to trigger the toggling. Then have it switch between two spans for the actual button text (in vs out). I couldn’t get that, nor the transitions to work for me. I pretty much wanted the entire sidebar to slide in xx px.
I’m working on CodePen:
http://codepen.io/knut/pen/cbdvi
If anyone had any ideas, or could point me in the right direction it would be greatly appreciated.
Thank you,
Knut
I managed to get the spans to change when clicked. Although it doesn’t seem to respect the following tag:
cursor: pointer;
It is also clickable below the red box. That wasn’t really my intention.
Still no idea how to get the actual sliding in and out to work. I take it that you can’t select a parent or an element with css only, so I might need need implement some javascript to get the desired effect?
Any feedback would be greatly appreciated.
Thank you
[CSS required](http://jsfiddle.net/jnQ4d/ “Css”)
problem is that if i hover on Services it must show a div below which is displayed none by default but on hover it will display as a block , actually i dont know the css for that so pleas help me