CH4-4(模組化)三明治選單交互動作

三 展開變成 X

CSS

    .navbar-toggle.collapsed span:after{
        transform: rotate(0deg);
    } 
    .navbar-toggle.collapsed span:before{
        transform: rotate(0deg);
        top:10px;        
    }
    .navbar-default .navbar-toggle.collapsed .icon-bar:nth-of-type(2){
        opacity: 1;
    }
    .navbar-toggle span:after{
        transform: rotate(-45deg);
        transition: .4s
    } 
    .navbar-toggle span:before{
        transform: rotate(45deg);
        top:20px;
        transition: .4s
    }
    .navbar-default .navbar-toggle .icon-bar:nth-of-type(2){
        opacity: 0;    
        transition: .4s
    }

三變成一變成X

    .navbar-default .navbar-toggle .icon-bar{
        background-color: #47794e;
        width: 35px;
        height: 3px;
    }
    .navbar-toggle .icon-bar + .icon-bar{
        margin-top: 8px;
    }
    .navbar-default .navbar-toggle.collapsed .icon-bar:last-child{
        margin-top: 8px;
        transform: rotate(0deg);        
        transition:transform .2s ease-in,margin-top .2s .4s ease-in
    }
    .navbar-default .navbar-toggle .icon-bar:last-child{
        margin-top: -4px;
        transform: rotate(45deg);
        transition-delay:.8s;
        transition: margin-top .2s ease-in,transform .2s .4s ease-in;
    }
    .navbar-default .navbar-toggle.collapsed .icon-bar:nth-of-type(2){
        position: relative;
        top: 0;
        margin-top:0px;
        transform: rotate(0deg);        
        transition:transform .2s ease-in,top .2s .4s ease-in;
    }
    .navbar-default .navbar-toggle .icon-bar:nth-of-type(2){    
        position: relative;    
        top: 10px;
        transform: rotate(-45deg) translate(-0px,0px);
        transition-delay:.8s;
        transition: top .2s ease-in,transform .2s .4s ease-in;
    }
    .navbar-default .navbar-toggle.collapsed .icon-bar:nth-of-type(3){
        opacity: 1;
    }
    .navbar-default .navbar-toggle .icon-bar:nth-of-type(3){
        opacity: 0;
        transition: .2s .4s ease-in;
    }