Sidr.js 菜单在桌面上禁用答案

【问题标题】：Sidr.js menu disable on desktopSidr.js 菜单在桌面上禁用
【发布时间】：2015-04-17 12:40:44
【问题描述】：

我正在使用 www.berriart.com/sidr/ 从我的 HTML 菜单创建侧边菜单的 jQuery 脚本。它工作得很好，但我想在大于 480 像素的分辨率上显示“标准”菜单，在低于 480 像素的分辨率上显示侧边菜单。

我用 :

触发它

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

我想知道如何限制此脚本仅在屏幕低于 480 像素时运行？

抱歉，这里是 JS 新手 :)

【问题讨论】：

请检查我的回答。如果您需要更多信息，请告诉我:)

标签： javascript jquery sidr

【解决方案1】：

你可以使用

$(窗口).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>

【讨论】：

抱歉，在这里完成 JS 新手 :D 如果我的要求不高，这段代码如何与我目前拥有的代码合并？
@MedvjedJedan 我已经更新了帖子，希望它有效。
谢谢老兄！完美运行，唯一不好的是当我尝试调整窗口大小时它不会改变状态（显示隐藏）。当我刷新它时，它会正确显示。谢谢！

【解决方案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'; });
    }
});

【讨论】：

【解决方案3】：

在 Sidr 的文档/示例页面中查看以下示例：http://berriart.com/sidr/#documentation 在“响应式菜单”部分的标题中。它利用媒体查询仅在屏幕尺寸低于 767 像素时显示移动标题，否则不显示。你可以修改这个例子来达到你想要的效果。

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

【讨论】：

如果我理解正确的话，菜单和切换都不会在更大的分辨率上显示，只会在更小的分辨率上显示。但是，我需要我的“标准”菜单显示在 480 像素以上，而 sidr.js 菜单显示在下面
实际上，他们的例子的问题是它不会隐藏移动宽度的正常导航。没有什么东西可以在更大的分辨率下隐藏#navigation div（保存正常导航），所以它会显示出来。需要添加的是以较小的分辨率隐藏它。我已经对其进行了编辑以表示这一点。

【解决方案4】：

请检查我使用的 CSS sn-p。

最初，对于宽度>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>

【讨论】：