Grow your CSS skills. Land your dream job.

Creating Animated Responsive Menu

  • # February 19, 2013 at 9:58 am

    I’m trying to create a responsive menu similar to bootstrap but was wondering if it’s possible without javascript?

    I have a double row menu (http://cdpn.io/BtEFy) so I have a hidden mobile-nav section that I want to animate – a la Bootstrap menus rather than just hiding and showing.

    Is this possible?

    # February 19, 2013 at 10:02 am

    Instead of animate, you could think of ‘transition’ but, in general, the answer is probably no…especially if you want this sort of thing to happen on a ‘click’ event.

    Is there a reason why you don’t want to use JS? Apparently it’s very popular. :)

    # February 20, 2013 at 8:04 am

    Just more curious as to whether it was possible.

    I can use JS just wanted to see if there were other options.

    Cheers :-)

    # February 20, 2013 at 6:12 pm

    You could always check out the :target pseudo selector and combine it with your media queries.

    # February 21, 2013 at 12:00 am

    @Paulie_D: Transition can happen with a click event if we use a checkbox hack or CSS `:target`. But you have to set a fixed height for the drop-down menu.

    # February 21, 2013 at 12:56 am

    Sorry, I’m not good in Preprocessor, but maybe this example will explain what I mean. Set the submenu height to `0` instead of hiding it with `display:none`, so you can animate the sub-menu height.

    # March 5, 2013 at 6:09 am

    @Hompimpa The menu could change it’s contents though over time and I don’t think you can transition to height:auto. I did try that technique once (although yours has a nicer effect) but decided it wasn’t going to work.

    # March 5, 2013 at 6:10 am

    I decided that using a small amount of javascript was the way to go.

    Cheers all for your help :-)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".