救急：利用jquery显示各菜单效果？

net205 2009-09-22 03:04:27
现在要开发一个菜单功能，定制功能需要相当灵活，像菜单横幅显示、竖幅显示。
以后还要加字符分隔符，图片分隔符(这个暂时不考虑)。

我找了很多jquery插件，像superfish，ddsmoothmenu，都不能很好的满足要求。自己写了一个，问题一样多
求救各位帮忙：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>
<style type="text/css">
/*-------------------------------------------------menu-----------------------------------------------*/
.menu{ font-size:16px; padding:0px; margin:0px;}
.menu ul{list-style-type:none;}
.menu ul li{ float:left; line-height:30px; margin-right:2px; background-color:#457AEA;}
.menu ul li a{display:block; padding:3px 40px; color:#fff; text-decoration:none; }
.menu ul li a:hover{ background-color:#000;}

.menu ul li ul{padding:0px; margin:0px; display:none;}
.menu ul li ul {position:absolute;}
.menu ul li ul li{margin-right:0px; background-color:#1A408B;float:left;}
.menu ul li ul li a{padding:3px 20px;}

.menu ul li ul li ul{padding:0px; margin:0px; display:none;}
.menu ul li ul li ul {position:absolute;}
.menu ul li ul li ul li{margin-right:0px; background-color:#1A408B;float:left;}
.menu ul li ul li ul li a{padding:3px 20px;}

/*-----------------menu1---------------------------------------------------------------------*/
.menu1 { font-size:16px; padding:0px; margin:0px;}
.menu1 ul{list-style-type:none;}
.menu1 ul li{ float:left; margin-right:2px;}
.menu1 ul li a{
display:block;
padding:10px 25px;
text-decoration:none;
width:50px;
background-color:#457AEA;
color:#fff;
text-align:center;
border-bottom:2px solid #1B3F8D;
}
.menu1 ul li a:hover{background-color:#000;}

.menu1 ul li ul{ position:absolute; top:60px; left:110px; display:none;}
.menu1 ul li ul li{ float:none; border-bottom:0px; }
.menu1 ul li ul li a {display:block; padding:10px 25px; background-color:#1A408B;}
.menu1 ul li ul li a:hover{background-color:#000;}
.menu1 ul li ul li ul{margin-left:-5px;}

.menu1 ul li ul li ul li a{ background-color:#000011; border-bottom:0px;}
.menu1 ul li ul li ul li a:hover{background-color:#358;}


/*--------------------------------menu2-------------------------------------------------------------*/
.menu2{ font-size:16px; padding:0px; margin:0px; }
.menu2 ul{list-style-type:none;}
.menu2 ul li{ line-height:30px; margin-top:2px; }
.menu2 ul li a{ display:block;padding:3px 20px 3px 10px; color:#fff; text-decoration:none; width:150px; background-color:#457AEA; text-align:left;border-left:30px solid #1A408B;}
.menu2 ul li a:hover{ background-color:#000;}

.menu2 ul li ul{ position:absolute; }
.menu2 ul li ul li{ float:left}
.menu2 ul li ul li a{ width:50px; border:0px; background-color:#000;}
.menu2 ul li ul li a:hover{background-color:#356;}


/*--------------------------------menu3-----------------------------------------------------------*/
.menu3{ font-size:16px; padding:0px; margin:0px; }
.menu3 ul{list-style-type:none;}
.menu3 ul li{ line-height:30px; margin-top:2px; }
.menu3 ul li a{ display:block;padding:3px 20px 3px 10px; color:#fff; text-decoration:none; width:150px; background-color:#457AEA; text-align:left;border-left:30px solid #1A408B;}
.menu3 ul li a:hover{ background-color:#000;}

.menu3 ul li ul{ position:absolute; left:175px;display:none;}
.menu3 ul li ul li{margin:0px;}
.menu3 ul li ul li a{border:0px; background-color:#1A408B;}
.menu3 ul li ul li a:hover{ background-color:#000;}
</style>

<script>
var _separatorSettings1 = '1|1|1'.split('|');
var _separatorSettings2 = '1|0|0'.split('|');
var _separatorSettings3 = '0|0|0'.split('|');
$(document).ready(function(){
//menu1
$('#previewArea1 ul li').hover(
function(){
var iLevel = 0;
$(this).parents().each(function(){
if( $(this).attr('id') == 'previewArea1' ){
return false;
}
if( $(this).attr('tagName').toUpperCase() == 'LI' ){
iLevel = iLevel + 1;
}
});
SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings1[iLevel]);
$(this).children("ul:eq(0)").css({display:'block'})
$(this).children("ul:eq(0)").show();
},
function(){
$(this).children("ul:eq(0)").hide();
}
);

//menu2
$('#previewArea2 ul li').hover(
function(){
var iLevel = 0;
$(this).parents().each(function(){
if( $(this).attr('id') == 'previewArea2' ){
return false;
}
if( $(this).attr('tagName').toUpperCase() == 'LI' ){
iLevel = iLevel + 1;
}
});
SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings2[iLevel]);
$(this).children("ul:eq(0)").css({display:'block'})
$(this).children("ul:eq(0)").show();
},
function(){
$(this).children("ul:eq(0)").hide();
}
);

//menu3
$('#previewArea3 ul li').hover(
function(){
var iLevel = 0;
$(this).parents().each(function(){
if( $(this).attr('id') == 'previewArea3' ){
return false;
}
if( $(this).attr('tagName').toUpperCase() == 'LI' ){
iLevel = iLevel + 1;
}
});
SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings3[iLevel]);
$(this).children("ul:eq(0)").css({display:'block'})
$(this).children("ul:eq(0)").show();
},
function(){
$(this).children("ul:eq(0)").hide();
}
);
});

function SetChildrenPos(curElement, childElement, curMode){
var curOffset = $(curElement).offset();
var curHeight = $(curElement).height();
var curWidth = $(curElement).width();
$(childElement).css('top', curOffset.top + curHeight + 'px');

//$('#pos').html('');
//$('#pos').append('curElement(left,top):' + curOffset.left + ',' + curOffset.top);
//$('#pos').append('<br/>curElement(width,height):' + curWidth + ',' + curHeight);

var curParentRightPos = $(curElement).parent('ul:eq(0)').offset().left + $(curElement).parent('ul:eq(0)').width();
var preChildRightPos = curOffset.left + $(childElement).width();

if(curMode == '1'){
if(preChildRightPos > curParentRightPos){
//var curRightPos = curOffset.left + curWidth;
//$(childElement).css('left', curParentRightPos - $(childElement).width() + 'px');
$(childElement).css('left', curOffset.left + 'px');
}
else{
$(childElement).css('left', curOffset.left + 'px');
}
}
else{
$(childElement).css('top', curOffset.top + 'px');
$(childElement).css('left', curOffset.left + curWidth + 'px');
}
}
</script>
</head>
<body>
<div id="pos"></div>
<div id="previewArea1" class="menu">
<ul>
<li><a href="#">1MENU1</a></li>
<li><a href="#">1MENU2</a>
<ul>
<li><a href="#">1MENU2.1</a></li>
<li><a href="#">1MENU2.2</a></li>
<li><a href="#">1MENU2.3</a>
<ul>
<li><a href="">1MENU2.3.1</a></li>
<li><a href="">1MENU2.3.2</a></li>
</ul>
</li>
<li><a href="#">1MENU2.4</a></li>
</ul>
</li>
<li><a href="#">1MENU3</a></li>
<li><a href="#">1MENU4</a>
<ul>
<li><a href="#">1MENU4.1</a></li>
<li><a href="#">1MENU4.2</a></li>
<li><a href="#">1MENU4.3</a>
<ul>
<li><a href="">1MENU4.3.1</a></li>
<li><a href="">1MENU4.3.2</a></li>
</ul>
</li>
<li><a href="#">1MENU4.4</a></li>
</ul>
</li>
</ul>
</div>
<br style="float:clear;" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="previewArea2" class="menu1">
<ul>
<li><a href="#">2MENU1</a></li>
<li><a href="#">2MENU2</a>
<ul>
<li><a href="#">2MENU2.1</a></li>
<li><a href="#">2MENU2.2</a></li>
<li><a href="#">2MENU2.3</a>
<ul>
<li><a href="">2MENU2.3.1</a></li>
<li><a href="">2MENU2.3.2</a></li>
</ul>
</li>
<li><a href="#">2MENU2.4</a></li>
</ul>
</li>
<li><a href="#">2MENU3</a></li>
<li><a href="#">2MENU4</a>
<ul>
<li><a href="#">2MENU4.1</a></li>
<li><a href="#">2MENU4.2</a></li>
<li><a href="#">2MENU4.3</a>
<ul>
<li><a href="">2MENU4.3.1</a></li>
<li><a href="">2MENU4.3.2</a></li>
</ul>
</li>
<li><a href="#">2MENU4.4</a></li>
</ul>
</li>
</ul>
</div>
<br style="float:clear;" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="previewArea3" class="menu3">
<ul>
<li><a href="#">3MENU1</a></li>
<li><a href="#">3MENU2</a>
<ul>
<li><a href="#">3MENU2.1</a></li>
<li><a href="#">3MENU2.2</a></li>
<li><a href="#">3MENU2.3</a>
<ul>
<li><a href="">3MENU2.3.1</a></li>
<li><a href="">3MENU2.3.2</a></li>
</ul>
</li>
<li><a href="#">3MENU2.4</a></li>
</ul>
</li>
<li><a href="#">3MENU3</a></li>
<li><a href="#">3MENU4</a>
<ul>
<li><a href="#">3MENU4.1</a></li>
<li><a href="#">3MENU4.2</a></li>
<li><a href="#">3MENU4.3</a>
<ul>
<li><a href="">3MENU4.3.1</a></li>
<li><a href="">3MENU4.3.2</a></li>
</ul>
</li>
<li><a href="#">3MENU4.4</a></li>
</ul>
</li>
</ul>
</div>
<br style="float:clear;" />
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
...全文
180 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
ws_hgo 2009-09-22
  • 打赏
  • 举报
 回复
好长先看看
net205 2009-09-22
  • 打赏
  • 举报
 回复
如果有空的话，大家帮我调一调，我都搞晕了
灬上海爽爷 2009-09-22
  • 打赏
  • 举报
 回复
up
net205 2009-09-22
  • 打赏
  • 举报
 回复
第一个菜单的三级子菜单显示位置有问题
第二个菜单的二级子菜单偏右了，三级子菜单显示位置也有问题
第三个菜单更惨
net205 2009-09-22
  • 打赏
  • 举报
 回复
没加代码格式化，继续：


现在要开发一个菜单功能，定制功能需要相当灵活，像菜单横幅显示、竖幅显示。

以后还要加字符分隔符，图片分隔符(这个暂时不考虑)。



我找了很多jquery插件，像superfish，ddsmoothmenu，都不能很好的满足要求。自己写了一个，问题一样多

求救各位帮忙：



<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"></script>

<style type="text/css">

/*-------------------------------------------------menu-----------------------------------------------*/

.menu{ font-size:16px; padding:0px; margin:0px;}

.menu ul{list-style-type:none;}

.menu ul li{ float:left; line-height:30px;  margin-right:2px; background-color:#457AEA;}

.menu ul li a{display:block; padding:3px 40px; color:#fff; text-decoration:none; }

.menu ul li a:hover{ background-color:#000;}



.menu ul li ul{padding:0px; margin:0px; display:none;}

.menu ul li ul {position:absolute;}

.menu ul li ul li{margin-right:0px; background-color:#1A408B;float:left;}

.menu ul li ul li a{padding:3px 20px;}



.menu ul li ul li ul{padding:0px; margin:0px; display:none;}

.menu ul li ul li ul {position:absolute;}

.menu ul li ul li ul li{margin-right:0px; background-color:#1A408B;float:left;}

.menu ul li ul li ul li a{padding:3px 20px;}



/*-----------------menu1---------------------------------------------------------------------*/

.menu1 { font-size:16px;  padding:0px; margin:0px;}

.menu1 ul{list-style-type:none;}

.menu1 ul li{ float:left; margin-right:2px;}

.menu1 ul li a{ 

	display:block; 

	padding:10px 25px; 

	text-decoration:none; 

	width:50px; 

	background-color:#457AEA; 

	color:#fff; 

	text-align:center; 

	border-bottom:2px solid #1B3F8D;

}

.menu1 ul li a:hover{background-color:#000;}



.menu1 ul li ul{ position:absolute; top:60px; left:110px; display:none;}

.menu1 ul li ul li{ float:none; border-bottom:0px; }

.menu1 ul li ul li a {display:block;  padding:10px 25px; background-color:#1A408B;}

.menu1 ul li ul li a:hover{background-color:#000;}

.menu1 ul li ul li ul{margin-left:-5px;}



.menu1 ul li ul li ul li a{ background-color:#000011; border-bottom:0px;}

.menu1 ul li ul li ul li a:hover{background-color:#358;}





/*--------------------------------menu2-------------------------------------------------------------*/

.menu2{ font-size:16px; padding:0px; margin:0px; }

.menu2 ul{list-style-type:none;}

.menu2 ul li{ line-height:30px; margin-top:2px; }

.menu2 ul li a{ display:block;padding:3px 20px 3px 10px; color:#fff; text-decoration:none; width:150px; background-color:#457AEA; text-align:left;border-left:30px solid #1A408B;}

.menu2 ul li a:hover{ background-color:#000;}



.menu2 ul li ul{ position:absolute;  }

.menu2 ul li ul li{ float:left}

.menu2 ul li ul li a{ width:50px; border:0px; background-color:#000;}

.menu2 ul li ul li a:hover{background-color:#356;}





/*--------------------------------menu3-----------------------------------------------------------*/

.menu3{ font-size:16px; padding:0px; margin:0px; }

.menu3 ul{list-style-type:none;}

.menu3 ul li{ line-height:30px; margin-top:2px; }

.menu3 ul li a{ display:block;padding:3px 20px 3px 10px; color:#fff; text-decoration:none; width:150px; background-color:#457AEA; text-align:left;border-left:30px solid #1A408B;}

.menu3 ul li a:hover{ background-color:#000;}



.menu3 ul li ul{ position:absolute; left:175px;display:none;}

.menu3 ul li ul li{margin:0px;}

.menu3 ul li ul li a{border:0px; background-color:#1A408B;}

.menu3 ul li ul li a:hover{ background-color:#000;}

</style>



<script>

	var _separatorSettings1 = '1|1|1'.split('|');

	var _separatorSettings2 = '1|0|0'.split('|');

	var _separatorSettings3 = '0|0|0'.split('|');

	$(document).ready(function(){

		//menu1

		$('#previewArea1 ul li').hover(

			function(){

				var iLevel = 0;

				$(this).parents().each(function(){

					if( $(this).attr('id') == 'previewArea1' ){

						return false;

					}

					if( $(this).attr('tagName').toUpperCase() == 'LI' ){

						iLevel = iLevel + 1;

					}

				});

				SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings1[iLevel]);

				$(this).children("ul:eq(0)").css({display:'block'})

				$(this).children("ul:eq(0)").show();

			},

			function(){

				$(this).children("ul:eq(0)").hide();

			}

		);

		

		//menu2

		$('#previewArea2 ul li').hover(

			function(){

				var iLevel = 0;

				$(this).parents().each(function(){

					if( $(this).attr('id') == 'previewArea2' ){

						return false;

					}

					if( $(this).attr('tagName').toUpperCase() == 'LI' ){

						iLevel = iLevel + 1;

					}

				});

				SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings2[iLevel]);

				$(this).children("ul:eq(0)").css({display:'block'})

				$(this).children("ul:eq(0)").show();

			},

			function(){

				$(this).children("ul:eq(0)").hide();

			}

		);

		

		//menu3

		$('#previewArea3 ul li').hover(

			function(){

				var iLevel = 0;

				$(this).parents().each(function(){

					if( $(this).attr('id') == 'previewArea3' ){

						return false;

					}

					if( $(this).attr('tagName').toUpperCase() == 'LI' ){

						iLevel = iLevel + 1;

					}

				});

				SetChildrenPos($(this), $(this).children('ul:eq(0)'), _separatorSettings3[iLevel]);

				$(this).children("ul:eq(0)").css({display:'block'})

				$(this).children("ul:eq(0)").show();

			},

			function(){

				$(this).children("ul:eq(0)").hide();

			}

		);

	}); 



function SetChildrenPos(curElement, childElement, curMode){

	var curOffset = $(curElement).offset();

	var curHeight = $(curElement).height();

	var curWidth = $(curElement).width();

	$(childElement).css('top', curOffset.top + curHeight + 'px');



	//$('#pos').html('');

	//$('#pos').append('curElement(left,top):' + curOffset.left + ',' + curOffset.top);

	//$('#pos').append('<br/>curElement(width,height):' + curWidth + ',' + curHeight);

	

	var curParentRightPos = $(curElement).parent('ul:eq(0)').offset().left + $(curElement).parent('ul:eq(0)').width();

	var preChildRightPos = curOffset.left + $(childElement).width();



	if(curMode == '1'){

		if(preChildRightPos > curParentRightPos){

			//var curRightPos = curOffset.left + curWidth;

			//$(childElement).css('left', curParentRightPos - $(childElement).width() + 'px');

			$(childElement).css('left', curOffset.left + 'px');

		}

		else{

			$(childElement).css('left', curOffset.left + 'px');

		}

	}

	else{

		$(childElement).css('top', curOffset.top + 'px');

		$(childElement).css('left', curOffset.left + curWidth + 'px');

	}

}

</script>

</head>

<body>

<div id="pos"></div>

<div id="previewArea1" class="menu">

	<ul>

		<li><a href="#">1MENU1</a></li>

		<li><a href="#">1MENU2</a>

			<ul>

				<li><a href="#">1MENU2.1</a></li>

				<li><a href="#">1MENU2.2</a></li>

				<li><a href="#">1MENU2.3</a>

				<ul>

					<li><a href="">1MENU2.3.1</a></li>

					<li><a href="">1MENU2.3.2</a></li>

				</ul>

				</li>

				<li><a href="#">1MENU2.4</a></li>

			</ul>

		</li>

		<li><a href="#">1MENU3</a></li>

		<li><a href="#">1MENU4</a>

			<ul>

				<li><a href="#">1MENU4.1</a></li>

				<li><a href="#">1MENU4.2</a></li>

				<li><a href="#">1MENU4.3</a>

				<ul>

					<li><a href="">1MENU4.3.1</a></li>

					<li><a href="">1MENU4.3.2</a></li>

				</ul>

				</li>

				<li><a href="#">1MENU4.4</a></li>

			</ul>

		</li>

	</ul>

</div>

<br style="float:clear;" />

<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div id="previewArea2" class="menu1">

	<ul>

		<li><a href="#">2MENU1</a></li>

		<li><a href="#">2MENU2</a>

			<ul>

				<li><a href="#">2MENU2.1</a></li>

				<li><a href="#">2MENU2.2</a></li>

				<li><a href="#">2MENU2.3</a>

				<ul>

					<li><a href="">2MENU2.3.1</a></li>

					<li><a href="">2MENU2.3.2</a></li>

				</ul>

				</li>

				<li><a href="#">2MENU2.4</a></li>

			</ul>

		</li>

		<li><a href="#">2MENU3</a></li>

		<li><a href="#">2MENU4</a>

			<ul>

				<li><a href="#">2MENU4.1</a></li>

				<li><a href="#">2MENU4.2</a></li>

				<li><a href="#">2MENU4.3</a>

				<ul>

					<li><a href="">2MENU4.3.1</a></li>

					<li><a href="">2MENU4.3.2</a></li>

				</ul>

				</li>

				<li><a href="#">2MENU4.4</a></li>

			</ul>

		</li>

	</ul>

</div>

<br style="float:clear;" />

<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div id="previewArea3" class="menu3">

	<ul>

		<li><a href="#">3MENU1</a></li>

		<li><a href="#">3MENU2</a>

			<ul>

				<li><a href="#">3MENU2.1</a></li>

				<li><a href="#">3MENU2.2</a></li>

				<li><a href="#">3MENU2.3</a>

				<ul>

					<li><a href="">3MENU2.3.1</a></li>

					<li><a href="">3MENU2.3.2</a></li>

				</ul>

				</li>

				<li><a href="#">3MENU2.4</a></li>

			</ul>

		</li>

		<li><a href="#">3MENU3</a></li>

		<li><a href="#">3MENU4</a>

			<ul>

				<li><a href="#">3MENU4.1</a></li>

				<li><a href="#">3MENU4.2</a></li>

				<li><a href="#">3MENU4.3</a>

				<ul>

					<li><a href="">3MENU4.3.1</a></li>

					<li><a href="">3MENU4.3.2</a></li>

				</ul>

				</li>

				<li><a href="#">3MENU4.4</a></li>

			</ul>

		</li>

	</ul>

</div>

<br style="float:clear;" />

<br/><br/><br/><br/><br/><br/><br/><br/><br/>

</body>

</html>
2016年全面前端面试题总结
 控制用户不可选择文字 区域性 overflow: scroll | auto 滚动时使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+） 单行、多行溢出省略 /* 单行省略 */ .ellipsis { overflow: hidden;...
前端面试宝典超
还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。 主要的互联网目录 Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的...
前端面试题杂烩part1
控制用户不可选择文字 区域性 overflow: scroll | auto 滚动时使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+） 单行、多行溢出省略 /* 单行省略 */ .ellipsis { overflow: hidden;...
前端面试宝典
为什么利用多个域名来存储网站资源会更有效？ 23 8. 请谈一下你对网页标准和标准制定机构重要性的理解。 24 9. 请描述一下 cookies ， sessionStorage 和 localStorage 的区别？ 24 10. 简述一下 src 与 href ...
走进JavaWeb技术世界1：Web后端与J2EE的由来
后端程序员都干些什么 转自：微信公众号 码农翻身 这个问题来自于QQ网友，一句两句说不清楚，索性写个文章。 ...我刚开始做Web开发的时候，根本没有...即使后来Javascript在浏览器中添加了一些AJAX的效果，那也...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章