<script type="text/javascript">
</script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
function
JsMenu(name)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
this.Direction = 0; //主菜单排列方向:0代表横向,1代表竖向
this.MainWidth = 200; //主菜单各项宽度
this.MainHeight = 20; //主菜单各项高度
this.ItemWidth = null;
this.ItemHeight = null;
this.MainIcon = null;
this.MainAlign = null;
this.ItemIcon = null;
this.ItemAlign = null;
this.MainAnchor = null;
this.ItemAnchor = null;
this.Spacing = 0;
this.Padding = 0;
this.OutBgColor = '#FFFFFF';
this.OverBgColor = '#EFEFEF';
this.OutBorder = '1px solid #BBBBBB';
this.OverBorder = '1px solid #999999';
this.Name = 'JM'; //注:不用更改
this.Icon = '·'; //注:不用更改
var HasItems = false;
var MenuItems = new Array();
this.Add = function(Id,Parent,Text,Href,Target,Title)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
HasItems = true;
MenuItems[MenuItems.length] = new Array(Id,Parent,Text,Href,Target,Title);
};
this.Load = function()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(name == null)
this.Name += Math.random().toString().replace('.','0');
else
this.Name = this.Name + name;
if(this.MainHeight != null) this.MainHeight = 'height="'+this.MainHeight+'"';
if(this.ItemHeight != null) this.ItemHeight = 'height="'+this.ItemHeight+'"';
if(this.MainAlign != null) this.MainAlign = 'align="'+this.MainAlign+'"';
if(this.ItemAlign != null) this.ItemAlign = 'align="'+this.ItemAlign+'"';
if(this.MainAnchor != null) this.MainAnchor = 'class="'+this.MainAnchor+'"';
if(this.ItemAnchor != null) this.ItemAnchor = 'class="'+this.ItemAnchor+'"';
if(this.MainIcon == null)
this.MainIcon = this.Icon;
else
this.MainIcon = '<img border="0" src="'+this.MainIcon+'" align="absmiddle"/>';
if(this.ItemIcon == null)
this.ItemIcon = this.Icon;
else
this.ItemIcon = '<img border="0" src="'+this.ItemIcon+'" align="absmiddle"/>';
};
this.getMain = function(NO)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(this.Direction == 1) document.write('<tr>');
document.write('<td width="'+this.MainWidth+'" '+this.MainAlign+' '+this.MainHeight+' bgcolor="'+this.OutBgColor+'" style="border:'+this.OutBorder+';padding:'+this.Padding+';white-space:nowrap;" title="'+MenuItems[NO][5]+'"');
document.write(' οnmοuseοver="this.bgColor=''+this.OverBgColor+'';this.style.border=''+this.OverBorder+'';'+this.Name+'_'+MenuItems[NO][0]+'.style.display='inline';" οnmοuseοut="this.bgColor=''+this.OutBgColor+'';this.style.border=''+this.OutBorder+'';'+this.Name+'_'+MenuItems[NO][0]+'.style.display='none';">');
document.write('<div style="display:inline;width:'+(this.MainWidth-20)+'px;"> '+this.MainIcon+' <a href="'+MenuItems[NO][3]+'" target="'+MenuItems[NO][4]+'" '+this.MainAnchor+'>'+MenuItems[NO][2]+'</a> </div>');
document.write('<div id="'+this.Name+'_'+MenuItems[NO][0]+'_HI" align="right" style="display:none;width:20px;"><span style="font-family:Webdings">4</span></div>');
if(this.Direction == 1)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
document.write('<td width="0" align="left" valign="top" οnmοuseοver="'+this.Name+'_'+MenuItems[NO][0]+'.style.display='inline';" οnmοuseοut="'+this.Name+'_'+MenuItems[NO][0]+'.style.display='none';">');
document.write('<div id="'+this.Name+'_'+MenuItems[NO][0]+'" style="position:absolute;display:none;">');
document.write(this.getItems(MenuItems[NO][0]));
document.write('</div>');
document.write('</td>');
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
document.write('<br/>');
document.write('<div id="'+this.Name+'_'+MenuItems[NO][0]+'" style="position:absolute;display:none;">');
document.write(this.getItems(MenuItems[NO][0]));
document.write('</div>');
}
document.write('</td>');
if(this.Direction == 1) document.write('</tr>');
};
this.getItems = function(PID)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var HasItems = false;
var ItemString = null;
ItemString = '<table style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0">';
for(var i=1; i<MenuItems.length; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(MenuItems[i][1] == PID)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
HasItems = true;
ItemString += '<tr>';
ItemString += '<td width="'+this.ItemWidth+'" '+this.ItemAlign+' '+this.ItemHeight+' bgcolor="'+this.OutBgColor+'" style="border:'+this.OutBorder+';padding:'+this.Padding+';white-space:nowrap;" title="'+MenuItems[i][5]+'"';
ItemString += ' οnmοuseοver="this.bgColor=''+this.OverBgColor+'';this.style.border=''+this.OverBorder+'';'+this.Name+'_'+MenuItems[i][0]+'.style.display='inline';" οnmοuseοut="this.bgColor=''+this.OutBgColor+'';this.style.border=''+this.OutBorder+'';'+this.Name+'_'+MenuItems[i][0]+'.style.display='none';">';
ItemString += '<div style="display:inline;width:'+(this.ItemWidth-20)+'px;"> '+this.ItemIcon+' <a href="'+MenuItems[i][3]+'" target="'+MenuItems[i][4]+'" '+this.ItemAnchor+'>'+MenuItems[i][2]+'</a> </div>';
ItemString += '<div id="'+this.Name+'_'+MenuItems[i][0]+'_HI" align="right" style="display:none;width:20px;"><span style="font-family:Webdings">4</span></div>';
ItemString += '<td width="0" align="left" valign="top" οnmοuseοver="'+this.Name+'_'+MenuItems[i][0]+'.style.display='inline';" οnmοuseοut="'+this.Name+'_'+MenuItems[i][0]+'.style.display='none';">';
ItemString += '<div id="'+this.Name+'_'+MenuItems[i][0]+'" style="position:absolute;display:none;">';
ItemString += this.getItems(MenuItems[i][0]);
ItemString += '</div>';
ItemString += '</td>';
ItemString += '</td>';
ItemString += '</tr>';
ItemString += '<tr>';
ItemString += '<td bgcolor="#FFFFFF" style="line-height:'+this.Spacing+'px;"> </td>';
ItemString += '</tr>';
}
}
ItemString += '</table>';
if(HasItems)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
ItemString += '<script language="javascript" type="text/javascript">';
ItemString += 'document.getElementById("'+this.Name+'_'+PID+'_HI").style.display = "inline";';
ItemString += '</script>';
return ItemString;
}
else
return ' ';
};
this.Show = function()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(HasItems)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this.Load();
document.write('<table style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0">');
this.getMain(0);
for(var i=1; i<MenuItems.length; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(MenuItems[i][1] == 0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(this.Direction == 1)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
document.write('<tr>');
document.write('<td bgcolor="#FFFFFF" style="line-height:'+this.Spacing+'px;"> </td>');
document.write('</tr>');
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
document.write('<td bgcolor="#FFFFFF" width="'+this.Spacing+'"><spacer/></td>');
}
this.getMain(i);
}
}
document.write('</table>');
}
};
this.toString = function()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
return '[class JsMenu]';
};
}
要用到的代码
JS文件.放在目录CSS下.其他地方的话请自己更改
源码:
<
!DOCTYPE HTML
PUBLIC
"
-//W3C//DTD HTML 4.0 Transitional//EN
"
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
HTML
><
HEAD
><
TITLE
></
TITLE
>
<
META http
-
equiv
=
Content
-
Type content
=
"
text/html; charset=utf-8
"
>
<
META content
=
"
MSHTML 6.00.2900.2873
"
name
=
GENERATOR
></
HEAD
>
<
BODY leftMargin
=
0
topMargin
=
0
>
<
META http
-
equiv
=
Pragma content
=
no
-
cache
><
LINK
href
=
"
css/common.css
"
type
=
text
/
css rel
=
STYLESHEET
>
<
!
--
#include file
=
"
inc/Conn.asp
"
-->
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
div
>
侧拉菜单,同时可以改为下拉菜单
</
div
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
TABLE cellSpacing
=
0
cellPadding
=
0
width
=
"
100%
"
border
=
0
bgcolor
=
"
#FFFFFF
"
>
<
TBODY
>
<
TR
>
<
TD align
=
middle
>
<
DIV align
=
center
>
<
SCRIPT language
=
JavaScript
src
=
"
css/JsMenu.js
"
></
SCRIPT
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
SCRIPT language
=
JavaScript
>
var JM
=
new
JsMenu();
JM.Direction
=
1
;
//
主菜单排列方向:0代表横向,1代表竖向
JM.MainWidth
=
160
;
//
主菜单各项宽度
JM.MainHeight
=
28
;
//
主菜单各项高度
JM.ItemWidth
=
null
;
//
子菜单宽度
JM.ItemHeight
=
28
;
//
子菜单高度
JM.MainIcon
=
'
css/icon.gif'; //主菜单图标
JM.MainAlign
=
'
left'; //主菜单对齐方式
JM.ItemIcon
=
'
css/b01.gif'; //子菜单图标
JM.ItemAlign
=
'
left'; //子菜单对齐方式
JM.MainAnchor
=
null
;
//
主菜单链接样式
JM.ItemAnchor
=
null
;
//
子菜单链接样式
JM.Spacing
=
1
;
//
菜单之间间隔
JM.Padding
=
4
;
//
菜单各项填充
JM.OutBgColor
=
'
'; //默认时的背景颜色
JM.OverBgColor
=
'
#D1DBE7'; //激活时的背景颜色
JM.OutBorder
=
'
0px solid #ffffff'; //默认时的边框样式
JM.OverBorder
=
'
1px solid #C0E0FF'; //激活时的边框样式
//
加载数据项(分类ID,所属父ID,分类名,链接地址,打开链接的方式,显示Title);
i
=
0
;
m
=
0
;
n
=
0
;
var name
=
""
;
var parName
=
""
;
var temp
=
""
;
var temp2
=
new
Array
();
var temp3
=
new
Array
();
var link
=
"
product.asp?bigclassname=
"
;
</
SCRIPT
>
<
%
set
rsBigClass1
=
server.CreateObject(
"
adodb.recordset
"
)
rsBigClass1.open
"
Select * From BigClass
"
,conn,
1
,
1
do
while
not
rsBigClass1.eof%
>
<
SCRIPT language
=
JavaScript
>
i
++
;
name
=
"
level
"
;
name
=
name
+
i;
var menuName
=
""
;
var nameExhibit
=
"
<%=rsBigClass1(
"
bigclassname
"
)%>
"
;
menuName
=
"
<%=rsBigClass1(
"
bigclassname
"
)%>
"
;
JM.Add(name,
'
',menuName,link+"<%=rsBigClass1("bigclassname")%>",'_self',nameExhibit);
</
SCRIPT
>
<
!
--
子菜单
-->
<
SCRIPT language
=
JavaScript
>
var j
=
0
;
parName
=
name;
temp
=
parName;
</
SCRIPT
>
<
%
set
rsSmallClass1
=
server.CreateObject(
"
adodb.recordset
"
)
rsSmallClass1.open
"
Select * From SmallClass Where BigClassName='
"
&
rsBigClass1(
"
BigClassName
"
)
&
"
'
"
,conn,
1
,
1
if
not
(rsSmallClass1.bof
and
rsSmallClass1.eof)
then
do
while
not
rsSmallClass1.eof
%
>
<
SCRIPT language
=
JavaScript
>
j
++
;
name
=
"
level
"
+
i
+
"
_
"
+
j;
</
SCRIPT
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
SCRIPT language
=
JavaScript
>
var subMenuName
=
""
;
var nameExhibit
=
"
<%=rssmallclass1(
"
smallclassname
"
)%>
"
;
subMenuName
=
"
<%=rssmallclass1(
"
smallclassname
"
)%>
"
;
JM.Add(name,parName,subMenuName,link
+
"
<%=rsBigClass1(
"
bigclassname
"
)%>&smallclassname=<%=rssmallclass1(
"
smallclassname
"
)%>
"
,
'
_self',nameExhibit);
</
SCRIPT
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
SCRIPT language
=
JavaScript
>
parName
=
temp;
</
SCRIPT
>
<
%
rsSmallClass1.movenext
loop
end
if
rsSmallClass1.close
set
rsSmallClass1
=
nothing
%
>
<
!
--
子菜单完成
-->
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
% rsBigClass1.movenext
loop
rsbigclass1.close
set
rsbigclass1
=
nothing
%
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<
SCRIPT language
=
JavaScript
>
JM.Show();
//
显示菜单
</
SCRIPT
>
</
DIV
></
TD
></
TR
></
TBODY
></
TABLE
>