`

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

CSSjQueryJavaScriptIEHTML 
阅读更多
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

分享到：
| 增强webprint打印控件一次打印多份文档的方 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery+CSS3实现动画相册代码.rar

    jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+CSS3实现动画相册代码.rar jQuery+...

    非常酷炫的jQuery+css超滑二级下拉菜单

    在这个"jQuery+css超滑二级下拉菜单"的实现中，开发者可能使用了如下技术： - 通过jQuery的`.hover()`方法监听主菜单项的鼠标悬停事件，触发子菜单的显示和隐藏。 - 使用CSS3的`transform`属性改变子菜单的`...

    jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip

    "jq+css3弹动下拉菜单 jquery+css3弹动渐变下拉菜单代码下载.zip" 提供的资源正是这样一个结合了jQuery和CSS3技术的动态效果下拉菜单。这个压缩包中的代码可以帮助开发者实现一个既美观又有动态反馈的菜单，提升用户...

    jQuery+CSS3飘带式下拉菜单.zip

    本资源“jQuery+CSS3飘带式下拉菜单.zip”提供了一种创新的实现方式，利用jQuery的动态效果和CSS3的新特性来创建具有飘带效果的下拉菜单。下面我们将深入探讨这个主题中的关键知识点。 首先，jQuery是一款广泛使用...

    jQuery+CSS3多功能下拉菜单.zip

    《jQuery+CSS3多功能下拉菜单》 在网页设计中，下拉菜单是一种常见的交互元素，用于组织和展示大量的导航选项。本项目结合了jQuery、CSS3这两种强大的技术，构建了一个功能丰富的下拉菜单，旨在提供高效且用户体验...

    jQuery+css3实现信封效果 jQuery+css3实现信封网页特效.zip

    jQuery+css3实现信封效果 jQuery+css3实现信封网页特效.zip

    Jquery+CSS打造的滑动下拉菜单

    ### Jquery+CSS打造的滑动下拉菜单 在网页设计与开发中，导航菜单是不可或缺的一部分，良好的导航设计能够显著提升用户体验。本篇将基于提供的文件内容来深入解析如何运用Jquery结合CSS来实现一个滑动效果的下拉...

    jquery+css3弹性动感下拉菜单.zip

    综上所述，这个“jquery+css3弹性动感下拉菜单.zip”资源提供了使用`jQuery`和`CSS3`技术实现动态下拉菜单的实例。通过学习和理解这个项目，开发者可以提升自己在前端开发中的技能，特别是对交互性动态效果的实现。...

    jQuery+CSS3漂亮的下拉菜单选择框美化特效.zip

    **jQuery+CSS3漂亮的下拉菜单选择框美化特效** 在网页设计中，下拉菜单选择框是常见的交互元素，用于用户在多个选项中进行选择。然而，原生HTML的下拉菜单样式通常较为简单，不符合现代网页的美观需求。本教程将...

    jquery+css实现的简洁漂亮的横向二级菜单

    "jQuery + CSS 实现的简洁漂亮的横向二级菜单"是一个利用这两种技术构建高效、美观且易于使用的菜单系统的实例。jQuery 是一个轻量级的 JavaScript 库，而 CSS 则用于样式控制和布局，两者结合能实现动态交互效果，...

    jquery+css实现横向动感菜单

    "jQuery+CSS实现横向动感菜单"就是一种常见的交互式导航设计，它利用JavaScript库jQuery的高效性能和CSS的样式控制来创建出类似Flash的平滑过渡效果，但比Flash更轻量级，兼容性更强，且更利于SEO优化。 首先，...

    HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip

    本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目，分析它们在实际应用中的作用。 首先，HTML（HyperText Markup Language）...

    jquery+css3实现图片提示效果.rar

    jquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rarjquery+css3实现图片提示效果.rar

    jQuery+CSS3+HTML5折叠卡片式下拉菜单特效

    **jQuery+CSS3+HTML5折叠卡片式下拉菜单特效详解** 在网页设计中，下拉菜单是一种常见的交互元素，用于展示多级导航结构。本特效利用jQuery的事件处理、DOM操作，结合CSS3的动画效果和HTML5的新特性，构建出一种...

    Jquery+div+css鼠标经过下拉菜单

    总之，“Jquery+div+css鼠标经过下拉菜单”是一个利用jQuery的事件处理和CSS的样式控制，实现用户交互效果的实例。通过理解这些技术，开发者可以创建更丰富、更具吸引力的网页界面，提升用户体验。

    jquery+css实现横向二级下拉菜单

    本教程将深入探讨如何使用jQuery和CSS技术实现一个流畅且效果出色的横向二级下拉菜单。 首先，我们需要理解jQuery和CSS在创建这种菜单中的作用。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及...

    jQuery+CSS3流畅下拉菜单特效.zip

    本主题聚焦于"jQuery+CSS3流畅下拉菜单特效"，旨在探讨如何结合这两种强大的技术来创建动态、流畅且具有吸引力的下拉菜单。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax...

    jquery+css 下拉菜单

    总结来说，创建一个jQuery+CSS下拉菜单主要涉及以下步骤： 1. 使用HTML构建菜单结构。 2. 通过CSS设置样式，隐藏子菜单，并在主菜单项悬停时显示子菜单。 3. 引入jQuery，编写JavaScript代码以实现动态效果和交互性...

    jQuery+CSS3复古下拉菜单Formbox.zip

    《jQuery+CSS3复古下拉菜单Formbox：前端开发中的艺术与技巧》 在Web开发领域，用户界面的交互性和视觉吸引力是至关重要的。本文将深入探讨如何利用jQuery和CSS3技术来创建一款复古风格的下拉菜单——Formbox。这款...

Magicbox
Global site tag (gtag.js) - Google Analytics