求一个菜单，有的是分呀，只要好使

yigebendan 2006-04-16 07:15:07

菜单形式如下：
[menu1] [menu2] [menu3] ……
[menu1_Item1]
[menu1_Item2]->[menu1_Item2_Item1]
[menu1_Item3] [menu1_Item2_Item2]
[menu1_Item4] [menu1_Item2_Item3]
[menu1_Item5] [menu1_Item2_Item4]
[menu1_Item6] ……
……
menu1 是横向的几个列表，开始就显示出来的，鼠标放在 [menu1] 上显示[menu1_Item1]，[menu1_Item2]……这个菜单列表，鼠标移动到[menu1_Item2]上，弹出[menu1_Item2_Item1]，[menu1_Item2_Item2]……这个菜单列表。
本人很菜，哪个高手解决了，或者有现成的代码，请立刻和我联系，急用，分另开贴给，我有3000多分。
QQ：24327475
EMAIL： ilovevc@126.com
msn: wl_qd@hotmail.com

...全文

174 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

yyszh 2006-04-17

打赏
举报

就一个文件，你自己拆分。
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>

<style type="text/css">

</style>
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script type=text/javascript>
function getitem(item){
var s,s1;
s=item[1].replace(/"/g,"'").split(':',2);
if(item[2]!=1)s1='<a>';
else if(s[0]=='js')s1='<a href="javascript:'+s[1]+'">';
else s1='<a href="'+s[1]+'" target="'+s[0]+'">';
if(item[0]=='--')s1='<hr />';
else s1+=item[0]+'</a>';
return s1;
}
function createmenu(o,a) {
var i,j,str='';
for(i=0;i<a.length;++i){
str+='<li>'+getitem(a[i][0]);
if(a[i].length>1){
str+='<ul>';
for(j=1;j<a[i].length;++j){
str+='<li>'+getitem(a[i][j])+'</li>';
}
str+='</ul>';
}
str+='</li>';
}
o.innerHTML=str;
var sfEls = o.getElementsByTagName("li");
for(i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
$('cls').innerHTML+=(this.className);
}
}
}

function init(){
createmenu($('nu'),
[ [ ['系统设置','js:alert("尚未完成")',1],
['用户管理','js:alert("")',1],
['权限管理','js:alert("")',1],
['--','js:alert("")',1],
['参数设置','js:alert("")',1]],
[ ['基础资料','js:alert("尚未完成")',1],
['部门设置','js:gp("main","op=manclass&cid=8")',1],
['职称设置','js:gp("main","op=manclass&cid=1")',1],
['学历设置','js:gp("main","op=manclass&cid=2")',1],
['政治面貌','js:gp("main","op=manclass&cid=3")',1],
['岗位名称','js:gp("main","op=manclass&cid=4")',1],
['员工状态','js:gp("main","op=manclass&cid=5")',1],
['民族设置','js:gp("main","op=manclass&cid=6")',1],
['户粮关系','js:gp("main","op=manclass&cid=7")',1]],
[ ['人事管理','js:alert("尚未完成")',1]],
[ ['查询报表','js:alert("尚未完成")',1]],
[ ['|','0','0',1]],
[ ['帮　　助','js:alert("尚未完成")',1],
['帮助主题','_BLANK:help.php',1],
['关于','js:alert("版权所有-XXX")',1]],
[ ['注　　销','_self:logout.php',1]]]);
}

</script>

</head>
<body onload="init()">
<table width="100%">
<tr>
<td>Hello</td>
<td>
kdsljflsa
sdfjlsad<br />
</td></tr><tr>
<td>hahahahahaha</td>
<td>
<ul id="nu" class="szhmenu">

</ul>
</td></tr></table>
</body>
</html>

mingxuan3000 2006-04-16

打赏
举报

1.将下面的代码复制到 <head> 内
<script language="JavaScript" src="include/menu.js"></script> //这里的路径　你要自己定义了，看看要不要include/
<link rel="stylesheet" type="text/css" href="include/menu.css"> //这里的路径　你要自己定义了，看看要不要include/

2.body里的内容
<href="#" onMouseOver="expandMenu(null,'menuSimple',10,120);">Simple</a> 
<div id="menuSimple" class="menu" onMouseOut="hideMe();"> //创建菜单 menuSimple
<a href="#" onMouseOver="expandMenu('menuSimple');">Menu Item 1</a><br> //菜单的栏目
<a href="#" onMouseOver="expandMenu('menuSimple');">Menu Item 2</a><br>
<a href="#" onMouseOver="expandMenu('menuSimple');">Menu Item 3</a><br>
<a href="#" onMouseOver="expandMenu('menuSimple','menuSimpleSub01');">Menu Item 4 ></a><br> 如果还有子菜单的话，要给出子菜单的名字 menuSimpleSub01
</div>

<div id="menuSimpleSub01" class="menu" onMouseOut="hideMe();"> //创建子菜单 menuSimpleSub01
<a href="#" onMouseOver="expandMenu('menuSimpleSub01');">Menu Item 1</a><br>
<a href="#" onMouseOver="expandMenu('menuSimpleSub01');">Menu Item 2</a><br>
<a href="#" onMouseOver="expandMenu('menuSimpleSub01');">Menu Item 3</a><br>
</div>

3 menu.js

/*-------------------------------------------\
| Simple Cross Browser Menu Script |
|--------------------------------------------|
| Author: Emil A. Eklund |
| First Created: May 19, 2000 |
| Last Updated: Aug 17, 2000 |
|--------------------------------------------|
| Created to work with ie4+ and ns4+ |
\-------------------------------------------*/

menuPrefix = 'menu'; // Prefix that all menu layers must start with
// All layers with this prefix will be treated
// as a part of the menu system.

var menuTree, mouseMenu, hideTimer, doHide;

function init() {
ie4 = (document.all)?true:false;
ns4 = (document.layers)?true:false;
document.onmousemove = mouseMove;
if (ns4) { document.captureEvents(Event.MOUSEMOVE); }
}

function expandMenu(menuContainer,subContainer,menuLeft,menuTop) {
// Hide all submenus thats's not below the current level
doHide = false;
if (menuContainer != menuTree) {
if (ie4) {
var menuLayers = document.all.tags("DIV");
for (i=0; i<menuLayers.length; i++) {
if ((menuLayers[i].id.indexOf(menuContainer) != -1) && (menuLayers[i].id != menuContainer)) {
hideObject(menuLayers[i].id);
}
}
}
else if (ns4) {
for (i=0; i<document.layers.length; i++) {
var menuLayer = document.layers[i];
if ((menuLayer.id.indexOf(menuContainer) != -1) && (menuLayer.id != menuContainer)) {
menuLayer.visibility = "hide";
}
}
}
}
// If this is item has a submenu, display it, or it it's a toplevel menu, open it
if (subContainer) {
if ((menuLeft) && (menuTop)) {
positionObject(subContainer,menuLeft,menuTop);
hideAll();
}
else {
if (ie4) {
positionObject(subContainer, document.all[menuContainer].offsetWidth + document.all[menuContainer].style.pixelLeft - 10, mouseY);
}
else {
positionObject(subContainer, document.layers[menuContainer].document.width + document.layers[menuContainer].left + 50, mouseY);
}
}
showObject(subContainer);
menuTree = subContainer;
}
}

function showObject(obj) {
if (ie4) { document.all[obj].style.visibility = "visible"; }
else if (ns4) { document.layers[obj].visibility = "show"; }
}

function hideObject(obj) {
if (ie4) { document.all[obj].style.visibility = "hidden"; }
else if (ns4) { document.layers[obj].visibility = "hide"; }
}

function positionObject(obj,x,y) {
if (ie4) {
var foo = document.all[obj].style;
foo.left = x;
foo.top = y;
}
else if (ns4) {
var foo = document.layers[obj];
foo.left = x;
foo.top = y;
}
}

function hideAll() {
if (ie4) {
var menuLayers = document.all.tags("DIV");
for (i=0; i<menuLayers.length; i++) {
if (menuLayers[i].id.indexOf(menuPrefix) != -1) {
hideObject(menuLayers[i].id);
}
}
}
else if (ns4) {
for (i=0; i<document.layers.length; i++) {
var menuLayer = document.layers[i];
if (menuLayer.id.indexOf(menuPrefix) != -1) {
hideObject(menuLayer.id);
}
}
}
}

function hideMe(hide) {
if (hide) {
if (doHide) { hideAll(); }
}
else {
doHide = true;
hideTimer = window.setTimeout("hideMe(true);", 2000);
}
}

function mouseMove(e) {
if (ie4) { mouseY = window.event.y; }
if (ns4) { mouseY = e.pageY; }
}

function itemHover(obj,src,text,style) {
if (ns4) {
var text = '<nobr><a href="' + src + '" class="' + style + '">' + text + '<\/a><\/nobr>'
obj.document.open();
obj.document.write(text);
obj.document.close();
}
}

onload = init;

4 menu.css

.menu { position: absolute; left: 0; top: 0;
visibility: hidden; background: #FFFFFF;
width: 150px; margin: 0px; padding: 0px;
border: 1px solid silver;
overflow: visible; }
.menu a, .menu a:visited { font-family: Tahoma; font-size: 11px;
text-decoration: none; font-weight: normal;
color: black; background: #E2E2E2;
width: 150px; padding-left: 10px; }
.menu a:hover { font-family: Tahoma; font-size: 11px;
text-decoration: none; font-weight: normal;
color: black; background: #F4F4FF;
width: 150px; padding-left: 10px; }
.menu .border { border: 1px solid #F4F4F4;
border-bottom: 1px solid #808080;
border-right: 1px solid #808080; }
.menu .text { overflow: hidden;
width: 125px; height: 15px; }
.menu .arrow { overflow: hidden;
width: 15px; height: 12px;
padding-left: 5px; padding-top: 3px; }
.menu .arrow img { width: 6px; height: 7px;
border: 0px; }