How to integrate this switch on/off slider technique

Hi guys,

I didn't do the front end for quite a while and have no idea CSS has gone this far.

So take a look at the right side of the navigation bar of this website where it read HEADER ON/OFF and please give me an idea where I can start at if I want to build something like this.

https://www.crownmelbourne.com.au/hotels/crown-towers

Thanks in advance,

 

First I would implement it as show/hide as a normal checkbox behavior using :checked. THEN I would enhance it with JavaScript to set the height since for some ***tard reason CSS3 won't animate a height change from a fixed height to a percentage one.

That way scripting off it works without the animation, scripting on you get the animation.

The base non-scripting enhanced functionality would be near identical to how I handle 'hamburger' menus:
http://www.cutcodedown.com/tutorial/mobileMenu

With the scripting enhancement I'd probably track the checkbox state either in a cookie or in localstorage to be set as appropriate to be "remembered" across pages. To actually get the animation and let CSS do MOST of the heavy lifting you'd need to double-wrap DIV (ick) to handle it, as you'd want to set the outer DIV to overflow:hidden and control its height, setting it to zero when not showing and the height of the inner DIV for it to css-transition into place.

That said, horrible train wreck of how NOT to make a website to be trying to take a concept from.

 

Thank you, I'll try this