簡體   English   中英

使用addClass()切換畫布菜單

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM