-1

I have been looking into the 'check-box hack' so I can create a mobile friendly navigation using only CSS3 and no javascript.

I've been looking at this example: http://codepen.io/TimPietrusky/pen/gqlhA

Reduce the width of the browser to get to the mobile navigation and instead of clicking the hamburger icon and having the navigation suddenly appear, I'm trying to have it slide down and then back up again once the user presses the icon again.

I know I can use the css3 transition property. I've tried setting the height to the UL and using:

transition: height 1s linear;

This doesn't work. I thought that if I set an initial height of 0 and then a height of 100% once the check-box is checked then it would work. I can't quite figure this out. I'm quite new to this property so any help would be really appreciated.

Thanks alot.

Forrest
  • 107
  • 2
  • 4
  • 16

1 Answers1

0

I've found that transitioning height doesn't always work. Try using max-height instead

Community
  • 1
  • 1
Jason
  • 734
  • 1
  • 7
  • 17