jQuery 菜单 水平菜单的实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery</title>
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/try.js" ></script>
<style>
ul li {
list-style: none;
}
ul {
padding:0;
margin: 0;
}
.main {
float:left;
margin-right: 5px;
background-image: url(img/2.PNG);
background-repeat:repeat-x;
width:100px; }
li {
background-color: #eeeeee;
}
a {
display: block;
text-decoration: none;
width:80px;
padding-left: 20px;
padding-top: 4px;
padding-bottom: 4px;
}
.main a {
color: white;
background-image:url(img/向右箭头.png);
background-repeat: no-repeat;
background-position:2px center ;
background-size:20px;
}
.main li a{
color:black ;
background-image: none;
}
.main ul {
display: none;
} </style> </head>
<body>
<ul>
<li class="main">
<a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
</ul>
</body>
</html>
js
$(document).ready(function(){
$(".main").hover(function() {
$(this).children("ul").slideToggle();
})
});
效果：
jQuery 菜单 水平菜单的实现的更多相关文章
- jQuery制作水平多级下拉菜单
本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- jquery 展开折叠菜单
jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
- 炫酷实用的jQuery插件 涵盖菜单、按钮、图片
新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
随机推荐
- 【串线篇】Mybatis拓展之MBG
MBG-逆向工程 一.介绍 MBG:MyBatis Generator:代码生成器: MyBatis官方提供的代码生成器:帮我们逆向生成: 正向: table----javaBean---BookDa ...
- "less is more"，用"less”命令查看linux文本文件
less filename:可以方便地查看文本文件 当一条命令的输出结果较长的时候,可以通过管道传给less命令便于浏览,比如ls -al | less.
- pgsql SQL监控，查询SQL执行情况
SELECT procpid, START, now() - START AS lap, current_query FROM ( SELECT backendid, pg_stat_get_back ...
- python3运行报错：TypeError: Object of type 'type' is not JSON serializable解决方法（详细）
返回结果先转成str 字符创
- Struts2基础-4 -struts拦截器
Struts2拦截器工作原理 拦截器围绕着 Action和 Result的执行而执行. Struts2拦截器的工作方式如图10.2所示.从上图中可以看出, Struts2拦截器的实现原理和 Servl ...
- mybatis模糊查询（转载）
原文地址:http://blog.csdn.net/luqin1988/article/details/7865643 模糊查询: 1. sql中字符串拼接 SELECT * FROM tableNa ...
- jquery设置、判断、获取input单选标签选中状态
1.设置某项单选input为选中状态: $("input[type='radio']").eq(1).attr('checked',true); ②也可设其属性checked为'c ...
- Javac编译找不到符号,报错
Javac编译找不到符号 报错 找不到符号 如果是两个.java有调用关系,需要同时编译 首先我检查了下代码,发现并没有问题,然后将A.java文件的内容复制到D.java中,发现程序能正常运行,而之 ...
- 启动Nginx、查看nginx进程、nginx帮助命令、Nginx平滑重启、Nginx服务器的升级
1.启动nginx的方式: cd /usr/local/nginx ls
- 「LibreOJ β Round」ZQC 的手办
https://loj.ac/problem/504 一类套路题. 首先这个玩意可以两个logn树套树做.... naive地,把区间内的所有数拿出来放进堆里.不断取出. 太多了. 所以开始只保留那初 ...