二级菜单(avalon+jquery动画)
by 司徒正美
var vm = avalon.define({
$id: "test",
array: [
{
name: 111111,
child: [
{name: 1.1},
{name: 1.2},
{name: 1.3},
]
},
{
name: 22222,
child: [
{name: 2.1},
{name: 2.2},
{name: 3.3},
]
},
{
name: 33333,
child: [
{name: 3.1},
{name: 3.2},
{name: 3.3}
]
}
],
selectedIndex: 0
})
$(function () {
$(document).on("click", ".first-menu li", function () {
$(".show .second-menu").css("margin-left", -200)
$(".show").removeClass("show").width(0)
var _this = this
setTimeout(function () {
$(_this).addClass("show").find(".second-menu").animate({
width: 200
}, 500)
$(".second-menu", _this).animate({
marginLeft: 0
}, 500)
})
})
})
.first-menu, .second-menu {
padding: 0px;
margin: 0px;
list-style: none;
}
.first-menu, .second-menu-wrap {
position: relative;
background: #666;
}
.first-menu > li, .second-menu > li{
width:200px;
height:30px;
line-height: 2;
color: #fff;
border-bottom: 1px solid #333;
}
.first-menu{
width:200px;
}
.second-menu-wrap{
background: red;
position: absolute;
top: 0px;
left: 200px;
overflow: hidden;
}
.second-menu-wrap ul{
margin-left:-200px;
}
.second-menu-wrap.show ul{
margin: 0px;
}
- {{el.name}}
- {{elem.name}}
二级菜单(avalon+jquery动画)的更多相关文章
- 基于jQuery动画二级下拉导航菜单
春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=" ...
- 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- Jquery垂直下拉二级菜单
自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...
- 转:jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
- 二级菜单jquery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript(jquery)实现二级菜单联动
为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...
- jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类
jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...
- JQuery 纵向二级菜单与对齐方式
1.效果: 2.代码: style部分: <style type="text/css"> /* ul{margin: 0; padding: 0;}*/ ul{list ...
随机推荐
- 超实用!9个目前流行的MATERIAL DESIGN前端框架
http://www.uisdc.com/material-design-frameworks-top-9 谷歌推出的Material Design风格已见有一些APP UI采用,视觉和交互体验都很棒 ...
- RedHat使用Centos的yum仓库
RedHat使用Centos的yum仓库 卸载红帽yum源 [root@zhouwanchun ~]# rpm -qa | grep yum [root@zhouwanchun ~]# rpm -e ...
- tf.assign,tf.assign_add,tf.assign_sub
a = tf.Variable(0.0,dtype=tf.float32) with tf.Session() as sess: sess.run(tf.global_variables_initia ...
- virtual box + win7 + usb + share folder
1.enable virtaulization on BIOS 2.new machine setup, memory, harddisk size 3. 4.install extension pa ...
- 用最通俗的话解释AJAX是什么东西
直白地说,就是没用AJAX的网页,你点一个按钮就要刷新一下页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新. 用了AJAX之后,你点击,然后页面上的一行字就变化了,页面本身不 ...
- CSS部分
float属性 父级坍塌现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- Memory Translation and Segmentation.内存地址转换与分段
原文标题:Memory Translation and Segmentation 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高手的精 ...
- [CTSC2012]熟悉的文章 (后缀自动机 单调队列)
/* 首先答案显然是具有单调性的, 所以可以二分进行判断 然后当我们二分过后考虑dp来求最长匹配个数, 发现每个点能够转移的地点 肯定是一段区间, 然后这样就能够得到一个log^2算法 至于每个点的匹 ...
- Struts2学习:interceptor(拦截器)的使用
对于需要登陆验证.权限验证等功能的网站,每一次请求,每一个action都写一段验证的代码,未免显得冗余且不易维护.struts2提供了拦截器interceptor,为这些页面提供一个切面,或者说公共组 ...
- Ruby学习笔记6: 动态web app的建立(3)--多Model之间的交互
We first built a static site which displayed a static image using only a Controller and a View. This ...