Как реализовать переход css3 для перехода на эту навигацию?

Question

Я искал «чек-бокс», поэтому я могу создать удобную для мобильных устройств навигацию, используя только CSS3 и javascript.

Я смотрел на этот пример: http://codepen.io/TimPietrusky/pen/gqlhA

уменьшить ширину браузера, чтобы получить к мобильной навигации и вместо нажатия на иконку гамбургера и с навигации внезапно появляются, я пытаюсь иметь он сдвигается вниз, а затем снова восстанавливается, как только пользователь снова нажимает значок.

Я знаю, что могу использовать свойство перехода css3. Я попытался установить высоту в UL и использовать:

transition: height 1s linear; 

Это не работает. Я думал, что если я установил начальную высоту 0, а затем высоту 100% после того, как будет установлен флажок, она будет работать. Я не могу это понять. Я совершенно новичок в этом свойстве, поэтому любая помощь будет действительно оценена.

Спасибо большое.

Answer 1

Я нашел, что transitioning height doesn't always work. Попробуйте использовать max-height вместо