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

现在要开发一个菜单功能，定制功能需要相当灵活，像菜单横幅显示、竖幅显示。
以后还要加字符分隔符，图片分隔符(这个暂时不考虑)。我找了很多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>

解决方案 »

  1.   

    没加代码格式化，继续：现在要开发一个菜单功能，定制功能需要相当灵活，像菜单横幅显示、竖幅显示。
    以后还要加字符分隔符，图片分隔符(这个暂时不考虑)。我找了很多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>