The two effects are as follows:
Hide Sidebar:
Collapse Sidebar:
Below, share the hidden Sidebar implementation method:
Implementation of the idea: to the body switch class, through the class control sidebar and the body part left to achieve the effect
HTML section:
<div class= "sidebar" > Sidebar </div><div class= "main" > Body parts </div>
CSS section:
. Sidebar{background: #333645; width:200px; position:absolute; left:0; top:0; height:100%; overflow:auto; Transition: all 0.2s ease 0s;}. Main{overflow:hidden position:absolute left:200px right:0 height:100% transition:all 0.2s ease 0s;}. Big-page. Sidebar{left: -200px;}. Big-page. main{left:0;}
JS section:
Toggle Side Bar $ (function () { //Toggle Sidebar $ (". Navbar-left li"). Click (Togglesidebar);}); /Toggle Sidebar shows hidden function Togglesidebar () {$ ("body"). Toggleclass ("Big-page"); return false;}
Complete, (>_<),
Next Blog Share folding Sidebar method, (Bo Master write not mature, after all, novice ~ ~)
jquery Hide Sidebar and collapse Sidebar method