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. Css学习(三)

    1 行高 ◆浏览器默认文字大小 浏览器默认文字大小:16px 行高:是基线与基线之间的距离 行高=文字高度+上下边距 一行文字行高和父元素高度一致的时候,垂直居中显示. 行高的单位 总结:单位除了像素 ...

  2. javaScript read blob

    http://www.cnblogs.com/wangfajing/p/7202139.html?utm_source=itdadao&utm_medium=referral

  3. 反射中的BindingFlags

    不指定绑定标志  BindingFlags.Default 表示忽略 name 的大小写,不应考虑成员名的大小写   BindingFlags.IgnoreCase 只应考虑在所提供类型的层次结构级别 ...

  4. C#语言经典例题

    两个例题分别用了两种不同的写入方式 一个是有Console.Write(); 一个没有,两种都可以 标准体重 男士体重 = 身高 - 100 +-3 kg cm 女士体重 = 身高 - 110 +-3 ...

  5. 限制EditText最多输入n位,设置EditText最大输入长度;

    1.比较笨的方法: /** * 设置edittext最大的输入限制 * @param editText * @param length */ private void setMaxLength(Edi ...

  6. solr学习(六):使用自定义int/long类型主键

    需求分析: 我不想使用solr默认的主键id,我想换成其他的,比如我的文章id为article_id,我想让article_id作为主键. 而且,我的主键是int类型,而solr的主键默认是strin ...

  7. windows下git的使用

    1.安装git 下载地址:https://git-scm.com/download/win

  8. python-初始化函数

    #本次学习:初始化函数 #-*- coding:utf-8 -*- class SeniorTestingEngineer: #初始化函数,在创建对象的时候就设置初始值.例如我们在SeniorTest ...

  9. 【Selenium-WebDriver自学】Selenium-IDE模式匹配(六)

    ==================================================================================================== ...

  10. uiautomator2.0的配置的两种方法

    方法一(使用在线下载的方式导入依赖): 1.首先创建项目工程,创建的项目的android_api版本要与测试的android_api版本一致(24就是24 ,不能26或者17去兼容) 2.然后就是将本 ...