实例：用jQuery实现垂直和水平下拉 菜单
主要是利用jQuery来实现垂直菜单和水平菜单。实现效果如图：
第一步，创建一个HTML文件，如图，包含两个ul。当然把jquery库也引入进去了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="app.css" type="text/css">
<title>menu</title>
</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>
<br/>
<br/>
<br/>
<!--水平菜单-->
<ul>
<li class="hmain">
<a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单3</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
menu.html
第二步，给菜单设置样式，包括颜色，背景图片，a标签等等的样式。
ul,li{
list-style: none;
}
ul{
padding:;
margin:;
}
.main,.hmain{
background-image:url(img/1.png) ;
background-repeat: repeat-x;
width: 100px;
}
li{
background-color: #cccccc;
}
a{
text-decoration: none;
padding-left: 20px;
display: block;
width: 80px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a,.hmain a{
color: white;
background-image: url("img/y.png");
background-repeat: no-repeat;
background-position: 3px center;
}
.main li a,.hmain li a{
color: black;
background-image: none;
}
.main ul,.hmain ul{
display:none;
}
.hmain{
float: left;
margin-right: 1px;
}
app.css
第三步，就是利用jQuery给菜单设置响应效果了。其中，垂直菜单的原理是：当点击这个a标签时，把子菜单的display属性变为block，再次点击，更改为none。这里可以用if-else的条件判断，然后设置css（）方法，或者用hide/show/toggle，slideDown/slideUp方法。而水平菜单，用到的是hover属性，划过ul时的效果显示状态。
最后就是小图标的变化。用css修改方法即可。
$(document).ready(function(){
$(".main>a").click(function(){
var ulNode=$(this).next("ul");
//if(ulNode.css("display")=="none"){
// ulNode.css("display","block");
//}else{
// ulNode.css("display","none");
//}
//ulNode.show();
//ulNode.hide();
//ulNode.toggle(3000);//数字，slow，normal，fast
//ulNode.slideDown();
//ulNode.slideUp();
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
})
});
function changeIcon(mainNode){
if(mainNode.css("background-image").indexOf("y.png")>=0){
mainNode.css("background-image","url('img/x.png')");
}else{
mainNode.css("background-image","url('img/y.png')");
}
}
app.js
如需工程文件，可以留下邮箱。。
实例：用jQuery实现垂直和水平下拉 菜单的更多相关文章
- jQuery水平下拉菜单实现
<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> ...
- jQuery插件：模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- jQuery实现一个淡入淡出下拉菜单 非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...
- 基于jQuery带图标的多级下拉菜单
之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
- jQuery实现多级手风琴树形下拉菜单（源码）
前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...
- JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
- jQuery 实现无限任意添加下拉菜单
新学jQuery还有很多没学,今天做了个下拉菜单,按照自己的思想结合学的基础效果实现一款可以任意添加层数的下拉菜单,如果有什么建议,欢迎指教啦啦啦 我喜欢备注细一些,这样给自己也是一种理解和方便回顾哈 ...
- [jquery]添加行内容后根据下拉菜单选择内容对比之前已有选项，若有重置再提示
今天页面上一个添加列内容时,要对选择内容与之前已有选项内容作对比,防止用户重复选择内容 页面HTML代码 <ul class="list-group xj-list-NObor xj- ...
- 用jquery制作一个二级导航下拉菜单
1使用$(function(){...})获取到想要作用的HTML元素. 2通过使用children()方法寻找子元素. 3通过使用show()方法来显示HTML元素. 4通过 ...
随机推荐
- [转载]Div和Table的区别
1:速度和加载方式方面的区别 div 和 table 的差异不是速度,而是加载方式,速度只能是指网络速度,如果速度足够快,是没有差异的: div 的加载方式是即读即加载,遇到 <div> ...
- 《Linear Algebra and Its Applications》-chaper6-正交性和最小二乘法- 格拉姆-施密特方法
构造R^n子空间W一组正交基的算法:格拉姆-施密特方法.
- lightoj 1243 - Guardian Knights 最小费用流
#include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...
- Redis教程01——命令
APPEND key value追加一个值到key上 AUTH password验证服务器 BGREWRITEAOF 异步重写追加文件 BGSAVE 异步保存数据集到磁盘上 BITCOUNT key ...
- crontab使用--linux下的定时任务程序
crontab是一个linux下的定时运行程序,如果我们想让自己的程序定时执行, 可以把自己的程序交给这个程序来完成 第一步:配置crontab的脚本的默认编辑器,它的默认的编辑器不好用,我们配置vi ...
- JAVA学习.java.sql.date 与java.util.date以及gettime()方法的分析
java.sql.Date 是针对SQL语句使用的,它只包含日期而没有时间部分. java.util.Date 就是在除了SQL语句的情况下面使用. 它都有getTime方法返回毫秒数,返回的是自19 ...
- sdut-2725-The Urge to Merge-状压DP
把数组竖起来,从上往下走. 如果当前位置是竖着乘的,那么第一个点标记为1.否则标记为0. 样例最终的状态为: 0 0 1 0 1 0 1 0 0 0 0 0 #include<iostream& ...
- 【Android - 框架】之Glide的使用
一.Glide简介: Glide是Google官方推荐的一个图片加载和缓存的开源库,它不仅能实现平滑的图片列表滚动效果,还支持远程图片的获取.大小调整和展示,并且可以加载GIF图片.Glide相比与U ...
- Unity 读取、写入自定义路径文件，调用System.Windows.Forms
调用System.Windows.Forms DLL 首先在Unity新建Plugins文件夹添加System.Windows.Forms.dll 然后代码中添加引用 using System; us ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（5）-EF增删改查by糟糕的代码
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(5)-EF增删改查by糟糕的代码 上一讲我们创建了一系列的解决方案,我们通过一个例子来看看层与层之间的关系 ...