在桌面上禁用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菜單

回答

相關問題