I'm currently building an Yii application where I want to create my own off-canvas navigation.
It fades in, but I want it to slide in from the left with the transition 0.5s. How can I toggle this with jQuery? Should I use something like addClass()
?
Here's my HTML:
<div id="menu">
<button id="toggle-menu">Toggle</button>
<ul class="navigation">
<li class="nav-item"><?php $this->widget('zii.widgets.CMenu',array(
'items'=>array(
array('label'=>'Home', 'url'=>array('lunch/home')),
array('label'=>'Inschrijven', 'url'=>array('lunch/participate'), 'visible'=>!Yii::app()->user->isGuest),
array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest),
array('label'=>'Beheer lunches', 'url'=>array('/lunch/admin'), 'visible'=>Yii::app()->user->name=="DeBaas"),
array('label'=>'Beheer gebruikers', 'url'=>array('/users/admin'), 'visible'=>Yii::app()->user->name=="DeBaas"),
array('label'=>'Log uit ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)
),
)); ?>
</li>
</ul>
</div>
and my CSS:
#menu {
width: 250px;
position: absolute;
background: #666;
height: 100%;
top: 0;
left: -300px;
transition: left 0.5s;
list-style: none;
z-index: 0;
}
#toggle-menu {
margin-top: 10px;
margin-left: 320px;
}
.active {
left: 0!important;
}
and my JavaScript:
$(document).ready(function() {
$("#toggle-menu").click(function() {
$('#menu').fade('slow')
});
});
for sliding with jquery you can use .animate()
something like
$('#menu')animate({
left: "-=300",
}, 500, function() {
// Animation complete.
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.