关闭

mCustomScrollbar实现侧栏

389人阅读 评论(0) 收藏 举报
分类:
最近换工作了,呵呵呵呵呵
然后在做。。。
要实现类似这种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定义的,效果还是可以的.

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:58999次
    • 积分:1342
    • 等级:
    • 排名:千里之外
    • 原创:64篇
    • 转载:46篇
    • 译文:7篇
    • 评论:4条
    文章分类
    最新评论