mCustomScrollbar实现侧栏

原创 2017年01月03日 10:20:43
最近换工作了,呵呵呵呵呵
然后在做。。。
要实现类似这种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定义的,效果还是可以的.

mCustomScrollbar的使用

最近做项目用到这个东西,顺便就写下来。 官网链接:mCustomScrollbar 下载JS、CSS文件:jquery.mCustomScrollbar.js和jquery.mCustomScro...
  • q136780964
  • q136780964
  • 2017年02月22日 11:41
  • 296

mCustomScrollbar 的介绍和使用方法

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法 http://www.qianxingzhem.com/post-1602.html ...
  • lemon1330
  • lemon1330
  • 2016年03月07日 15:35
  • 529

jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar。 关于 jS...
  • yzbben
  • yzbben
  • 2017年02月06日 16:55
  • 721

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法 系统默认的滚动条样式,真的已经看的够恶心了。试想一下,如果在一个很有特色和创意的网...
  • cdnight
  • cdnight
  • 2014年11月21日 17:04
  • 37056

jquery个性滚动条插件jquery.mCustomScrollbar.js的使用

jquery.mCustomScrollbar.js是一款非常漂亮的滚动条样式插件,同过它你可以自由的定制自己喜欢的滚动条。 而且兼容IE6 和IE7等的浏览器 jQuery cust...
  • u012844719
  • u012844719
  • 2013年12月03日 16:12
  • 10742

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

转自:http://www.qianxingzhem.com/post-1602.html
  • ruantao1989
  • ruantao1989
  • 2014年08月22日 14:37
  • 3549

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

http://www.qianxingzhem.com/post-1602.html 系统默认的滚动条样式,真的已经看的够恶心了。试想一下,如果在一个很有特色和创意的网页中,出现了一根系...
  • qw_xingzhe
  • qw_xingzhe
  • 2016年02月02日 09:57
  • 732

美化滚动条插件mCustomScrollbar.js的使用示例

1 兼容性:ie8+ mCustomScrollbar * {margin: 0; padding: 0;} bod...
  • u011500781
  • u011500781
  • 2016年03月01日 13:44
  • 4824

jquery.mCustomScrollbar自定义滚动条插件

  • 2018年01月17日 11:21
  • 546KB
  • 下载

自定义滚动条插件--mCustomScrollbar

RT. 插件官方网址:http://manos.malihu.gr/jquery-custom-content-scroller/ 中文翻译网址:http://www.qianxingzhem.c...
  • killzero
  • killzero
  • 2014年08月29日 13:59
  • 1636
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:mCustomScrollbar实现侧栏
举报原因:
原因补充:

(最多只允许输入30个字)