在桌面上禁用Sidr.js菜单

我正在使用www.berriart.com/sidr/ jQuery脚本从我的HTML菜单创建侧面菜单。它的工作原理非常完美，但我想在分辨率大于480像素的分辨率下显示“标准”菜单，在480像素分辨率下显示分辨率的菜单。在桌面上禁用Sidr.js菜单

我与触发它：

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

，我想知道如何限制这个脚本只有当屏幕波纹管480像素运行？

对不起，JS新手在这里:)

来源

2015-04-17 Medvjed Jedan

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

你可以使用

$（窗口）.WIDTH（） $（窗口）.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>

来源

2015-04-17 12:50:50 Cherry

对不起，完整的JS新手在这里：D 如果我不要求太多，这个代码将如何与我迄今为止的一个结合？ –

@MedvjedJedan我已更新帖子，希望它有效。 – Cherry

谢谢兄弟！完美的作品，只有不好的一点是，当我尝试调整窗口大小时，它不会改变状态（显示 - 隐藏）。当我刷新它时，它会正常显示。谢谢！ –

看从锡德的文档/示例页面下面的例子：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>

来源

2015-04-17 12:48:33 JBzd

如果我正确理解这一点，菜单和切换不会显示在更大的分辨率上，只能在较小的分辨率上显示。但是，我需要我的“标准”菜单显示在480px以上和sidr.js菜单波纹管， –

实际上，他们的例子的问题是，它不会隐藏在移动宽度的正常导航。没有什么是在更大的分辨率下隐藏#navigation div（保持正常导航），因此它会显示。需要添加的是以较小的分辨率隐藏它。我已经编辑它来表示。 – JBzd

请检查我使用的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>

来源

2015-04-17 19:44:49

的其他解决方案只能如果你想上的页面加载和页面大小或方向变化适用于移动解决方案在页面加载工作一次。使用这一个。

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

来源

2016-07-07 20:29:11 deefactorial

在桌面上禁用Sidr.js菜单

回答

相关问题