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 {
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>
try.js
$(document).ready(function(){
$(".main>a").click(function() {
var ulNode=$(this).next("ul");
//第1种方法
/*
if(ulNode.css("display")=="none") {
ulNode.css("display","block");
}
else{
ulNode.css("display","none");
}
*/
//第2种方法
//ulNode.show();
//ulNode.hide();
//第3种方法
//ulNode.toggle(500);//fast normal low
//第4种方法
//ulNode.slideDown();
//ulNode.slideUp();
//第5种方法
ulNode.slideToggle();
})
});
效果：
2017-09-22 12:11:41
jQuery 菜单 垂直菜单实现的更多相关文章
- 实例：用jQuery实现垂直和水平下拉 菜单
主要是利用jQuery来实现垂直菜单和水平菜单.实现效果如图: 第一步,创建一个HTML文件,如图,包含两个ul.当然把jquery库也引入进去了. <!DOCTYPE html> < ...
- 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 ...
随机推荐
- RESTful （俗称：api接口文档）
整体规范建议采用RESTful 方式来实施. 协议 API与用户的通信协议,总是使用HTTPs协议,确保交互数据的传输安全. 域名 应该尽量将API部署在专用域名之下.https://api.exam ...
- 【学习笔记】整体二分（BZOJ2738矩阵乘法）
也是因为一道题才来学的... 然后就发现这道模板貌似是暑假初期在某校集训的时候的比赛题 并且好像没改= = 前置芝士 1.二分= = * CDQ分治[你要是知道CDQ分治的话这玩意就很好理解啦] *本 ...
- 【leetcode】336. Palindrome Pairs
题目如下: 解题思路:对于任意一个word,要找出在wordlist中是否存在与之能组成回文的其他words,有两种思路.一是遍历wordlist:二是对word本身进行分析,找出能组成回文的word ...
- Halo（八）
安全模块 用户描述类 /** * 基本 Entity */ @Data @MappedSuperclass public class BaseEntity { /** Create time */ @ ...
- SQL Server索引管理之六大铁律
索引是以表列为基础的数据库对象.索引中保存着表中排序的索引列,并且纪录了索引列在数据库表中的物理存储位置,实现了表中数据的逻辑排序.通过索引,可以加快数据的查询速度和减少系统的响应时间;可以使表和表之 ...
- fedora23下编译安装OpenCV-3.1.0
所需安装环境 1.安装编译环境 $ sudo dnf install gcc gcc-c++ ncurses-devel cmake 2.安装gtk+2.x $ sudo dnf install gt ...
- HDU 6638 - Snowy Smile 线段树区间合并+暴力枚举
HDU 6638 - Snowy Smile 题意 给你\(n\)个点的坐标\((x,\ y)\)和对应的权值\(w\),让你找到一个矩形,使这个矩阵里面点的权值总和最大. 思路 先离散化纵坐标\(y ...
- && 和 || 逻辑运算符的短路运算
&&和||的短路运算,是指如果在进行前面的表达式的运算过程,通过判断已经明确的知道整个表达式的结果,那么就不会进行后面表达式的运算判断. 表达式1 || 表达式2 || 表达式3... ...
- codeforces 111B/112D Petya and Divisors
题目:Petya and Divisors传送门: http://codeforces.com/problemset/problem/111/B http://codeforces.com/probl ...
- 【ERP知识】一个VMI（供应商管理库存）实现方案
VMI,Vendor Managed Inventory,供应商管理库存 是指客户不采购或尽量少采购物料,而是由供应商保证该物料有充足的数量,在客户需要的时候能按时提供. 这样可以降低客户方的库存成本 ...