mCustomScrollbar实现侧栏

最近换工作了，呵呵呵呵呵

然后在做。。。

要实现类似这种sliderbar的侧边栏

还不会用jquery自己做plugin,很忧伤。额

不过大概做出来了，这样的效果，就是没有集成组件哈。不能复用吧，不是很好的说

html:

        <div class="sd-normal">

            <div class="logo">

                <div class="logo-wx">

                    <a href="http://www.xiguaji.com" target="_blank">万象助手</a>

                </div>

            </div>

            <nav>

                <ul>

                    <li class="active">

                        <a href="/Home/Dashboard" title="工作台"><i class="iconfont icon-gongzuotai"></i> <span class="menu-item-parent">工作台</span></a>

                    </li>

                    <li>

                        <a href="#" title="图文同步"><i class="iconfont icon-tuwentongbu"></i> <span class="menu-item-parent">图文同步</span></a>

                        <ul>

                            <li>

                                <a href="/Material/List" title="我的图文">我的图文</a>

                            </li>

                            <li>

                                <a href="/Material/Favorites" title="我的素材库">我的素材库</a>

                            </li>

                            <li>

                                <a href="/MBiz/Manage">我运营的公众号</a>

                            </li>

                        </ul>

                    </li>

                    <li>

                        <a href="#" title="素材收集"><i class="iconfont icon-sucaiku"></i> <span class="menu-item-parent">素材收集</span></a>

                        <ul>

                            <li>

                                <a href="/MArticle/Explore" title="全网优质素材">全网优质素材</a>

                            </li>

                            <li>

                                <a href="/MArticle/Attention" title="我关注的">我关注的</a>

                            </li>

                            <li>

                                <a href="/MArticle/DarkHorse" title="黑马爆文">黑马爆文</a>

                            </li>

                            <li>

                                <a href="/Subscribe/List" title="智能订阅">智能订阅</a>

                            </li>

                            <li>

                                <a href="/MArticle/Particular" title="专享素材">专享素材</a>

                            </li>

                            <li>

                                <a href="/MArticle/Original" title="原创优选">原创优选</a>

                            </li>

                        </ul>

                    </li>

                    <li>

                        <a href="#" title="高级功能"><i class="iconfont icon-gaojigongneng"></i> <span class="menu-item-parent">高级功能</span></a>

                        <ul style="display:none">

                            <li>

                                <a href="/IllegalArticle/List" title="违规文章曝光台">违规文章曝光台</a>

                            </li>

                            <li>

                                <a href="/Diagnosis" title="公众号诊断">公众号诊断</a>

                            </li>

                            <li>

                                <a href="/MBiz/Search" title="全网公众号搜索">全网公众号搜索</a>

                            </li>

                            <li>

                                <a href="/MBiz/Rank" title="热门公众号榜单">热门公众号榜单</a>

                            </li>

                            <li>

                                <a href="/DaDa" title="西瓜答答">西瓜答答</a>

                            </li>

                            <li>

                                <a href="/Analysis" title="数据统计">数据统计 <span class="badge inbox-badge bg-color-red">New</span></a>

                            </li>

                        </ul>

                    </li>

                    <li>

                        <a href="/Purchase" title="购买升级" target="_blank"><i class="iconfont icon-xufeijigoumai"></i> <span class="menu-item-parent">购买升级</span> <span class="badge inbox-badge bg-color-red">年付6.8折</span></a>

                    </li>

                    <li>

                        <a href="http://www.xiguaji.com/app" title="西瓜集App" target="_blank"><i class="iconfont icon-xiguaji1"></i> <span class="menu-item-parent">西瓜集App</span> </a>

                    </li>

                    <li>

                        <a href="http://www.xiguaji.com/Knowledge" title="帮助中心" target="_blank"><i class="iconfont icon-bangzhu"></i><span class="menu-item-parent">帮助中心</span></a>

                    </li>

                    <li>

                        <a href="http://zs2.xiguaji.com/Member#/Home/Dashboard" title="返回旧版" target="_blank"><i class="fa fa-star-o" style="font-size:16px"></i> <span class="menu-item-parent">返回旧版</span></a>

                    </li>

                </ul>

            </nav>

        </div>

js:

$(function() {

                     $( "nav" ).mCustomScrollbar({

                           theme : "minimal-dark"

                      });

                });

基本上就能比较好的实现这种效果啦。

这个插件的官网地址http://manos.malihu.gr/
然后我选择的是

jQuery custom content scroller

看了它的api试了好几个，结果发现这种样式实在theme定义的，效果还是可以的.