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
Navigation sidebar animated
$(document).ready(function () { $('#sidebarCollapse').on('click', function () { $('#sidebar').toggleClass('active'); $(this).toggleClass('active'); }); });
Source: bootstrapious.com
Navigation sidebar animated
#sidebarCollapse.active span { /* no rotation */ transform: none; /* all bars are visible */ opacity: 1; margin: 5px auto; }
Source: bootstrapious.com