jQuery Sidebar 侧边栏
在线实例
左边栏 | 右边栏 |
使用方法
<div class="txt">
<p class="btn">
<span id="toggle-sidebar">展 开</span>
</p>
<p>Simpler Sidebar 是一款简单的 jQuery 侧边栏插件</p>
<p>请点击按钮查看效果</p>
</div>
<div class="sidebar" id="sucaihuo">
<div class="sidebar-wrapper" id="sidebar-wrapper">
<ul class="nav">
<li><a href="#">手册网</a></li>
<li><a href="#">js</a></li>
<li><a href="#">素材</a></li>
<li><a href="#">模板</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
</div>
<script src="/api/jq/5733e36361fd7/js/jquery-1.11.3.min.js"></script>
<script src="/api/jq/5733e36361fd7/js/simpler-sidebar.min.js"></script>
<script>
$(function() {
$('#sucaihuo').simplerSidebar({
opener: '#toggle-sidebar',
sidebar: {
align: 'left',
width: 250
}
});
});
</script>
jQuery Sidebar 侧边栏的更多相关文章
- jquery隐藏侧边栏和折叠侧边栏方法
两种效果如下所示: 隐藏侧边栏: 折叠侧边栏: 下面,分享隐藏侧边栏实现方法: 实现思路:给body切换class,通过class控制侧边栏和主体部分left 来实现效果 html部分: <di ...
- 基于jquery的侧边栏分享导航
今天给大家分享一款基于jquery的侧边栏分享导航.这款分享钮一直固定于左侧,鼠标经过的时候凸出显示,这款分享按钮适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单(转载)
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- 一款基于jquery的侧边栏导航
之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- jQuery+css3侧边栏导航菜单
效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...
- 好用的侧边栏菜单/面板jQuery插件
我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...
- Wordpress制作sidebar.php
调用 在主页以下方法可以调用模板中sidebar.php的内容 <?php get_sidebar(); ?> 判断是否自定义sidebar侧边栏: <?php if ( !func ...
- 《基于JQuery和CSS的特效整理》系列分享专栏
<基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...
随机推荐
- 【WP 8.1开发】上下文菜单
在桌面系统中,别说是开发者,相信有资格考得过计算机一级的人都知道什么叫一下文菜单,或者叫右键菜单. 为了让操作更方便,在手机应用程序中,也应当有这样的菜单.上下文菜单之所以有”上下文“之说,是因为通常 ...
- WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现
一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要有三种实现方式 ...
- Netbeans 中创建数据连接池和数据源步骤(及解决无法ping通问题)
1.启动glassfish服务器, 在浏览器的地址栏中输入 http://localhost:4848 2.首先建立JDBC Connection Pools: 3.new 一个Connectio P ...
- 基于HTML5的3D网络拓扑自动布局
上篇将HT for Web的3D拓扑弹力布局的算法运行在Web Workers后台(http://www.hightopo.com/blog/70.html),这篇我们将进一步折腾,将算法运行到真正的 ...
- 实现iOS图片等资源文件的热更新化(五): 一个简单完整的资源热更新页面
简介 一个简单的关于页面,有一个图片,版本号,App名称等,着重演示各个系列的文章完整集成示例. 动机与意义 这是系列文章的最后一篇.今天抽空写下,收下尾.文章本身会在第四篇的基础上,简单扩充下代码, ...
- Android中的FragmentManager的问题
Fragment是构成灵活UI的重要部分.最近学习到Fragment的使用时候,碰到一个问题.主程序程序布局非常简单: <?xml version="1.0" encodin ...
- C# HTTP上传文件
代码: /// <summary> /// Http上传文件 /// </summary> public static string HttpUploadFile(string ...
- windows自定义命令的创建
首先在任意位置创建一个文件夹,我使用的目录是D:\Program Files\Quick Start\command\,桌面我的电脑/计算机图标右键属性 高级系统设置 -> 高级 -> 环 ...
- 【要什么自行车】ASP.NET MVC4笔记01:Asp.net MVC 分页,采用 MvcPager 和CYQ.Data来分页
Control: ) { ; ; using (MAction action = new MAction("brain")) { MDataTable table = action ...
- redis sentinel 集群配置-主从切换
1.配置redis master,redis slave(配置具体操作见上文http://www.cnblogs.com/wangchaozhi/p/5140469.html). redis mast ...