`

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打印控件一次打印多份文档的方 ...
评论
发表评论

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

相关推荐

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