Mobile menu doesn't work properly

Question

I'm struggling with this issue:
I'm trying to make a mobile menu on my site using bootstrap and coffeescript. Page is fully responsive and it's working quite well. But as I added a buttons to hide and show menu on mobile view(via coffeescript) buttons don't dissappear when I resize window on desktop view.

 $('#button-open').on "click", ->

    $('#wrapper').animate({left: '220px'}, 10)

    $(this).css("display", "none")

    $('#button-close').css("display", "block")

    $('.navbar').slideDown(380)



  $('#button-close').on "click", ->

    $(this).css("display", "none")

    $('#button-open').css("display", "block")

    $('.navbar').slideUp(1)

    $('#wrapper').animate({left: '0px'}, 10)





  if $(window).width() <= 768

     $('#wrapper').css('margin', '0px 0px 0px 0px')

  else

     $('#wrapper').css('margin', '0px 0px 0px 220px') and $('#button-close').css('display', 'none')

Don't mind the animation, it works just fine. The problems are: buttons are still visible when window change its size over 768px and wrapper behaves in two ways, depends how I change code: it add another 220px margin on left or stays on margin 0px when I resize window.
My goals are:
- buttons are only visible on window with width < 768px
- wrapper always has 0px left when width < 768 and left 220px when width > 768px.

I tried to write function which dynamically change it, but I failed. If/else statement works, but only when I don't resize window.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

I've never used coffeescript, but with pure CSS, I would go that way:

#menu {
    position: fixed;   // position menu anywhere on your screen
    z-index: 99;       // lay it on top
    left: 100vw;       // position at the right border of the screen -> invisible
    width: 90vw;       // don't forget to set dimensions
    height: 100vh;
    transition: left 0.5s ease-out;  // don't forget multi-browser-support
}

// when adding class "active" to menu, slide it in
#menu.active {
    left: 0;           // slide it in -> visible
}

It's now your turn to make it work with coffeescript (or whatever you use)

Mobile menu doesn't work properly

Sign up