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

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
...全文
156 5 点赞 打赏 收藏 举报
写回复
5 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
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">
<!--

*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}


.szhmenu {
line-height:24px;list-style-type:none;background:#606060;
}

.szhmenu a {
display: block; width: 80px; text-align:center;
}

.szhmenu a:link {
color:#204040; text-decoration:none;
}
.szhmenu a:visited {
color:#204040;text-decoration:none;
}
.szhmenu a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}

.szhmenu li {
float: left; width: 80px; background:#b0b0b0;
}
.szhmenu li a:hover{
background:#808080;
}
.szhmenu li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 100px; position: absolute;
}
.szhmenu li ul li{
float: left; width: 100px;
background: #CCC;
}


.szhmenu li ul a{
display: block; width: 76px;text-align:left;padding-left:24px;
}

.szhmenu li ul a:link {
color:#666; text-decoration:none;
}
.szhmenu li ul a:visited {
color:#666;text-decoration:none;
}
.szhmenu li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#808080;
}

.szhmenu li:hover ul {
left: auto;
}
.szhmenu li.sfhover ul {
left: auto;
}

-->
</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> <!--在你想出现菜单的对象中加入红色字体的部分 ,'menuSimple'所指的是你将展开哪一个菜单,看看下面对应的 <div id="menuSimple".........> 10,120代表菜单出现的位置x,y-->
<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; }


  • 打赏
  • 举报
回复
dh20156 2006-04-16
参考:
http://blog.csdn.net/dh20156/archive/2005/12/13/551620.aspx
  • 打赏
  • 举报
回复
mingxuan3000 2006-04-16
网上很多的
  • 打赏
  • 举报
回复
singlepine 2006-04-16
http://singlepine.cnblogs.com/articles/259955.html
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2006-04-16 07:15
社区公告
暂无公告