Jquery + Css 实现横纵菜单下拉效果

最新推荐文章于 2021-11-07 16:11:11 发布
原创 最新推荐文章于 2021-11-07 16:11:11 发布 · 140 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#CSS #jQuery #JavaScript #IE #HTML #ViewUI

本文详细介绍使用CSS和JavaScript实现的菜单特效，包括清除默认样式、背景设置、链接样式调整等CSS技巧，以及通过jQuery控制菜单展开与隐藏的多种方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Menu.css实现css特效的代码代码 复制代码
  1. ul,li {   
  2.     /*清除ul,li默认的小原点*/   
  3.     list-style:none;   
  4. }   
  5. ul {   
  6.     /*清除ul的缩近值,只对padding设置在IE6与IE7中并不好使还需要设置margin*/   
  7.     padding:0;   
  8.     margin: 0;   
  9. }   
  10. /*设置class需要加.*/   
  11. .main, .hmain {   
  12.     /*添加背景图片,背景图片会覆盖li的背景色*/   
  13.     background-image: url(../images/title.gif);   
  14.     /*只在横向尽量重复*/   
  15.     background-repeat: repeat-x;   
  16.     width: 120px;   
  17.     margin-top: 1px;   
  18. }   
  19. /*设置所有li的背景色*/   
  20. li {   
  21.     background-color: #EEEEEE;   
  22. }   
  23. a {   
  24.     /*取消链接的所有划线*/   
  25.     text-decoration: none;   
  26.     padding-left: 20px;   
  27.     /*使链接充满整个区并显示小手样式,但在IE6中还是有问题需要再设置display: inline-block;*/   
  28.     display: block;   
  29.     /*display: inline-block;并不是符合CSS标准*/   
  30.     display: inline-block;   
  31.     /*各个链接之间拉开些距离*/   
  32.     padding-top: 3px;   
  33.     padding-bottom: 3px;   
  34. }   
  35. /*设置main下链接的字体为白色*/   
  36. .main a, .hmain a {   
  37.     color: white;   
  38.     background-image: url(../images/collapsed.gif);   
  39.     background-repeat: no-repeat;   
  40.     /*前景距X轴左边有3像素 居中*/   
  41.     background-position: 3px center;   
  42. }   
  43. /*设置main li 下链接的字体为黑色*/   
  44. .main li a, .hmain li a {   
  45.     color: black;   
  46.     /*无背景图片*/   
  47.     background-image: none;   
  48. }   
  49. /*隐藏子菜单*/   
  50. .main ul, .hmain ul {   
  51.     display: none;   
  52. }   
  53. /*横向菜单*/   
  54. .hmain {   
  55.     /*浮动布局使原本纵向排列变成横向排列*/   
  56.     float: left;   
  57.     margin-right: 1px;   
  58. }  
ul,li {
	/*清除ul,li默认的小原点*/
	list-style:none;
}
ul {
	/*清除ul的缩近值,只对padding设置在IE6与IE7中并不好使还需要设置margin*/
	padding:0;
	margin: 0;
}
/*设置class需要加.*/
.main, .hmain {
	/*添加背景图片,背景图片会覆盖li的背景色*/
	background-image: url(../images/title.gif);
	/*只在横向尽量重复*/
	background-repeat: repeat-x;
	width: 120px;
	margin-top: 1px;
}
/*设置所有li的背景色*/
li {
	background-color: #EEEEEE;
}
a {
	/*取消链接的所有划线*/
	text-decoration: none;
	padding-left: 20px;
	/*使链接充满整个区并显示小手样式,但在IE6中还是有问题需要再设置display: inline-block;*/
	display: block;
	/*display: inline-block;并不是符合CSS标准*/
	display: inline-block;
	/*各个链接之间拉开些距离*/
	padding-top: 3px;
	padding-bottom: 3px;
}
/*设置main下链接的字体为白色*/
.main a, .hmain a {
	color: white;
	background-image: url(../images/collapsed.gif);
	background-repeat: no-repeat;
	/*前景距X轴左边有3像素 居中*/
	background-position: 3px center;
}
/*设置main li 下链接的字体为黑色*/
.main li a, .hmain li a {
	color: black;
	/*无背景图片*/
	background-image: none;
}
/*隐藏子菜单*/
.main ul, .hmain ul {
	display: none;
}
/*横向菜单*/
.hmain {
	/*浮动布局使原本纵向排列变成横向排列*/
	float: left;
	margin-right: 1px;
}

 

 

实现js物效的js代码代码 复制代码
  1. $(document).ready(function(){   
  2.     //页面中的DOM已经装载完成找到main下的子结点a,然后触发事件，但是不会触发子菜单   
  3.     $('.main > a').click(function(){   
  4.         //找到主菜单项对应的子菜单项   
  5.         var ulNode = $(this).next('ul');   
  6.         /*方法一：   
  7.         if(ulNode.css('display') == 'none') {   
  8.             ulNode.css('display','block');   
  9.         } else {   
  10.             ulNode.css('display','none');   
  11.         }   
  12.         */   
  13.            
  14.         /*   
  15.         方法二：具有动画效果   
  16.         ulNode.show(500);   
  17.         三种文字性参数的用法 时间由jquery内部自定义   
  18.         ulNode.show('fast');// normal slow   
  19.         ulNode.hide();   
  20.         toggle方法省去自己写if else这样繁琐的判断   
  21.          是jquery为了配合show hide();   
  22.          ulNode.toggle();   
  23.         */   
  24.            
  25.            
  26.            
  27.         /*   
  28.         方法三：具有卷帘效果   
  29.         ulNode.slideDown();//也可以加参数slow normal fast   
  30.         ulNode.slideUp();   
  31.         */   
  32.         ulNode.slideToggle();//也可以加参数slow normal fast   
  33.         changeIcon($(this));   
  34.     });   
  35.        
  36.     /*鼠标进入出现 但是有bug 一进入子菜单后立即被收起   
  37.         $('.hmain > a').hover(function(){   
  38.         $(this).next('ul').slideDown();   
  39.         },function(){   
  40.             $(this).next('ul').slideUp();   
  41.         });   
  42.     */   
  43.        
  44.        
  45.     /*鼠标进入出现具有延时操作，鼠标进入主菜单进入子菜单再进入主菜单子菜单又出现   
  46.     //鼠标进入主菜单   
  47.     $('.hmain > a').hover(function(){   
  48.         //将子菜单放下   
  49.         $(this).next('ul').slideDown();   
  50.     },function(){   
  51.         var ulNode = $(this).next('ul');   
  52.         //设置延时   
  53.         var timeoutId = setTimeout(function(){   
  54.             //将子菜单收起   
  55.             ulNode.slideUp();   
  56.         },300);   
  57.            
  58.         //对于鼠标进入子菜单项的设置   
  59.         ulNode.hover(function(){   
  60.             //清除延时 子菜单不会立即被收起来   
  61.             clearTimeout(timeoutId);   
  62.         },function(){   
  63.             //如果鼠标从子菜单项离开的话将子菜单收起   
  64.             $(this).slideUp();   
  65.         });   
  66.     });   
  67.     */   
  68.        
  69.     /*鼠标进入出现具有延时操作，鼠标离开子菜单时 子菜单闪动出现*/   
  70.     //鼠标进入主菜单   
  71.     $('.hmain').hover(function(){   
  72.         //将子菜单放下   
  73.         $(this).children('ul').slideDown();   
  74.         changeIcon($(this).children('a'));   
  75.     },function(){   
  76.         $(this).children('ul').slideUp();   
  77.         changeIcon($(this).children('a'));   
  78.     });   
  79. });   
  80.   
  81. /**   
  82. 修改主菜单的指示图标   
  83. */   
  84. function changeIcon(mainNode) {   
  85.     //如果结点不为空   
  86.     if(mainNode) {   
  87.         if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0) {   
  88.             mainNode.css("background-image","url('../images/expanded.gif')");   
  89.         } else {   
  90.             mainNode.css("background-image","url('../images/collapsed.gif')");   
  91.         }   
  92.     }   
  93. }  
$(document).ready(function(){
	//页面中的DOM已经装载完成找到main下的子结点a,然后触发事件，但是不会触发子菜单
	$('.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(500);
		三种文字性参数的用法 时间由jquery内部自定义
		ulNode.show('fast');// normal slow
		ulNode.hide();
		toggle方法省去自己写if else这样繁琐的判断
		 是jquery为了配合show hide();
		 ulNode.toggle();
		*/
		
		
		
		/*
		方法三：具有卷帘效果
		ulNode.slideDown();//也可以加参数slow normal fast
		ulNode.slideUp();
		*/
		ulNode.slideToggle();//也可以加参数slow normal fast
		changeIcon($(this));
	});
	
	/*鼠标进入出现 但是有bug 一进入子菜单后立即被收起
		$('.hmain > a').hover(function(){
		$(this).next('ul').slideDown();
		},function(){
			$(this).next('ul').slideUp();
		});
	*/
	
	
	/*鼠标进入出现具有延时操作，鼠标进入主菜单进入子菜单再进入主菜单子菜单又出现
	//鼠标进入主菜单
	$('.hmain > a').hover(function(){
		//将子菜单放下
		$(this).next('ul').slideDown();
	},function(){
		var ulNode = $(this).next('ul');
		//设置延时
		var timeoutId = setTimeout(function(){
			//将子菜单收起
			ulNode.slideUp();
		},300);
		
		//对于鼠标进入子菜单项的设置
		ulNode.hover(function(){
			//清除延时 子菜单不会立即被收起来
			clearTimeout(timeoutId);
		},function(){
			//如果鼠标从子菜单项离开的话将子菜单收起
			$(this).slideUp();
		});
	});
	*/
	
	/*鼠标进入出现具有延时操作，鼠标离开子菜单时 子菜单闪动出现*/
	//鼠标进入主菜单
	$('.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) {
		if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0) {
			mainNode.css("background-image","url('../images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('../images/collapsed.gif')");
		}
	}
}

 

Jsp页面代码代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
  2. <!-- 如果删除doctype就会出现闪动效果，使整体效果变差，在IE里不会变成小手 -->   
  3. <html>   
  4.   <head>   
  5.     <title>JQuery-菜单效果</title>   
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">   
  7.     <meta http-equiv="description" content="this is my page">   
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
  9.     <link rel="stylesheet" href="../css/menu.css" type="text/css">   
  10.     <script type="text/javascript" src="../js/jquery.js"></script>   
  11.     <script type="text/javascript" src="../js/menu.js"></script>   
  12.   
  13.   </head>   
  14.      
  15.   <body>   
  16.     <ul>   
  17.         <li class="main">    
  18.         <a href="#">菜单项1</a>    
  19.             <ul>   
  20.                 <li><a href="#">子菜单项11</a></li>   
  21.                 <li><a href="#">子菜单项12</a></li>   
  22.             </ul>   
  23.         </li>   
  24.         <li class="main">   
  25.         <a href="#">菜单项2</a>   
  26.             <ul>   
  27.                 <li><a href="#">子菜单项21</a></li>   
  28.                 <li><a href="#">子菜单项22</a></li>   
  29.             </ul>   
  30.         </li>   
  31.         <li class="main">   
  32.         <a href="#">菜单项3</a>   
  33.             <ul>   
  34.                 <li><a href="#">子菜单项31</a></li>   
  35.                 <li><a href="#">子菜单项32</a></li>   
  36.             </ul>   
  37.         </li>   
  38.     </ul>   
  39.     <br/>   
  40.     <br/>   
  41.     <br/>   
  42.     <br/>   
  43.     <ul>   
  44.         <li class="hmain">    
  45.         <a href="#">菜单项1</a>    
  46.             <ul>   
  47.                 <li><a href="#">子菜单项11</a></li>   
  48.                 <li><a href="#">子菜单项12</a></li>   
  49.             </ul>   
  50.         </li>   
  51.         <li class="hmain">   
  52.         <a href="#">菜单项2</a>   
  53.             <ul>   
  54.                 <li><a href="#">子菜单项21</a></li>   
  55.                 <li><a href="#">子菜单项22</a></li>   
  56.             </ul>   
  57.         </li>   
  58.         <li class="hmain">   
  59.         <a href="#">菜单项3</a>   
  60.             <ul>   
  61.                 <li><a href="#">子菜单项31</a></li>   
  62.                 <li><a href="#">子菜单项32</a></li>   
  63.             </ul>   
  64.         </li>   
  65.     </ul>   
  66.        
  67.        
  68.        
  69.   </body>   
  70. </html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 如果删除doctype就会出现闪动效果，使整体效果变差，在IE里不会变成小手 -->
<html>
  <head>
    <title>JQuery-菜单效果</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../css/menu.css" type="text/css">
 	<script type="text/javascript" src="../js/jquery.js"></script>
  	<script type="text/javascript" src="../js/menu.js"></script>

  </head>
  
  <body>
    <ul>
		<li class="main"> 
		<a href="#">菜单项1</a> 
			<ul>
				<li><a href="#">子菜单项11</a></li>
				<li><a href="#">子菜单项12</a></li>
			</ul>
		</li>
		<li class="main">
		<a href="#">菜单项2</a>
			<ul>
				<li><a href="#">子菜单项21</a></li>
				<li><a href="#">子菜单项22</a></li>
			</ul>
		</li>
		<li class="main">
		<a href="#">菜单项3</a>
			<ul>
				<li><a href="#">子菜单项31</a></li>
				<li><a href="#">子菜单项32</a></li>
			</ul>
		</li>
	</ul>
	<br/>
	<br/>
	<br/>
	<br/>
	<ul>
		<li class="hmain"> 
		<a href="#">菜单项1</a> 
			<ul>
				<li><a href="#">子菜单项11</a></li>
				<li><a href="#">子菜单项12</a></li>
			</ul>
		</li>
		<li class="hmain">
		<a href="#">菜单项2</a>
			<ul>
				<li><a href="#">子菜单项21</a></li>
				<li><a href="#">子菜单项22</a></li>
			</ul>
		</li>
		<li class="hmain">
		<a href="#">菜单项3</a>
			<ul>
				<li><a href="#">子菜单项31</a></li>
				<li><a href="#">子菜单项32</a></li>
			</ul>
		</li>
	</ul>
	
	
	
  </body>
</html>

 

 

 注： 附件是全代码 效果看html文件夹中的html

 

来自：http://waynett.iteye.com/blog/815262

css怎么把横向菜单变纵向_实现简洁漂亮二级菜单的2个实例
weixin_30540871的博客
12-28 975
在程序开发中，经常用到二级菜单，这里给大家介绍2种：①实现纵向下拉二级菜单实例，②实现横向下拉二级菜单实例。1、实现纵向下拉二级菜单实例纵向下拉二级菜单如下图所示：实现纵向下拉二级菜单实例效果图具体代码实现如下(主要代码有参考注释)：二级纵向下拉菜单 *{ margin:0; padding:0;} ul, li { list-style:none;} a { text-decoration:no...
jQuery实现横纵向菜单
Have fun,Study hard,Be myself
05-22 904
学了有一段时间的js，jQuery,不过作为js的一个类库，jQuery在js中的角色是举足轻重的， jquery真的很强大，就像它的一句代言词：write less，do  more 下面我就献丑一下，刚刚用jQuery实现的横纵向菜单 比如：在js中首先找到发生a事件的b元素 1.a有click()事件，第一种横向的是通过鼠标点击发生的下拉菜单 也有hover()事件，第二种纵向的是
CSS3和jQuery的横向导航菜单
ICode联盟
11-07 198
下载地址 HTML标记 Home About Blog Services Portfolio Contacts Back to Article How it Works? 作为最佳实践,我们必须使用该菜单项的列表元素。的 是我们必须动画元素。CSS一些CSS3特性用于风格等因素 border-radius, box-shadow, rgba和 gradient..lavalamp { position: relative; border: 1px solid #d6d6d6;
两个横向菜单栏示例
weixin_33738555的博客
11-15 179
  菜单栏示例一： 菜单源代码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...
html左侧分级导航,jquery实现无限分级横向导航菜单的方法
weixin_39631572的博客
05-31 456
本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下：1. jquery插件版本代码如下：(function($){$.fn.extend({droplinemenu: function(configs) {var configs = $.extend({over: 200,out: 100,rightdown:'css/down.gif'},confi...
jquery + css 横纵下拉菜单
waynett316的专栏
11-24 1090
<br />menu.css页面如下<br /> ul,li { /*清除ul,li默认的小原点*/ list-style:none; } ul { /*清除ul的缩近值,只对padding设置在IE6与IE7中并不好使还需要设置margin*/ padding:0; margin: 0; } /*设置class需要加.*/ .main, .hmain { /*添加背景图片,背景图片会覆盖li的背景色*/ background-image: url(../images/
【JQuery】——横向纵向下拉菜单
杨晓敏
02-25 1492
在学习jQuery的过程中，遇到项目中最常用到的下拉菜单，本着高效的原则，在此总结一下横向和纵向下拉菜单的实现效果，形成自己的小类库，以便自己在项目过程中能够方便的调用。       HTML部分：       引用menu.css、jquery.js（已经封装好的）和menu.js文件 JQuery实战-菜单效果
前端三剑客HTML+CSS+JavaScript/jquery库
weixin_30603633的博客
12-06 211
前端三剑客HTML+CSS+JavaScript HTML(超文本标记语言)负责网页的结构 CSS(层叠样式表)负责网页的样式(比如颜色/字体/边框等属性设置) JavaScript(脚本语言)负责网页的行为(点击/输入输出/滚动等等) HTML部分: html文档结构:整个html文档一般都包括header/body两部分: header头部标签主要包含html的...
JQuery纵向下拉菜单实现心得
从手指到键盘，谱出生命的轨迹~~~
03-23 2260
jquery库给我们带来了许多便利，不愧是轻量级的DOM框架，在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍，期待各位小伙伴的指导。使用jquery实现一个简单的横纵向菜单，小编相信其他小伙伴都有很多的实现方法，小编今天自己使用JQuery写了一个横纵向菜单，用博文跟小伙伴分享一下小编实现横纵向菜单的实现心得。         当我们浏览网页和使
JQuery实现横纵向下拉菜单
03-10
JQuery，作为JavaScript的一个库，提供了丰富的API和方法来简化动态效果的实现，包括创建下拉菜单。本篇文章将深入探讨如何使用JQuery实现横纵向下拉菜单。 首先，我们需要了解基本的HTML结构。一个简单的下拉菜单...
Jquery+Css打造横纵菜单下拉效果实战教程
#### 标题解析：Jquery + Css 实现横纵菜单下拉效果 在现代网页设计中，横纵菜单是常用的导航元素，它们能够帮助用户在网站中快速定位和跳转。而下拉效果是这些菜单中一个非常重要的交互特性，它使得在有限的空间内...
基于python+mysql+vue的停车场管理系统，小区停车管理系统.zip
08-22
基于python+mysql+vue的停车场管理系统，小区停车管理系统.zip
基于Python和flask的博客系统.zip
最新发布
08-22
基于Python和flask的博客系统.zip
一个基于 python 的 flask 框架的资讯网站，http___119.29.100.53_8086_.zip
08-22
一个基于 python 的 flask 框架的资讯网站，http___119.29.100.53_8086_.zip
数学建模导论：基于Python语言.zip
08-22
数学建模导论：基于Python语言.zip
基于Vite5和Vue34构建的DaxPay移动H5端支付管理系统_集成VbenAdmin2后台框架与AntDesignVue4组件库_提供完整的移动端支付解决方案与后台管理功能.zip
08-22
基于Vite5和Vue34构建的DaxPay移动H5端支付管理系统_集成VbenAdmin2后台框架与AntDesignVue4组件库_提供完整的移动端支付解决方案与后台管理功能.zip
基于 kuriyama（Python SDK v3）的修改版本.zip
08-22
基于 kuriyama（Python SDK v3）的修改版本.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值