二级菜单jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><Document></title>
</head>
<style type="text/css">
ul,li,body{margin:0;padding: 0;}
#nav{width: 500px;margin: 10px auto;}
ul li{list-style: none;}
.clear{clear: both;}
#nav>li{float: left;position: relative;}
li a{display: block;width: 100px;height: 30px;line-height: 30px;text-align:center;background-color: #ccc;text-decoration: none;color: #333;}
li a:hover{background: #c66;color: #fff;}
li ul{height: 0px;overflow: hidden;position: absolute;top:30px;}
</style>
<body>
<ul id="nav">
<li>
<a href="#">一级菜单</a>
<ul class="subNav">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li>
<a href="#">一级菜单</a>
<ul class="subNav">
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<div class="clear"></div>
</ul>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$('#nav>li').hover(
function(){
$(this).find("ul").animate({height:"150px"}, 200)
},
function(){
$(this).find("ul").animate({height:0}, 200)
}
)
</script>
</body>
</html>
同样的效果用jquery实现会简单的多。代码如上
二级菜单jquery的更多相关文章
- Jquery垂直下拉二级菜单
自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...
- 用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
- 转:jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- 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 ...
- jQuery - 制作点击显示二级菜单效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jQuery show hide方法 二级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 复旦大学2014--2015学年第一学期高等代数I期末考试情况分析
一.期末考试成绩班级前几名 金羽佳(92).包振航(91).陈品翰(91).孙浩然(90).李卓凡(85).张钧瑞(84).郭昱君(84).董麒麟(84).张诚纯(84).叶瑜(84) 二.总成绩计算 ...
- 【leetcode❤python】 88. Merge Sorted Array
#-*- coding: UTF-8 -*-class Solution(object): def merge(self, nums1, m, nums2, n): "& ...
- HTTP协议:header标头说明
原文地址 http://blog.chinaunix.net/uid-7374279-id-4518834.html Header 解释 示例 Accept-Ranges 表明服务器是否支持指定范 ...
- 从原理上搞定编码-- Base64编码
BASE64是一种编码方式,通常用于把二进制数据编码为可写的字符形式的数据.这是一种可逆的编码方式.编码后的数据是一个字符串,其中包含的字符为:A-Z.a-z.0-9.+./共64个字符:26 + 2 ...
- Python中时间的处理之——timedelta篇
#! /usr/bin/python # coding=utf-8 from datetime import datetime,timedelta """ timed ...
- 数据引用Data References
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- [SAP ABAP开发技术总结]OLE
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- “System.Data.OracleClient.OracleConnection”已过时
处理办法: 在oracle 安装目录下 找到 Oracle.DataAccess.dll添加引用,然后 using Oracle.DataAccess.Client;其他的都不用动,即可.连接字符串中 ...
- Maven中<dependencies>节点和<dependencyManagement>节点的区别 转
以前一直没有在意,今天建立maven工程的时候在<dependencyManagement>节点下加入了junit依赖,结果在dependency Graph中没有发现junit的依赖关系 ...
- MonkeyRunner学习(2)常用命令
目录: 1.截图 2.暂停 (时延秒) 3.屏幕操作 4.打印 5.字符串发送到键盘输入(登录输入) 6.唤醒设备屏幕 7.重起手机 8.按键(系统键) 9.回车键 10.for 循环 11.循环截图 ...