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动画)的更多相关文章

  1. 基于jQuery动画二级下拉导航菜单

    春节回来给大家分享一款基于jQuery动画二级下拉导航菜单.鼠标经过的时候以动画的形式出现二级导航.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  2. 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  3. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  4. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

  5. 转:jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  6. 二级菜单jquery

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JavaScript(jquery)实现二级菜单联动

    为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...

  8. jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

  9. JQuery 纵向二级菜单与对齐方式

    1.效果: 2.代码: style部分: <style type="text/css"> /* ul{margin: 0; padding: 0;}*/ ul{list ...

随机推荐

  1. 超实用!9个目前流行的MATERIAL DESIGN前端框架

    http://www.uisdc.com/material-design-frameworks-top-9 谷歌推出的Material Design风格已见有一些APP UI采用,视觉和交互体验都很棒 ...

  2. RedHat使用Centos的yum仓库

    RedHat使用Centos的yum仓库 卸载红帽yum源 [root@zhouwanchun ~]# rpm -qa | grep yum [root@zhouwanchun ~]# rpm -e ...

  3. 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 ...

  4. virtual box + win7 + usb + share folder

    1.enable virtaulization on BIOS 2.new machine setup, memory, harddisk size 3. 4.install extension pa ...

  5. 用最通俗的话解释AJAX是什么东西

    直白地说,就是没用AJAX的网页,你点一个按钮就要刷新一下页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新. 用了AJAX之后,你点击,然后页面上的一行字就变化了,页面本身不 ...

  6. CSS部分

    float属性 父级坍塌现象 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. Memory Translation and Segmentation.内存地址转换与分段

    原文标题:Memory Translation and Segmentation 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高手的精 ...

  8. [CTSC2012]熟悉的文章 (后缀自动机 单调队列)

    /* 首先答案显然是具有单调性的, 所以可以二分进行判断 然后当我们二分过后考虑dp来求最长匹配个数, 发现每个点能够转移的地点 肯定是一段区间, 然后这样就能够得到一个log^2算法 至于每个点的匹 ...

  9. Struts2学习:interceptor(拦截器)的使用

    对于需要登陆验证.权限验证等功能的网站,每一次请求,每一个action都写一段验证的代码,未免显得冗余且不易维护.struts2提供了拦截器interceptor,为这些页面提供一个切面,或者说公共组 ...

  10. 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 ...