Wie benutze ich sideNav innerhalb von o col (anstatt über die Website)?

Question

Ich versuche ein "sideNav" innerhalb eines "col" zu haben, also kann jeder der "cols" ein "side panel" mit Optionen haben, die optimiert werden können.

Meine Vorlage sieht wie folgt aus etwas:

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

I initialisieren meine Taste mit:

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

Aber leider ist die SideNav über die gesamte Website wird statt sich auf das übergeordnete „col Begrenzung ".

Ich versuchte mit der Position: relativ auf der Spalte, aber das hat nicht funktioniert.

Jeder Rat ist mehr als geschätzt.

EDIT (einige Fortschritte haben):

Umschalten der Seiten nav div Position "absolute" und Eltern "relativ" fast perfekt der Trick.

Aber es gibt noch ein paar CSS-Themen:

1 - Ich brauche nicht die Webseite mit dem „schwarzen Overlay“ zu blockieren, da die Seiten nav gemeint ist, enthalten sein im "Widget".

2 - "position: absolute" macht das Side-Nav über den "Kartenschatten" sichtbar und respektiert vielleicht auch nicht die durch den Schatten erzeugte Polsterung?

Answer 1

Wenn ich es richtig verstehe, möchten Sie 2 oder mehr Seitennavs auf Ihrem Code machen. um das zu ändern, müssen Sie die Größe Ihrer Spalte ändern.

<div class="col s12 m6 l6"> versuchen, es weniger für Tablet und Desktop zu machen.