1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to integrate this switch on/off slider technique

Discussion in 'HTML & Website Design' started by ketting00, Nov 23, 2017.

  1. #1
    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
    SEMrush
    Thanks in advance,
     
    ketting00, Nov 23, 2017 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,546
    Likes Received:
    1,524
    Best Answers:
    223
    Trophy Points:
    515
    #2
    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.
     
    deathshadow, Dec 3, 2017 IP
  3. ketting00

    ketting00 Active Member

    Messages:
    677
    Likes Received:
    14
    Best Answers:
    3
    Trophy Points:
    68
    #3
    Thank you, I'll try this
     
    ketting00, Dec 4, 2017 IP