左右面板導航

我試圖在jQuery導航上工作。導航將固定在桌面上打開，但會在移動設備上關閉並根據請求打開。左右面板導航

我的目標。

1）左側面板打開並在移動設備上時將身體內容推開。

2）右側面板完全相同，但在右側。

我已經創建了html，但我似乎無法找到一個jQuery的解決方案。

有什麼想法？

乾杯

保羅

http://jsfiddle.net/x3Rpk/

<div id="leftnav"> click to close and open on mobile device</div> 
<div id="main-content">content her</div> 
<div id="rightnav"> click close and open on mobile device</div>

來源

2013-09-29 Paul Designer

您是否曾經找到滿意的解決方案？ – jtheletter

插件引導：http://jasny.github.io/bootstrap/components/#navmenu-offcanvas

插件Zurb基金會：http://foundation.zurb.com/docs/components/offcanvas.html

或者如果你喜歡建立自己的流n，下面使用jQuery和Bootstrap，但它可以免費構建。

概念的DIY體形：http://scotch.io/tutorials/off-canvas-menus-with-css3-transitions-and-transforms

演示DIY構建的：http://jsbin.com/xiviza/1/

HTML：

<body> 
    <div id="site-wrapper"> 
    <div id="site-canvas"> 
     <div id="site-menu"> 
     </div> 
     <a href="#" class="toggle-nav btn btn-lg btn-success" id="big-sexy"><i class="fa fa-bars"></i></a> 
    </div> 
    </div> 
</body>

CSS：

#site-wrapper { 
    background: pink; 
    height: 1000px; /* Arbitrary. */ 
    overflow: hidden; 
} 

#site-canvas { 
    background: tan; 
    height: 100%; 
    -webkit-transition: .3s ease all; 
    transition: .3s ease all; 
} 

#site-menu { 
    background: yellow; 
    width: 250px; 
    height: 100%; 
    position: absolute; 
    left: -250px; 
    padding: 15px; 
} 

#site-wrapper.show-nav #site-canvas { 
    -webkit-transform: translateX(250px); 
    transform: translateX(250px); 
}

JS：

$(function() { 
    $('.toggle-nav').click(function() { 
    $('#site-wrapper').toggleClass('show-nav'); 
    }); 
});

來源

2014-07-22 03:48:16 jtheletter

左右面板導航

回答

相關問題