如何在o col中使用sideNav（而不是通過網站）？

我試圖在「col」裏面有一個「sideNav」，這樣每個「cols」都可以有一個「側面板」，可以調整選項。如何在o col中使用sideNav（而不是通過網站）？

我的模板看起來是這樣的：

<div class="col s12 m12 l12"> 

    <i class="material-icons sidenavact" data-activates='slide-out1'>menu</i> 

    // my content here 

    <ul id="slide-out1" class="side-nav right hide-on-med-and-down"> 
     <li><a href="#!">First Sidebar Link</a></li> 
     <li><a href="#!">Second Sidebar Link</a></li> 
    </ul> 

    </div> 


    <div class="col s12 m12 l12"> 

    <i class="material-icons sidenavact" data-activates='slide-out2'>menu</i> 

    // my content here 

    <ul id="slide-out2" class="side-nav right hide-on-med-and-down"> 
     <li><a href="#!">First Sidebar Link</a></li> 
     <li><a href="#!">Second Sidebar Link</a></li> 
    </ul> 

    </div>

我初始化我的按鈕有：

$(col).find('.sidenavact').sideNav({ closeOnClick: true, edge: 'right' })

但不幸的是SideNav會在整個網站，而不是限制自己的父母「山坳」。

我嘗試過使用位置：col上的相對位置，但沒有奏效。

任何建議是超過讚賞。

EDIT（有一些進展）：

切換側面導航DIV位置爲「絕對」和父母「相對」幾乎沒有的伎倆完美。

但仍有一對夫婦的CSS問題：

1 - 我不需要阻止與「黑覆蓋」，因爲側面導航是指網頁被包含在「小部件」中。

2「position：absolute」正在使side-nav顯示在「卡片陰影」上，也許不會考慮陰影創建的填充？

來源

2016-04-20 kroe

如果我承認它是正確的，你想在你的代碼上做2個或更多的側面導航。使你需要改變你的列的大小。

<div class="col s12 m6 l6">儘量減少平板電腦和桌面。

來源

2016-04-21 13:31:34

我剛剛更新了示例代碼，使其更具自我解釋性，關於您的建議，它已經在col內部，並且更改col的大小並不會改變結果。 sideNav仍然會在網站上，並不限於父col // = – kroe

裏面，你有什麼鏈接可以下載它？我可以嘗試解決它並張貼在這裏給你 –

但我需要看代碼才能知道你缺少的東西 –

如何在o col中使用sideNav（而不是通過網站）？

回答

相關問題