桌面上的Sidr.js菜單禁用

Question

我正在使用www.berriart.com/sidr/ jQuery腳本從我的HTML菜單創建側面菜單。 它工作得很好，但我希望在大於480px的分辨率下顯示“標准”菜單，並且分辨率低於480px的側面菜單。

我用以下方法觸發它：

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

我想知道我怎么能限制這個腳本只在屏幕低於480px時運行？

對不起，JS新手在這里:)

Answer 1

你可以用

$（window）.width（）$（window）.height（）

獲取屏幕的寬度和高度並相應地使用它。

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

Answer 2

如果您想要一個適用於頁面加載和頁面調整大小或移動方向更改的解決方案，則其他解決方案僅適用於頁面加載。 用這個。

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

Answer 3

請查看Sidr的文檔/示例頁面中的以下示例： http ： //berriart.com/sidr/#documentation ，標題為“響應菜單”。 它利用媒體查詢僅在屏幕大小低於767px時顯示移動標題，否則不顯示。 您可以修改此示例以獲得所需的效果。

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

Answer 4

請檢查我使用的CSS代碼段。

最初，對於寬度> 768px， #mobile-header設置為display:none 。

否則， #mobile-header將display:block 。

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