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?
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. :)
Just more curious as to whether it was possible.
I can use JS just wanted to see if there were other options.
You could always check out the :target pseudo selector and combine it with your media queries.
@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.
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.
@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.
Cheers all for your help :-)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".