二级菜单(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 ...
随机推荐
- Css学习(三)
1 行高 ◆浏览器默认文字大小 浏览器默认文字大小:16px 行高:是基线与基线之间的距离 行高=文字高度+上下边距 一行文字行高和父元素高度一致的时候,垂直居中显示. 行高的单位 总结:单位除了像素 ...
- javaScript read blob
http://www.cnblogs.com/wangfajing/p/7202139.html?utm_source=itdadao&utm_medium=referral
- 反射中的BindingFlags
不指定绑定标志 BindingFlags.Default 表示忽略 name 的大小写,不应考虑成员名的大小写 BindingFlags.IgnoreCase 只应考虑在所提供类型的层次结构级别 ...
- C#语言经典例题
两个例题分别用了两种不同的写入方式 一个是有Console.Write(); 一个没有,两种都可以 标准体重 男士体重 = 身高 - 100 +-3 kg cm 女士体重 = 身高 - 110 +-3 ...
- 限制EditText最多输入n位,设置EditText最大输入长度;
1.比较笨的方法: /** * 设置edittext最大的输入限制 * @param editText * @param length */ private void setMaxLength(Edi ...
- solr学习(六):使用自定义int/long类型主键
需求分析: 我不想使用solr默认的主键id,我想换成其他的,比如我的文章id为article_id,我想让article_id作为主键. 而且,我的主键是int类型,而solr的主键默认是strin ...
- windows下git的使用
1.安装git 下载地址:https://git-scm.com/download/win
- python-初始化函数
#本次学习:初始化函数 #-*- coding:utf-8 -*- class SeniorTestingEngineer: #初始化函数,在创建对象的时候就设置初始值.例如我们在SeniorTest ...
- 【Selenium-WebDriver自学】Selenium-IDE模式匹配(六)
==================================================================================================== ...
- uiautomator2.0的配置的两种方法
方法一(使用在线下载的方式导入依赖): 1.首先创建项目工程,创建的项目的android_api版本要与测试的android_api版本一致(24就是24 ,不能26或者17去兼容) 2.然后就是将本 ...