菜单下拉效果demo记录
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
*{margin:0px;padding:0px;}
html,body{width:100%;height:100%;}
#main{width:800px;margin:0 auto;}
#menu_list{list-style-type:none;position:relative;width:100%;border:1px solid blue;border-bottom:none;float:left;}
#menu_list .menu_item,#menu_list .menu_text{float:left;line-height:30px;}
#menu_list .menu_item{margin:0px 20px 0px 0px;border:1px solid blue;}
#menu_list .sub_item{display:none;position:absolute;top:30px;left:-1px;width:100%;border:1px solid red;border-top:none;height:360px;}
</style>
<script type="text/javascript">
$(function(){
var mst;
$(".menu_item").hover(function(){
var curItem =$(this);
mst = setTimeout(function(){//延时触发
curItem.find(".sub_item").slideDown("slow");
mst = null;
},350);
},function(){
if(mst!=null)clearTimeout(mst);
$(this).find(".sub_item").slideUp("fast");
});
})
</script>
</head>
<body>
div[id="main"]>ul[id="menu_list"]>li[class="menu_item" id="menu_item_0$"]*8>span[id="menu_text_0$" class="menu_text"]{菜单标题$}+div[id="sub_item_0$" class="sub_item"]{子菜单内容$}
<div id="main">
<ul id="menu_list">
<li class="menu_item" id="menu_item_01">
<span id="menu_text_01" class="menu_text">菜单标题1</span>
<div id="sub_item_01" class="sub_item">子菜单内容1</div>
</li>
<li class="menu_item" id="menu_item_02">
<span id="menu_text_02" class="menu_text">菜单标题2</span>
<div id="sub_item_02" class="sub_item">子菜单内容2</div>
</li>
<li class="menu_item" id="menu_item_03">
<span id="menu_text_03" class="menu_text">菜单标题3</span>
<div id="sub_item_03" class="sub_item">子菜单内容3</div>
</li>
<li class="menu_item" id="menu_item_04">
<span id="menu_text_04" class="menu_text">菜单标题4</span>
<div id="sub_item_04" class="sub_item">子菜单内容4</div>
</li>
<li class="menu_item" id="menu_item_05">
<span id="menu_text_05" class="menu_text">菜单标题5</span>
<div id="sub_item_05" class="sub_item">子菜单内容5</div>
</li>
<li class="menu_item" id="menu_item_06">
<span id="menu_text_06" class="menu_text">菜单标题6</span>
<div id="sub_item_06" class="sub_item">子菜单内容6</div>
</li>
<li class="menu_item" id="menu_item_07">
<span id="menu_text_07" class="menu_text">菜单标题7</span>
<div id="sub_item_07" class="sub_item">子菜单内容7</div>
</li>
<li class="menu_item" id="menu_item_08">
<span id="menu_text_08" class="menu_text">菜单标题8</span>
<div id="sub_item_08" class="sub_item">子菜单内容8</div>
</li>
</ul>
</div>
</body>
</html>
demo:点击下载
菜单下拉效果demo记录的更多相关文章
- 在Mockplus中,如何做鼠标悬停时菜单下拉的效果?
了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能.但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠标悬停时菜单下拉的效果,只要换个思路,利用 ...
- JS之document例题讲解1(两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结)
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- EasyUI:年份、月份下拉框Demo
EasyUI:年份.月份下拉框Demo jsp中定义: <td width="10%" height="25px" style="text-al ...
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
- jQuery实现折叠下拉效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 9月23日JavaScript作业----子菜单下拉
例题一.子菜单下拉 <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700p ...
- JS练习题(左侧菜单下拉+好友选中)
题一.左侧菜单下拉 做题思路:先做菜单和子菜单,把子菜单默认隐藏.再用JS调样式. <style type="text/css"> *{ margin:0px auto ...
- CSS3--底部菜单上拉效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单
lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...
随机推荐
- SQL Error: 1064, SQLState: 42000
这个错误是因为mysql有些关键字被我们用了,需要更改关键字成其他名字 ADD ALL ALTER ANALYZE AND AS ASC ASENSITIVE BEFORE BETWEEN BIGIN ...
- Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---工厂模式之简单工厂
简单工厂:工厂依据传进的参数创建相应的产品. http://www.cnblogs.com/DelphiDesignPatterns/archive/2009/07/24/1530536.html { ...
- sql 时间日期格式化
sql server2000中使用convert来取得datetime数据类型样式(全) 日期数据格式的处理,两个示例: CONVERT(varchar(16), 时间一, 20) 结果:2007-0 ...
- LOJ #6277. 数列分块入门 1-分块(区间加法、单点查询)
#6277. 数列分块入门 1 内存限制:256 MiB时间限制:100 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: hzwer 提交提交记录统计测试数据讨论 2 题目描述 给出 ...
- 有一种感动叫ACM(WJMZBMR在成都赛区开幕式上的讲话)
各位选手,各位教练,大家好,我是来自清华大学交叉信息学院的陈立杰,今天很荣幸站在这里代表全体参赛选手发言.对于我来说,这是我第一次正式参加ACM的比赛.不过我跟ACM之间的缘分,大概在很早的时候就已经 ...
- WeGame导致WSL无法监听端口问题
Windows 10 系统自带Linux子系统(WSL),可以方便的使用WSL运行Linux程序和脚本.笔者在WSL上运行Redis时突然发现无法监听6379端口,尝试重新安装WSL无果. 后来重新安 ...
- ShiroFilterFactoryBean分析
创建核心Filter 同其他框架一样,都有个切入点,这个核心Filter就是拦截所有请求的. 通过web.xml中配置的Filer进入,执行init方法获取这个instance,调用下面的create ...
- 01Trie【p4551(poj3764)】 最长异或路径
题目描述 给定一棵 n 个点的带权树,结点下标从 1 开始到 N .寻找树中找两个结点,求最长的异或路径. 异或路径指的是指两个结点之间唯一路径上的所有边权的异或. 个人: 首先强推一下01字典树(T ...
- Arduino可穿戴开发入门教程LilyPad和LilyPad Simple的介绍
Arduino可穿戴开发入门教程LilyPad和LilyPad Simple的介绍 LilyPad和LilyPad Simple的介绍 LilyPad和LilyPad Simple是LilyPad微控 ...
- 认识C++中的bitset类型
认识标准库bitset类型 位是用来保存一组项或者条件的yes/no(1或者0)信息的一种简洁方法,那么位集就是二进制位的有序集.C++中标准库提供的bitset类在我们程序中就很有效的简化了对于位集 ...