CODEWITHSUNDEEP
javascriptjquerysidr
Medvjed Jedan
Medvjed Jedan

Reputation: 95

Sidr.js menu disable on desktop

I am using www.berriart.com/sidr/ jQuery script that creates side menu from my HTML menu. It works perfectly, but i would like to show the "standard" menu on resolutions bigger than 480px and the sidemenu on resolutions bellow 480px.

I am triggering it with :

<script>
$(document).ready(function() {
  $('#simple-menu').sidr();
});
</script>

and i was wondering how can i limit this script to only run when the screen is bellow 480px?

Sorry, JS newbie here :)

Upvotes: 3

Views: 873

Answers (4)

deefactorial
deefactorial

Reputation: 323

The other solutions only work once on page load, if you want a solution that works on page load and page resize or orientation change for mobile. use this one.

var state = 'undefined';
$('#responsive-menu-button').sidr({
  name: 'sidr-main',
  source: '#navigation'
});

$('#responsive-menu-button').off('click').click(function(e){
  e.preventDefault();
  if(state == 'close'){
    $.sidr('open','sidr-main', function(){ state = 'open'; });
  } else {
    $.sidr('close','sidr-main', function(){ state = 'close'; });
  }
});

var deviceWidth = $(window).width();
var breakWidth = 480;
if(state == 'undefined'){
  if(deviceWidth <= breakWidth) {
    state = 'close';
  } else {
    setTimeout(function(){
      $.sidr('open','sidr-main', function(){ state = 'open'; });
    }, 100);
  }
}

$(window).off('resize').bind('resize', function () {
    deviceWidth = $(window).width();
    if(deviceWidth > breakWidth && state == 'close') {
      $.sidr('open','sidr-main', function(){ state = 'open'; });
    }
    if(deviceWidth <= breakWidth && state == 'open') {
      $.sidr('close','sidr-main', function(){ state = 'close'; });
    }
});

Upvotes: 1

Syed Priom
Syed Priom

Reputation: 2007

Please check the CSS snippet I used.

Initially, for width>768px the #mobile-header is set to display:none.

Otherwise, #mobile-header will be display:block.

<style>
#mobile-header { display: none; }
@media only screen and (max-width: 768px){
#mobile-header { display: block;}
#nav-wrapper { display: none; }
}
</style>

Upvotes: 0

Cherry
Cherry

Reputation: 393

You could use

$(window).width() $(window).height()

to get the width and height of the screen and use it accordingly. 

<script>
$(document).ready(function() {
  var width = $(window).width();
   if (width<=480) {
     $('#simple-menu').sidr();
   }
  else
  {
     // you could call the other version of the slider.
   }
});
</script>

Upvotes: 1

JBzd
JBzd

Reputation: 715

Look at the below example from the documentation/example page from Sidr: http://berriart.com/sidr/#documentation in the section title "Responsive Menus". It leverages a media query to only show the mobile header when the screen size is below 767px, otherwise it does not display. You could modify this example to achieve the effect you want.

<style>
#mobile-header {
    display: none;
}
@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }

    #navigation {
        display: none;
    }
}
</style>

<div id="mobile-header">
    <a id="responsive-menu-button" href="#sidr-main">Menu</a>
</div>

<div id="navigation">
    <nav class="nav">
        <ul>
            <li><a href="#download">Download</a></li>
            <li><a href="#getstarted">Get started</a></li>
            <li><a href="#usage">Demos &amp; Usage</a></li>
            <li><a href="#documentation">Documentation</a></li>
            <li><a href="#themes">Themes</a></li>
            <li><a href="#support">Support</a></li>
        </ul>
    </nav>
</div>

<script>
    $('#responsive-menu-button').sidr({
      name: 'sidr-main',
      source: '#navigation'
    });
</script>

Upvotes: 0

Related Questions