前端（jQuery）（9）-- jQuery菜单
1、垂直菜单布局
2、垂直菜单实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(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.hide();/*隐藏*/
// ulNode.show();/*显示*/
//ulNode.toggle(500);/*显示/隐藏 这种是相对上面方便的方法*/
/*
* 数字、slow、normal、fast
* */
// ulNode.slideDown();
// ulNode.slideUp();//这两种方法也需要自己进行判断。
ulNode.slideToggle();//这种方法就不需要自己进行判断了。
});/*用尖角号防止点击子菜单也会执行上面函数*/
});
</script>
<style>
ul,li{
list-style: none;
}
ul{
padding:0px;/*覆盖子菜单的缩进*/
margin:0px;/*防止ie浏览器的问题。*/
}
.main{
background-image: url("images/title.gif");
background-repeat: repeat-x;
width:100px;
}
li{
background-color:#eeeeee;
}
a{
text-decoration: none;
padding-left:20px;
display:block;
width:80px;
padding-top:3px;
padding-bottom:3px;
}
.main>a{
color:white;
background-image: url("images/collapsed.gif");
background-repeat:no-repeat;
background-position:3px center;/*距离左面3px，垂直方向居中*/
}
.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>
3、水平菜单的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function () {
isClick = 1;
/*为了防止多次点击而设置的变量*/
$(".main>a").click(function () {
// 这里有个非常nice的写法：$(".main>a,.hmain>a").click(function(){
// if (isClick) {
// isClick = 0;
var ulNode = $(this).next("ul");
ulNode.stop(true,false).slideToggle();/*详情查询stop函数的用法啊，取消回调函数，两个参数第一个参数决定是否取消当前正在执行的动画，
第二个参数决定是否立即完成当前正在执行的动画。
我们在这里使用的动画效果不足以用到第一个参数，所以这里true和false都是可以的。
这里实现了如何避免动画重复的功能
*/
/*插两个标签：hover、stop标签*/
changeIcon($(this));
// setTimeout(function () {
// isClick = 1;
// }, 1000);
// /*如何处理多次点击造成的之后一直执行动作的方法。
// 这里用的是toggle()函数所以没法分开两个动作的处理
// 比如在还没展开完毕的时候再次点击没有实现直接收回动作。*/
// }
});
// $(".hmain").hover(function(){
// $(this).children("ul").slideToggle();
// });//这是一种比较简单的方法，下面还有一种很奇妙的方法，给hover两个函数对象作为参数。
isHover = 1;
/*为了防止多次点击而设置的变量*/ $(".hmain").hover(function () {
$(this).children("ul").stop(false,false).slideDown(500);
changeIcon($(this).children("a"));
/*点击的是main的子元素a标签之后执行的动作。*/
}
, function () {
$(this).children("ul").stop(false,false).slideUp(500);
changeIcon($(this).children("a"));
}
);
/*jQuery官方文档中有介绍，这是有两个参数时的方法。
一个参数是鼠标放上去的时候有的动作，第二个参数时鼠标离开时将要执行的动作。*/ }); function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("collapse.gif") >= 0) {/*indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。*/
mainNode.css("background-image", "url('images/expanded.gif')");
} else {
mainNode.css("background-image", "url('images/collapse.gif')");
}
}
}
</script>
<style>
ul, li {
list-style: none;
} ul {
padding: 0px; /*覆盖子菜单的缩进*/
margin: 0px; /*防止ie浏览器的问题。*/
} .main, .hmain {
background-image: url("images/title.gif");
background-repeat: repeat-x;
width: 100px;
} li {
background-color: #eeeeee;
} 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("images/collapsed.gif");
background-repeat: no-repeat;
background-position: 3px center; /*距离左面3px，垂直方向居中*/
} .main li a, .hmain li a {
color: black;
background-image: none;
} .main ul, .hmain ul {
display: none;
} .hmain {
float: left;
margin-right: 3px;
}
</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> <br/>
<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>
</body>
</html>
前端（jQuery）（9）-- jQuery菜单的更多相关文章
- 知问前端——概述及jQuery UI
知问系统,是一个问答系统.主要功能:即会员提出问题,会员回答问题.目前比较热门的此类网站有:知乎http://www.zhihu.com.百度知道http://zhidao.baidu.com等.这里 ...
- 简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
- 前端学习之jquery/下
前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
- 前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- Python学习（二十三）—— 前端基础之jQuery
转载自http://www.cnblogs.com/liwenzhou/p/8178806.html 一.jQuery入门 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQue ...
- 前端基础之jQuery入门 01
jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
- 第一百七十七节，jQuery，知问前端--概述及 jQuery UI
jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一．项目介绍 我们重点仿照“知乎”的架构模式来搭建界面和布局,以及大部分前端功能 ...
- 前端基础 之 jQuery
浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...
- 前端(5)之jQuery
前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...
随机推荐
- [记录]学习树莓派3B接DHT11和LCD1602和修改树莓派时区
前提 树莓派系统安装好 apache web 服务器,如未安装,可在树莓派内执行sudo apt-get install apache2 进行安装apache 也可以通过命令获取GPIO信息: gpi ...
- 廖雪峰Java12maven基础-1maven入门-3构建流程
maven是一个Java项目管理和构建工具: 标准化项目结构 标准化构建流程(编译.打包.发布) 依赖管理 Maven的构建流程 clean 删除所有编译生成的文件 compile 编译源码.编译测试 ...
- Python-数据类型内置方法(1)
目录 数字类型内置方法 整形(int) 浮点型(float) 字符串类型内置方法 优先掌握 需要掌握 了解 列表类型内置方法 优先掌握 需要掌握 数字类型内置方法 整形(int) 作用:年龄 定义:x ...
- 容斥原理——hdu2841
记得要开ll /* 莫比乌斯反演模板题,也可以直接算phi来做 容斥的解法 求x[1..m],在[1,n]中和其互质的数的个数即可 那么就是n-和x不互质的数个数即可 */ #include<b ...
- ssm框架，出现xxx不能加载，或者bean不能加载时的解决方案之一
有可能是你在项目的mapper.xml文件中添加了本项目没有的实体类, 你把日志中找不到的最后一个实体类全项目搜索下,改成本项目可以引用的即可
- 【BZOJ4561】[JLoi2016]圆的异或并
传送门 把圆拆成上下两个圆弧,因为不存在相交关系,圆弧直接的上下关系是不变的. 用set维护这些圆弧,插入的时候upper_bound一下,如果找到的是上圆弧,就是我外面的第一个圆,否则我外面的第一个 ...
- echarts的使用——vue
在vue的项目开发中,数据的可视化可以用echarts来实现,具体用法如下: (1)安装echarts,进入项目目录,执行如下命令,安装echarts: npm install echarts (2) ...
- 菜鸟nginx源码剖析数据结构篇（一）动态数组ngx_array_t[转]
菜鸟nginx源码剖析数据结构篇(一)动态数组ngx_array_t Author:Echo Chen(陈斌) Email:chenb19870707@gmail.com Blog:Blog.csdn ...
- 自定义UICollectionViewLayout之CATransform3D
1.自定义UICollectionViewLayout旋转效果 之前有自定义UICollectionViewLayout(适用于多个section),本文是一个对cell进行CATransform3D ...
- 关于不同数据库的连接配置(MySql和Oracle)
mysql: driverClass=com.mysql.jdbc.Driver #在和mysql传递数据的过程中,使用unicode编码格式,并且字符集设置为utf-8,插入数据库防止中文乱码 ur ...