侧边栏导航Sidebar nav

支持相对(relative)及固定(fixed)两种模式,需要为触发元素添加data-toggle="sidebar-nav"属性,侧边栏导航内添加data-close="sidebar-nav"属性的元素会触发关闭

Click Button:
<button type="button" data-toggle="sidebar-nav" class="btn">Toggle sidebar nav button</button>

Nav:
<div id="sidebar-nav" class="sidebar-nav relative">
    <div class="media tc">
        <div class="img box30 fc"><img src="imgurl" class="radius"></div>
        <div class="content">
            <h6>Username</h6>
            <p>Good afternoon!</p>
        </div>
    </div>
    <div class="menu accordion">
        <div><a href="#">Home</a></div>
        <div><a>Clothing</a>
            <ul>
                <li><a href="#">T-Shirts</a></li>
                <li><a href="#">Long Sleeve Shirts</a></li>
            </ul>
        </div>
        <div><a>Accessories</a>
            <ul>
                <li><a href="#">Watches</a></li>
                <li><a href="#">Hats</a></li>
            </ul>
        </div>
    </div>
    <i data-close="sidebar-nav" class="flaticon-cross89"></i>
</div>

固定Fixed

修改为class="fixed"使主体内容位置始终是固定的

<div id="sidebar-nav" class="sidebar-nav fixed">
    ...
</div>

激活Active

添加class="active"使其默认是显示的

<div id="sidebar-nav" class="sidebar-nav relative active">
    ...
</div>