小白jquery横向菜单弹出菜单制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#mymenu {
height: 30px;
width: 300px;
}
#mymenu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#mymenu ul li {
float: left;
width: 100px;
line-height: 30px;
text-align: center;
background-color: #3CC;
}
#mymenu ul li ul li {
background-color:#3CF;
}
#mymenu ul li ul{display: none}
</style>
<script src="jquery-1.7.js" type="text/javascript">
</script>
<script language="javascript">
$(function(){
//$("#mymenu ul li ul").css("display","none");
// $("#mymenu ul li").mouseover(function(){
// $(this).next("ul").slideDown(300); //建议用next不用children,因为后者是集合
// }
//);
//$("#mymenu ul li").mouseout(function(){
// $(this).next("ul").slideUp(300);
// }
// );
$("#mymenu ul li").hover(function(){
$(this).children("ul").slideDown(300);
//alert("你好")
},function(){
$(this).children("ul").slideUp(300);
});
});
</script>
</head>
<body>
<div id="mymenu">
<ul>
<li>菜单1
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
<li>菜单1</li>
<li>菜单1
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
小白jquery横向菜单弹出菜单制作的更多相关文章
- JQuery弹出菜单时禁止页面(body)滚动
最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...
- DIV+CSS制作二级横向弹出菜单,略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 向上弹出菜单jQuery插件
插件名:柯乐义英文名:Keleyijs文件名称:jquery.keleyi.js插件功能:该插件可以让你轻易地在页面上构建一个向上弹出的二级菜单. 示例查看:http://keleyi.com/kel ...
- 纯div+css制作的弹出菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5手机端遮罩弹出菜单代码
效果体验:http://hovertree.com/texiao/html5/17/ 效果图: 代码如下: <!doctype html> <html lang="zh&q ...
- html + js 右 点击 弹出 菜单
页面 引用jar 包 <link rel="stylesheet" href="../../style/zui.min.css" type="t ...
- web标准(复习)--4 纵向导航菜单及二级弹出菜单
今天我们开始学习纵向导航菜单及二级弹出菜单,包含以下内容和知识点: 纵向列表 标签的默认样式 css派生选择器 css选择器的分组 纵向二级列表 相对定位和绝对定位 一.纵向列表纵向列表或称为纵向导航 ...
- css+html+js实现多级下拉和弹出菜单
本文将使用css+html+js实现横向菜单.具有多级弹出菜单下拉. 首先我们来看看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvajkwMzgy ...
- vc++ 如何添加右键弹出菜单
一.创建新工程 二.编辑菜单资源 1.添加菜单 按"Ctrl+R",双击"Menu"图标 2.于菜单编辑器内编辑菜单 四.添加代码(红色部分) void CCM ...
随机推荐
- 一个简单的JSP 连接MySQL使用实例
一.软件环境 下载并安装MySQL,Tomacat,JDBC.MyEclipse或其他IDE. 二.环境配置 将其环境变量配置好之后,下载Java 专用的连接MySQL的驱动包JDBC,有人会发现在一 ...
- 为你的AliOS Things应用增加自定义cli命令
摘要: 怎么才能在RTOS系统中,通过 串口shell控制LED的开关. 在日常嵌入式开发中,我们经常会用串口命令来使设备进入某种特定的状态,或执行某个特定的操作.如系统自检,模拟运行,或者进入手动模 ...
- shell脚本学习(4)cut
cut 的两种用法 1种是 -c list 剪切字符串中特定位置的文字, /etc/passwd中的原始数据: yuyuyu:x:1000:1000:yuyuyu,,,:/home/yuyuyu: ...
- php str_repeat()函数 语法
php str_repeat()函数 语法 str_repeat()函数怎么用? php str_repeat()函数用于重复使用指定字符串,语法是str_repeat(string,repeat), ...
- UVA 12012 Detection of Extraterrestrial(KMP求循环节)
题目描述 E.T. Inc. employs Maryanna as alien signal researcher. To identify possible alien signals and b ...
- spfa模板(洛谷3371)
洛谷P3371 //spfa:求s到各点的最短路,可含负权边 #include <cstdio> using namespace std; ,max_m=,inf=; struct ety ...
- npm和webpack安装以及相关信息
一.npm初始化 在项目文件夹下执行npm init,根据提示回车或者填写信息.结果是生成packge.json文件. 根据json文件npm install会安装依赖,项目会看到有一个node_mo ...
- EAM(Enterprise Asset Management)企业资产管理系统
EAM (Enterprise Asset Management)的缩写,EAM系统是指企业资产管理系统. EAM系统是在资产比重较大的企业,在资产建设.维护中减少维护成本,提高资产运营效率,通过现代 ...
- 渗透测试工具sqlmap基础教程
转载请注明出处:http://blog.csdn.net/zgyulongfei/article/details/41017493 作者:羽龍飛 本文仅献给想学习渗透测试的sqlmap小白,大牛请绕过 ...
- LintCode之各位相加
题目描述: 我的代码 public class Solution { /* * @param num: a non-negative integer * @return: one digit */ p ...