The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Togglable CSS Side Menu

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #44951


    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]( “Sidebar out”)

    [Side menu hidden (mirrored/reflected, but you get the idea)]( “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:

    If anyone had any ideas, or could point me in the right direction it would be greatly appreciated.

    Thank you,


    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]( “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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.