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 ...
随机推荐
- 分享系列--面试JAVA架构师--链家网
本月7日去了一趟链家网面试,虽然没有面上,但仍有不少收获,在此做个简单的分享,当然了主要是分享给自己,让大家见笑了.因为这次是第一次面试JAVA网站架构师相关的职位,还是有些心虚的,毕竟之前大部分时间 ...
- Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...
- 一步一步教你安装openstack
openstack,安装的门槛比较高,而且相当麻烦,很多的安装文档作者省了不少安装步骤.这对初学的人带来了很大的麻烦,也许作者轻易节省一步,就会创成后面的安装失败.而且初学者由于对openstack不 ...
- easyui-datagrid行数据field原样输出html标签
easyui-datagrid 绑定的行 field 原样输出html标签.处理效果如图: Html页面代码如下: ... <tr> <th field="id" ...
- 漫谈可视化Prefuse(一)---从SQL Server数据库读取数据
上篇<可视化工具solo show-----Prefuse自带例子GraphView讲解>主要介绍了整个Prefuse工具集具有的一些特征.框架的运行流程,分析并展现了官方提供的例子Gra ...
- Spring应用教程-3 依赖关系配置
注:组件与组件之间的耦合,采用依赖注入管理,但普通的JavaBean属性值,应直接在代码中设置. 1. 注入其他Bean的属性值 我们分析一下,Bean_A的一个属性要依赖Bean_B的一个属性值.这 ...
- gulp 压缩js,css
最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太 ...
- Shiro —— 从一个简单的例子开始
一.Shiro是用来做权限的. 二.权限 1.基本概念: (1)安全实体:要保护的数据. (2)权限:是否有能力去操作(查看.修改.删除 )保护的数据. 2.权限的两个特性 (1)权限的继承性:A 包 ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- DP - tencent2016实习生笔试A
tencent2016实习生笔试A Problem's Link ------------------------------------------------------------------- ...