1

I'm trying to animate a slide in menu using CSS/JavaScript (SASS/CoffeSript). It works like this, the only problem is that the width of the menu which slides in is hardcoded (233px). How can I dynamically get the width of the div and set it back, when I need to set the width of the div to 0 in CSS on start? Can I somehow calculate what the div width should be and set this again?

Any ideas how I might solve this to get the width dynamically, so that I can add/remove items to the menu without changing a hardcoded value in the CoffeScript?

HTML/PUG:

// Module: Header
.header
  .header--logo
    a(href="/", class="link-logo")
      img(src="/img/logo.svg")
  .header--menu#menu
    a(href="#", class="link-menu")
      img(src="/img/menu.svg", id="clicked-menu-item")
    ul#nav
      li: a(href="") projects
      li: a(href="") contact
      li: a(href="") self

CSS/SASS: 

.header
  position: sticky
  top: 0
  left: 0
  background-color: $lightColor
  display: flex
  justify-content: space-between
  padding: $baselineHeight

  &--menu
    display: flex
    align-items: center

    ul
      width: 0px
      overflow-x: hidden
      transition: width ease-in-out 300ms

      li
        display: inline
        margin-left: $baselineHeight

JavaScript/CoffeScript:

element = document.getElementById('clicked-menu-item')
element.onclick = (obj) ->
    if (obj.srcElement.classList.contains('clicked'))
        document.getElementById("nav").style.width = "0px"
    else
        document.getElementById("nav").style.width = "233px"
    obj.srcElement.classList.toggle('clicked')
    false
eivindml
  • 2,197
  • 7
  • 36
  • 68
  • What if you replace `233px` with `auto`? – StardustGogeta Nov 07 '17 at 20:02
  • @StardustGogeta It work's, but then the transition animation stops working. This: `transition: width ease-in-out 300ms`. So not a solution. Not sure why this wont work with `auto`? – eivindml Nov 07 '17 at 20:05
  • 2
    In that case, https://stackoverflow.com/questions/38643529/css-transition-auto-width seems to suggest using `max-width` and resetting to zero rather than `auto`. – StardustGogeta Nov 07 '17 at 20:08
  • Yeah, I've tried that, but it introduces a delay with the animation if the `max-width` is not exactly the same as the actual div. So I'm more interested if there is some way to actually calculate the rendered width using JavaScript. – eivindml Nov 07 '17 at 20:18
  • Have you tried resetting to `max-width: initial` or `max-width: none` instead? – StardustGogeta Nov 07 '17 at 20:19
  • @StardustGogeta Good idea, tried that now, and same result where it works, but no animation. – eivindml Nov 07 '17 at 20:22
  • 1
    Okay, I will try messing around with it myself and see if I can come up with any ideas. – StardustGogeta Nov 07 '17 at 20:23
  • 1
    I can't seem to get anywhere with just CSS, but perhaps https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height will help if you can use JavaScript to take the rendered width before changing the element and save this to a variable. – StardustGogeta Nov 09 '17 at 21:22

0 Answers0