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定义的,效果还是可以的.

相关文章推荐

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

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

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

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

自定义滚动条插件--mCustomScrollbar

RT. 插件官方网址:http://manos.malihu.gr/jquery-custom-content-scroller/ 中文翻译网址:http://www.qianxingzhem.c...

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

转自:http://www.qianxingzhem.com/post-1602.html

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

1 兼容性:ie8+ mCustomScrollbar * {margin: 0; padding: 0;} bod...

实现侧栏固定宽度,内容栏宽度自适应

常用侧栏固定宽度,内容栏的宽度自适应,在不同的分辨率下实现宽度自适应。下面是我根据工作实践总结的一些实现方法的demo。方法一:固定宽度区浮动 float,自适应区宽度自适应设置 marginhtml...
  • zfangls
  • zfangls
  • 2016年12月03日 17:15
  • 175

svg动画实现弹性侧栏菜单

众所周知,flash动画类型可以分为补间动画和逐帧动画,补间动画又可以分为属性改变(大小、位置、颜色等)和形状改变(直线变弧线等)。网页动画里,我们可以使用css3、javascript(jquery...
  • whqet
  • whqet
  • 2014年12月31日 00:03
  • 3808

jQuery展开折叠侧栏导航菜单

< dl>< /dl>用来创建一个普通的列表, < dt>< /dt>用来创建列表中的上层项目, < /dd>用来创建列表中最下层项目, < dt>< /dt>和< dd>< /dd>都必须放在< d...
  • mqy1023
  • mqy1023
  • 2017年05月25日 09:27
  • 514

IOS仿网易新闻客户端左右侧栏

左右侧栏已经是当前APP最流行的布局,很多客户端软件都使用了左右侧栏,例如网易新闻,人人网,Weico等等。 这篇博客以当前网易新闻客户端的模式为例仿写了一个左右侧栏架构实现。 先看一下Demo的...
  • ran0809
  • ran0809
  • 2013年10月11日 00:12
  • 5445

Android知识点四:侧栏滑动效果

首先准备工作:mframework.jar包(SlidingMenu)     MainActivity.java     private SlidingMenu menu; private M...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:mCustomScrollbar实现侧栏
举报原因:
原因补充:

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