Navigation sidebar animated

#sidebarCollapse.active span {
    /* no rotation */
    transform: none;
    /* all bars are visible */
    opacity: 1;
    margin: 5px auto;
}

Source: bootstrapious.com

Navigation sidebar animated

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
        $(this).toggleClass('active');
    });
});

Source: bootstrapious.com

Navigation sidebar animated

#sidebarCollapse span:first-of-type {
    /* rotate first one */
    transform: rotate(45deg) translate(2px, 2px);
}
#sidebarCollapse span:nth-of-type(2) {
    /* second one is not visible */
    opacity: 0;
}
#sidebarCollapse span:last-of-type {
    /* rotate third one */
    transform: rotate(-45deg) translate(1px, -1px);
}

Source: bootstrapious.com

Similar codes

49 votes230 views3 answers
Center absolute element css
CSS
0 vote191 views2 answers
Css flex justify self
CSS
6 votes179 views2 answers
How to wrap text in div css
CSS
0 vote289 views1 answer
Import global variables scss angular
CSS
0 vote204 views1 answer
Tslib.es6
CSS
-1 vote185 views1 answer
Move up on hover css
CSS
0 vote179 views1 answer
Css display table row gap
CSS
81 votes257 views3 answers
Css all uppercase to capitalize
CSS
12 votes278 views5 answers
How to update the object value of any array key based on value
CSS
2 votes178 views1 answer
How to prevent anchor links from scrolling behind a sticky header with one line of CSS
CSS