Dimek Dimek - 3 years ago 253
CoffeeScript Question

Mobile menu doesn't work properly

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")

$('#button-close').on "click", ->
$(this).css("display", "none")
$('#button-open').css("display", "block")
$('#wrapper').animate({left: '0px'}, 10)

if $(window).width() <= 768
$('#wrapper').css('margin', '0px 0px 0px 0px')
$('#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.

Answer Source

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)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download