Can not call sidenav inside another sidenav(2 Sidenavs in one html, Materialize)
up vote
0
down vote
favorite
Im trying to call another sidenav into my main sidenav(2 sidenavs in the same html). Heres is my code.
<ul id="sidenav-1" class="sidenav">
<li><a class="waves-effect" data-target="sidenav-2" class="right sidenav-trigger show-on-medium-and-up">Editar perfil<i class="material-icons">edit</i></a></li>
ul id="sidenav-2" class="sidenav">
<a href="#user"><img class="circle" src=".jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<div class="fixed-action-btn"><a class="btn-floating btn-large waves-effect waves-light ligh-blue sidenav-trigger tooltipped fixed" data-target="sidenav-1" class="left sidenav-trigger hide-on-medium-and-up" data-tooltip="Informacion"><i class="material-icons">adjust</i></a></div>
<script>
$(document).ready(function()
$('.tooltipped').tooltip();
$('.collapsible').collapsible();
$('.sidenav').sidenav();
$('#sidenav-1').sidenav( edge: 'right' );
$('#sidenav-2').sidenav( edge: 'left' );
);
</script>
Im using Materialize framework.
javascript html css materialize
add a comment |
up vote
0
down vote
favorite
Im trying to call another sidenav into my main sidenav(2 sidenavs in the same html). Heres is my code.
<ul id="sidenav-1" class="sidenav">
<li><a class="waves-effect" data-target="sidenav-2" class="right sidenav-trigger show-on-medium-and-up">Editar perfil<i class="material-icons">edit</i></a></li>
ul id="sidenav-2" class="sidenav">
<a href="#user"><img class="circle" src=".jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<div class="fixed-action-btn"><a class="btn-floating btn-large waves-effect waves-light ligh-blue sidenav-trigger tooltipped fixed" data-target="sidenav-1" class="left sidenav-trigger hide-on-medium-and-up" data-tooltip="Informacion"><i class="material-icons">adjust</i></a></div>
<script>
$(document).ready(function()
$('.tooltipped').tooltip();
$('.collapsible').collapsible();
$('.sidenav').sidenav();
$('#sidenav-1').sidenav( edge: 'right' );
$('#sidenav-2').sidenav( edge: 'left' );
);
</script>
Im using Materialize framework.
javascript html css materialize
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
Im trying to call another sidenav into my main sidenav(2 sidenavs in the same html). Heres is my code.
<ul id="sidenav-1" class="sidenav">
<li><a class="waves-effect" data-target="sidenav-2" class="right sidenav-trigger show-on-medium-and-up">Editar perfil<i class="material-icons">edit</i></a></li>
ul id="sidenav-2" class="sidenav">
<a href="#user"><img class="circle" src=".jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<div class="fixed-action-btn"><a class="btn-floating btn-large waves-effect waves-light ligh-blue sidenav-trigger tooltipped fixed" data-target="sidenav-1" class="left sidenav-trigger hide-on-medium-and-up" data-tooltip="Informacion"><i class="material-icons">adjust</i></a></div>
<script>
$(document).ready(function()
$('.tooltipped').tooltip();
$('.collapsible').collapsible();
$('.sidenav').sidenav();
$('#sidenav-1').sidenav( edge: 'right' );
$('#sidenav-2').sidenav( edge: 'left' );
);
</script>
Im using Materialize framework.
javascript html css materialize
Im trying to call another sidenav into my main sidenav(2 sidenavs in the same html). Heres is my code.
<ul id="sidenav-1" class="sidenav">
<li><a class="waves-effect" data-target="sidenav-2" class="right sidenav-trigger show-on-medium-and-up">Editar perfil<i class="material-icons">edit</i></a></li>
ul id="sidenav-2" class="sidenav">
<a href="#user"><img class="circle" src=".jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<div class="fixed-action-btn"><a class="btn-floating btn-large waves-effect waves-light ligh-blue sidenav-trigger tooltipped fixed" data-target="sidenav-1" class="left sidenav-trigger hide-on-medium-and-up" data-tooltip="Informacion"><i class="material-icons">adjust</i></a></div>
<script>
$(document).ready(function()
$('.tooltipped').tooltip();
$('.collapsible').collapsible();
$('.sidenav').sidenav();
$('#sidenav-1').sidenav( edge: 'right' );
$('#sidenav-2').sidenav( edge: 'left' );
);
</script>
Im using Materialize framework.
<ul id="sidenav-1" class="sidenav">
<li><a class="waves-effect" data-target="sidenav-2" class="right sidenav-trigger show-on-medium-and-up">Editar perfil<i class="material-icons">edit</i></a></li>
ul id="sidenav-2" class="sidenav">
<a href="#user"><img class="circle" src=".jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<div class="fixed-action-btn"><a class="btn-floating btn-large waves-effect waves-light ligh-blue sidenav-trigger tooltipped fixed" data-target="sidenav-1" class="left sidenav-trigger hide-on-medium-and-up" data-tooltip="Informacion"><i class="material-icons">adjust</i></a></div>
<script>
$(document).ready(function()
$('.tooltipped').tooltip();
$('.collapsible').collapsible();
$('.sidenav').sidenav();
$('#sidenav-1').sidenav( edge: 'right' );
$('#sidenav-2').sidenav( edge: 'left' );
);
</script>
<ul id="sidenav-1" class="sidenav">
<li><a class="waves-effect" data-target="sidenav-2" class="right sidenav-trigger show-on-medium-and-up">Editar perfil<i class="material-icons">edit</i></a></li>
ul id="sidenav-2" class="sidenav">
<a href="#user"><img class="circle" src=".jpg"></a>
<a href="#name"><span class="white-text name">John Doe</span></a>
<a href="#email"><span class="white-text email">jdandturk@gmail.com</span></a>
</div></li>
<li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
<li><a href="#!">Second Link</a></li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
<div class="fixed-action-btn"><a class="btn-floating btn-large waves-effect waves-light ligh-blue sidenav-trigger tooltipped fixed" data-target="sidenav-1" class="left sidenav-trigger hide-on-medium-and-up" data-tooltip="Informacion"><i class="material-icons">adjust</i></a></div>
<script>
$(document).ready(function()
$('.tooltipped').tooltip();
$('.collapsible').collapsible();
$('.sidenav').sidenav();
$('#sidenav-1').sidenav( edge: 'right' );
$('#sidenav-2').sidenav( edge: 'left' );
);
</script>
javascript html css materialize
javascript html css materialize
asked Nov 8 at 17:19
Antonio Miguel Toche Tuesta
33
33
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53213001%2fcan-not-call-sidenav-inside-another-sidenav2-sidenavs-in-one-html-materialize%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown