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.
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. :)
@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.
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?
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.
Cheers :-)
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
0instead of hiding it withdisplay: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.
I decided that using a small amount of javascript was the way to go.
Cheers all for your help :-)