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