[英]Toggling an off-canvas menu with addClass()
我目前正在构建一个Yii应用程序,我想在其中创建自己的画布外导航。
它逐渐淡入,但我希望它在过渡0.5s的情况下从左侧滑入。 如何使用jQuery切换? 我应该使用类似addClass()
东西吗?
这是我的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>
和我的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;
}
和我的JavaScript:
$(document).ready(function() {
$("#toggle-menu").click(function() {
$('#menu').fade('slow')
});
});
使用jquery滑动时,可以使用.animate()
就像是
$('#menu')animate({
left: "-=300",
}, 500, function() {
// Animation complete.
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.