打印

Div+CSS+JS树型菜单，可刷新

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 880 天

1^# 大中小发表于 2005-12-24 10:20

工作需要搞了一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习

在线演示：http://www.livepo.com/UserCode/DivCssMenu.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Div+CSS+JS树型菜单，可刷新</title>
<meta name="description" content="http://www.livepo.com">
<style type="text/css">

#PARENT{
	width:300px;
	padding-left:20px;
}
</style>
</head>
<body>
<div id="PARENT">
<ul id="nav">
<li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的网站</a>
	<ul id="ChildMenu1" class="collapsed">
	<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
	<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
	<li><a href="http://www.netany.net" target="_blank">[url]www.netany.net[/url]</a></li>
	</ul>
</li>
<li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帐务</a>
	<ul id="ChildMenu2" class="collapsed">
	<a href="http://www.netany.net" target="_blank">支付</a></li>
	<li><a href="#">网上支付</a></li>
	<li><a href="#">登记汇款</a></li>
	<li><a href="#">在线招领</a></li>
	<li><a href="#">历史帐务</a></li>
	</ul>
</li>
<li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">网站管理</a>
	<ul id="ChildMenu3" class="collapsed">
	<li><a href="#">登录</a></li>
	<a href="http://www.netany.net" target="_blank">管理</a></li>
	<li><a href="#">管理</a></li>
	<li><a href="#">管理</a></li>
	</ul>
</li>
<li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">网站管理</a>
	<ul id="ChildMenu4" class="collapsed">
	<li><a href="#">登录</a></li>
	<a href="http://www.netany.net" target="_blank">管理</a></li>
	<li><a href="#">管理</a></li>
	<li><a href="#">管理</a></li>
	</ul>
</li>
</ul>
</div>
<div style="width:300;padding-left:30px;">
</br></br>
工作需要搞了一个菜单，分享给大家，大家一齐学习
</br></br>
<p>请大家支持:<a href="http://www.netany.net" target="_blank">[url]http://www.netany.net[/url]</a></p>
</div>
</body>
</html>
<script type=text/javascript></script>

提示：您可以先修改部分代码再运行

-----------------
稍微修改了一下显示，这样方便大家测试

[ 本帖最后由 NETAny 于 2006-7-22 09:35 编辑 ]

本帖最近评分记录

经典论坛大妈威望 +2 历史打分 2005-12-24 10:20

http://www.LIVEPO.com

TOP

西部数码VPS主机1G内存仅266元

挑战者liu

高级会员

帖子: 779
体力: 768
威望: 0
当前: 江苏盐城

专长 SEO

2^# 大中小发表于 2005-12-24 10:26

很好
支持,特别是刷新保持

我

TOP

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

qiaodi

初级会员

帖子: 22
体力: 73
威望: 0
离线: 1259 天

3^# 大中小发表于 2005-12-24 23:58

点一下再点一下再点一下.....不出来了...

TOP

认证您的手机，获得手机认证图标

，更多手机认证的好处

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 880 天

4^# 大中小发表于 2005-12-26 13:40

不好意思，有个小Bug，，已经修正

http://www.LIVEPO.com

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8272
体力: 19495
威望: 177
当前: 福建厦门
离线: 34 天

专长 JS,JAVA,Oracle

5^# 大中小发表于 2005-12-26 13:50

你的代码似乎存在效率问题，点击主菜单时明显cpu占用提高，机器速度变慢（赛扬800,256 SD），先看看能否消除这个影响噢～

初步判断是那几个菜单效果造成的影响，可以考虑使用a本身的css样式来实现嘛～

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

goos

锅巴三月三

版主

认证
帖子: 1057
体力: 1560
威望: 9
当前: 北京朝阳区
离线: 1 天

专长 前端制作,产品设计,策划

6^# 大中小发表于 2005-12-26 14:05

從論壇裏搞的，稍微修改了下，呵呵也可以叫原創了！

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>常用后台菜单</title>
<style type="text/css">
body {font-size: 12px;}
*{margin:0;padding:0;}
#left {width: 160px; background: #fff; border:solid 1px #ccc;color: #f06;}
#shut {position: absolute;top: 2px;left:144px;}
#nav div{cursor: pointer; background:#f7f7f7;border-bottom: dashed 1px #ccc; padding:5px 5px 5px 10px; display:block}
#nav ul{list-style: inside circle; display: none;font: 12px/130% Tahoma; margin-left:2em;}
#nav li{padding:2px; margin-bottom:3px; border-bottom:solid 1px #eee;}
#nav li a{ color:#f20; text-decoration:none;} 
</style>
</head>
<body>
<img id="shut" src="" width="10" height="10" title="关闭菜单导航" />
<div id="left">
<div id="nav">
	<div>系统信息公告
		<ul>
		<li><a href="">公告列表</a></li>
		<li><a href="">发布留言</a></li>
		<li><a href="">查看留言</a></li>
		</ul>
	</div>
	
	<div>用户管理
		<ul>
		<li><a href="">添加用户</a></li>
		<li><a href="">更改密码</a></li>
		</ul>
	</div>
	
</div>
</div>
<script type="text/javascript">
var left = document.getElementById("left");
var shut = document.getElementById("shut");
function shut_open() {
	left.style.display = (left.style.display == "none")?"":"none";
	shut.style.left = (shut.style.left == "2px")?"144px":"2px";
	shut.src = (shut.src == "img/open.gif")?"img/shut.gif":"img/open.gif";
	shut.title = (shut.title == "打开菜单导航")?"关闭菜单导航":"打开菜单导航";
}
shut.onclick = shut_open;
var cao=document.getElementById("nav");
var ddii = cao.childNodes;
ul=new Array;
di=new Array;
for(var i=0;i<ddii.length;i++){
ddii[i].cao=i; 
cao.childNodes[i].childNodes[1].onclick=function nono(){window.event.cancelBubble = true;}
ddii[i].onclick=function shut_open1(){var i=this.cao;cao.childNodes[i].childNodes[1].style.display = (cao.childNodes[i].childNodes[1].style.display == "block")?"":"block";}       
}
</script>
</body>
</html>

提示：您可以先修改部分代码再运行

9 Month Leda Photo

TOP

goos

锅巴三月三

版主

认证
帖子: 1057
体力: 1560
威望: 9
当前: 北京朝阳区
离线: 1 天

专长 前端制作,产品设计,策划

7^# 大中小发表于 2005-12-26 14:06

但是不支持刷新

9 Month Leda Photo

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 880 天

8^# 大中小发表于 2005-12-26 14:10

Sheneyan
　　谢谢你的意见，，我会再看看

http://www.LIVEPO.com

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 880 天

9^# 大中小发表于 2005-12-26 14:11

goos

你的代码很少，，不过好象不支持Firefox

http://www.LIVEPO.com

TOP

goos

锅巴三月三

版主

认证
帖子: 1057
体力: 1560
威望: 9
当前: 北京朝阳区
离线: 1 天

专长 前端制作,产品设计,策划

10^# 大中小发表于 2005-12-26 14:16

這下臭大了。。。。

9 Month Leda Photo

TOP

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8272
体力: 19495
威望: 177
当前: 福建厦门
离线: 34 天

专长 JS,JAVA,Oracle

11^# 大中小发表于 2005-12-26 14:24

hehe,goos，你的代码中不支持ff是小事，我对你文档的结构比较不喜欢

文档的结构我更喜欢NETAny的，他的代码更符合语义，单单看结构就能知道内容之间的关系，你的代码中滥用了div，这不是很好噢

也许是我太苛求，不过我还是希望尽最大努力，让自己的代码中不要出现与标签本意不符的内容，大家一起加油咯～

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

newlethe

好帅的爸爸

高级会员

帖子: 356
体力: 774
威望: 2
当前: 湖北武汉

专长 ASP,网站运营,推广

12^# 大中小发表于 2005-12-26 14:32

感谢。。。。。。。

我的淘宝

TOP

goos

锅巴三月三

版主

认证
帖子: 1057
体力: 1560
威望: 9
当前: 北京朝阳区
离线: 1 天

专长 前端制作,产品设计,策划

13^# 大中小发表于 2005-12-26 14:37

Sheneyan在上个帖子中说

引用:

hehe,goos，...你的代码中滥用了div，这不是很好噢...

这个在调整的过程中，由于是xhtml的问题，才加了一个div
如果没有这个，布局好烂！

对于LZ的帖子，收藏了！

9 Month Leda Photo

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 880 天

14^# 大中小发表于 2005-12-26 15:03

都是高手，，互相学习

http://www.LIVEPO.com

TOP

goos

锅巴三月三

版主

认证
帖子: 1057
体力: 1560
威望: 9
当前: 北京朝阳区
离线: 1 天

专长 前端制作,产品设计,策划

15^# 大中小发表于 2005-12-26 15:32

NETAny 你网站的新闻系统不错，可否给我发一个源码呢？

谢谢了~！

52go52go@gmail.com

9 Month Leda Photo

TOP

flashlizi

银牌会员

帖子: 520
体力: 1264
威望: 130
当前: 上海浦东
离线: 1 天

专长 网页设计,JS,AS

16^# 大中小发表于 2005-12-26 16:14

呵呵，有个bug：在FF下，当你点击1个菜单显示子菜单，再点击关闭子菜单，当你再次点击同一个菜单的时候，菜单就没有反应了。点击其他菜单就没问题。
没仔细看代码，估计是哪里的js出了点问题

RIAidea.com

TOP

flashlizi

银牌会员

帖子: 520
体力: 1264
威望: 130
当前: 上海浦东
离线: 1 天

专长 网页设计,JS,AS

17^# 大中小发表于 2005-12-26 16:15

IE下同样有这个问题。。。。

RIAidea.com

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 880 天

18^# 大中小发表于 2005-12-27 10:37

真是不好意思，只记得更改在线显示的那一个，贴在这里的代码忘记改了
已经改过来了

http://www.LIVEPO.com

TOP

wenming

微笑的海豚

荣誉管理团队

认证
帖子: 2382
体力: 6078
威望: 39
当前: 北京海淀区
离线: 4 天

专长 JS,PHP,MySQL

19^# 大中小发表于 2005-12-27 11:28

偶写了一个用cookie记忆D，不过有图片，放上来没图片会不好看D。

珍视拥有的、遗忘失去的。

TOP

netdoctor

新手上路

帖子: 8
体力: 28
威望: 0
离线: 1283 天

20^# 大中小发表于 2005-12-27 18:43

楼上的 DAXIA
能不能把背景换成卡通的图片
请教了
在自己的网站上加载

TOP

netdoctor

新手上路

帖子: 8
体力: 28
威望: 0
离线: 1283 天

21^# 大中小发表于 2005-12-27 19:20

这个树型菜单的代码简单一点。

提示：您可以先修改部分代码再运行

TOP

netdoctor

新手上路

帖子: 8
体力: 28
威望: 0
离线: 1283 天

22^# 大中小发表于 2005-12-27 19:32

谁来给改改
不要笑哦笑到跌交我可不负责
真的看不懂了
才来请教的

TOP

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8272
体力: 19495
威望: 177
当前: 福建厦门
离线: 34 天

专长 JS,JAVA,Oracle

23^# 大中小发表于 2005-12-27 20:30

to NETAny:

嘿嘿，刚才在ff底下测试你的代码，发现你一处小问题～

Nav写成了nav，你的demo没问题，看来是笔误咯

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8272
体力: 19495
威望: 177
当前: 福建厦门
离线: 34 天

专长 JS,JAVA,Oracle

24^# 大中小发表于 2005-12-27 20:32

to netdoctor:

...你的代码似乎括号配对有问题。。。家里没趁手的编辑工具，要找缺的括号好麻烦。。自己找找哈

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

wenming

微笑的海豚

荣誉管理团队

认证
帖子: 2382
体力: 6078
威望: 39
当前: 北京海淀区
离线: 4 天

专长 JS,PHP,MySQL

25^# 大中小发表于 2005-12-28 00:48

这帖子这么热，，没图片我也来放一个。我是做了四张背景图，一张替换li圆点的图。
测试过，FF OPERA IE 都好像蛮正常的。

<!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">
<head>
<title>New Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Generator" content="Dolphin EditPlus 2.12" />
<meta name="Author" content="微笑的海豚,Dolphin" />
<meta name="Keywords" content="Javascript,Java,XML,XSLT,ASP,VBScript,ASP .net,C#,C++,Database,微笑的海豚" />
<meta name="Description" content="微笑的海豚" />
<style type="text/css" media="all">
/*  @import url(""); */
#MyAAAControl #LeftMenu{
  width:155px;
}
#MyAAAControl #LeftMenu div.PMenu{
  width:155px;
  font-size:14px;
  line-height:23px;
  margin:0 0 8px 0;
  position:relative;
}
#MyAAAControl #LeftMenu div.PMenu h2{
  margin:0;
  font-size:14px;
  font-weight:bold;
  padding:3px 0 0 20px;
  cursor:pointer;
  color:#FFF;
  height:27px;
  background-color:#FFF;
  background-image:url("http://wenming.vicp.net:8989/meimg/my3a_up.gif");
  background-repeat:no-repeat;
}
#MyAAAControl #LeftMenu div.PMenu h2.down{
  background-image:url("http://wenming.vicp.net:8989/meimg/my3a_down.gif");
}
#MyAAAControl #LeftMenu div.PMenu h2.over_up{
  background-image:url("http://wenming.vicp.net:8989/meimg/my3a_over_up.gif");
}
#MyAAAControl #LeftMenu div.PMenu h2.over_down{
  background-image:url("http://wenming.vicp.net:8989/meimg/my3a_over_down.gif");
}
#MyAAAControl #LeftMenu div.PMenu div.MenuItem{
  position:static;
  display:block;
  border:1px solid #F0E5B3;
  background-color:#FEF9E1;
  width:147px;
  margin:-3px 0 0 3px;
}
#MyAAAControl #LeftMenu div.PMenu div.MenuItem ul{
  margin-top:14px;
}
#MyAAAControl #LeftMenu div.PMenu div.MenuItem ul{
  list-style: url("http://wenming.vicp.net:8989/meimg/my3a_menu_pre.gif") outside circle;
}
</style>
<script language="javascript" type="text/javascript">
Array.prototype.in_array = function(e)
{
for(iarr=0;iarr<this.length && this[iarr]!=e;iarr++);
return !(iarr==this.length);
}
// SetCookie ,record a value to cookie
function SetCookie(name,value,days)
{
	var expires = "";
	if (days)
	{
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	document.cookie = name + "=" + value + expires;
		
}
function GetCookie(sName)
{
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0]) 
      return unescape(aCrumb[1]);
  }
  return null;
}
function doClickCookie(hid,op)
{
	if (op)
	{
		tmpval += ","+hid;	
	}
	else
	{
		tmpval = tmpval.replace(","+hid,"");	
	}
	SetCookie("pmenu",tmpval,1);
}
MenuClick = function(evnt) {
	obj = (document.all)?event.srcElement:evnt.target;
	if (obj.nodeName=="H2"){
		var NextNode = obj.nextSibling;
		while (NextNode.nodeType==3)
			NextNode=NextNode.nextSibling;
		if(NextNode.style.display=="none")
		{NextNode.style.display = "block";obj.className = "over_up";doClickCookie(obj.id,true);}else{NextNode.style.display = "none";obj.className = "over_down";doClickCookie(obj.id,false);}
	}
}
MenuOver = function(evnt) { 
	obj = (document.all)?event.srcElement:evnt.target;
	if (obj.nodeName=="H2"){
		obj.className =(obj.className=="")?"over_up":"over_down";
	}
}
MenuOut = function(evnt) {
	obj = (document.all)?event.srcElement:evnt.target;
	if (obj.nodeName=="H2"){
		obj.className =(obj.className=="over_up" || obj.className=="")?"":"down";
	}
}
MenuInitailize = function(){
var img1 = img2 = new Image(); //预载图片，可避免鼠标移入时发生闪烁。
img1.src = "http://wenming.vicp.net:8989/meimg/my3a_over_down.gif"; 
img2.src = "http://wenming.vicp.net:8989/meimg/my3a_over_up.gif";
if (document.all || document.getElementById) {
	var navNode = document.getElementById("LeftMenu").childNodes;
	var extend = GetCookie("pmenu");
	extend = (extend)?eval("new Array("+extend+")"):new Array(0,1); //初始化打开的菜单项目
	//alert(extend);
	var c=0;
	for(i=0;i<navNode.length;i++)
	{
		var subNode = navNode[i].childNodes;
		for(j=0;j<subNode.length;j++)
		{
			if (subNode[j].nodeName=="H2")
			{
				subNode[j].id = c;
				subNode[j].onclick		= MenuClick;
				subNode[j].onmouseover	= MenuOver;
				subNode[j].onmouseout	= MenuOut;
				if (extend.in_array(c++)) continue;
				subNode[j].className="down";
				var NextNode = subNode[j].nextSibling;
				while (NextNode.nodeType==3)
					NextNode=NextNode.nextSibling;
				NextNode.style.display = (NextNode.style.display=="none")?"block":"none";
			}
		}
	}
}}
window.onload=MenuInitailize;
var tmpval = GetCookie("pmenu");
tmpval = (tmpval)?tmpval:"100";
</script>
</head>
<body id="MyAAAControl">
<div id="LeftMenu">
<div class="PMenu">
  <h2>我是买家</h2>
  <div class="MenuItem">
    <ul>
      <li class="ReNameFolder"><a href="#">已买到的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">竞拍中的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">竞拍结束的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">卖家回复/留言</a></li>
      <li class="ReNameFolder"><a href="#">求购宝贝</a></li>
      <li class="ReNameFolder"><a href="#">我的收藏</a></li>
      <li class="ReNameFolder"><a href="#">重命名这个文件</a></li>
    </ul>
  </div>
</div>
<div class="PMenu">
  <h2>我是卖家</h2>
  <div class="MenuItem">
    <ul>
      <li class="ReNameFolder"><a href="#">我要卖</a></li>
      <li class="ReNameFolder"><a href="#">已卖出的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">出售中的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">仓库里的宝贝</a></li>
      <li class="ReNameFolder"><a href="#">买家留言/回复</a></li>
      <li class="ReNameFolder"><a href="#">免费开店</a></li>
      <li class="ReNameFolder"><a href="#">我要进货</a></li>
    </ul>
  </div>
</div>
<div class="PMenu">
  <h2>3A银行</h2>
  <div class="MenuItem">
    <ul>
      <li class="ReNameFolder"><a href="#">管理账户</a></li>
      <li class="ReNameFolder"><a href="#">交易管理</a></li>
      <li class="ReNameFolder"><a href="#">退款管理</a></li>
    </ul>
  </div>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

本帖最近评分记录

经典论坛大妈威望 +1 历史打分 2005-12-28 00:48

珍视拥有的、遗忘失去的。

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 880 天

26^# 大中小发表于 2005-12-28 13:26

to:neyan

确实写错了，，呵

楼上厉害啊

http://www.LIVEPO.com

TOP

zozo98

中级会员

帖子: 115
体力: 426
威望: 1
离线: 656 天

27^# 大中小发表于 2005-12-28 14:21

也贴一个，嘿嘿！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
body {  }
body.menu  { background:#383757; margin:0px; font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt; }
table.menu  { border:0px; font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt; }
td.menu  { font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt; }
img.menu  { vertical-align:bottom; border:0px; }
a.menu  { font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt; color:#215DC6; text-decoration:none; }
a:hover.menu  { font-size:8pt;color:#428EFF;font-family:"Arial", "Helvetica", "sans-serif";  }
.sec_menu  { border-left:1px solid gray; border-right:1px solid gray; border-bottom:1px solid gray; overflow:hidden; background:#f8f8f8; }
.menu_title  {font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt }
.menu_title span  { position:relative; top:2px; left:8px; color:#494949; font-weight:bold;font-family:"Arial", "Helvetica", "sans-serif"; font-size:8pt}
.menu_title2  {font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt }
.menu_title2 span  { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; cursor:hand;font-family:"Arial", "Helvetica", "sans-serif";  font-size:8pt}
a:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
}
a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
}
a:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #CCCCCC;
	text-decoration: none;
}
</style>

<SCRIPT LANGUAGE="Javascript" DEFER="TRUE"> 

</SCRIPT>

<title>XP Style Menu</title>
</head>
<body bgcolor="#598AD7">
<div id="Layer1" style="position:absolute; left:13px; top:37px; z-index:1">
  <table border="0" cellspacing="0" cellpadding="0">
    <tr style="cursor:hand;">
      <td width="166" height="28" ID=menuTitle1 Class=menu_title background="http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif"><span> 　.:: Menu 01 </span></td>
    </tr>
    <tr>
      <td width="166"><div id="menu1" class="sec_menu">
        <table width="164" border="0" cellpadding="0" cellspacing="10">
          <tr>
            <td><div align="center"><a href="#1">Item 01</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 02</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 03</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 04</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 05</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 06</a></div></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr style="cursor:hand;">
      <td width="166" height="28" ID=menuTitle2 Class=menu_title background="http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif"><span> 　.:: Menu 02 </span></td>
    </tr>
    <tr>
      <td width="166"><div id="menu2" class="sec_menu">
        <table width="164" border="0" cellpadding="0" cellspacing="10">
          <tr>
            <td><div align="center"><a href="#1">Item 01</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 02</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 03</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 04</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 05</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 06</a></div></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
  <table border="0" cellspacing="0" cellpadding="0">
    <tr style="cursor:hand;">
      <td width="166" height="28" ID=menuTitle3 Class=menu_title background="http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif"><span> 　.:: Menu 03 </span></td>
    </tr>
    <tr>
      <td width="166"><div id="menu3" class="sec_menu">
        <table width="164" border="0" cellpadding="0" cellspacing="10">
          <tr>
            <td><div align="center"><a href="#1">Item 01</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 02</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 03</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 04</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 05</a></div></td>
          </tr>
          <tr>
            <td><div align="center"><a href="#1">Item 06</a></div></td>
          </tr>
        </table>
      </div></td>
    </tr>
  </table>
</div>
XP菜单特效
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8272
体力: 19495
威望: 177
当前: 福建厦门
离线: 34 天

专长 JS,JAVA,Oracle

28^# 大中小发表于 2005-12-28 22:15

to wenming：cookie读取在ff底下失效~

to zozo98：你的代码在ff下无效

顺手也写了个简单的菜单，只测了ie，ff，而且css不确定在其他浏览器下会不会很恶心
....现在的css就很难看....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="Sheneyan" />
<script type="text/javascript">
function initMenu(on){
  var obj=document.getElementById(on);
  if (!obj)return;
  for (var i=0,c;c=obj.childNodes[i];i++){
    if (c.nodeType==3)continue;
    var a=c.getElementsByTagName("a");
    if (!a||a.length==0)continue;
    a[0].onmouseup=function(){
      var u=this.parentNode.getElementsByTagName("ul");
      if (!u||u.length==0)return;
      with (u[0].style){
        display=(display=='none'?'block':'none');
      }
    }
  }
}
</script>
<style type="text/css">
#menu a{text-decoration:none;background:yellow;text-align:center;display:block;width:100px;}
#menu a:hover{background:blue;color:white;}
#menu ul a:hover{background:gray;color:white;}
#menu ul a{background:transparent;}
#menu,#menu ul {list-style:none;margin:0;padding:0;}
</style>
</head>
<body onload="initMenu('menu')">
<ul id="menu">
  <li>
    <a href="###">abc</a>
    <ul>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
    </ul>
  </li>
  <li>
    <a href="###">abc</a>
    <ul>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
    </ul>
  </li>
  <li>
    <a href="###">abc</a>
    <ul>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
      <li><a href="###">123</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

提示：您可以先修改部分代码再运行

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

NETAny [楼主]

中级会员

帖子: 106
体力: 329
威望: 2
离线: 880 天

29^# 大中小发表于 2005-12-28 23:31

都OK啊

http://www.LIVEPO.com

TOP

wenming

微笑的海豚

荣誉管理团队

认证
帖子: 2382
体力: 6078
威望: 39
当前: 北京海淀区
离线: 4 天

专长 JS,PHP,MySQL

30^# 大中小发表于 2005-12-28 23:55

To Sheneyan：
偶那个代码在本地或者我们内部的网站上面在FF上面Cookie也是可以的哦。怎么在经典这里就不行呢。还真是不懂了。：）

珍视拥有的、遗忘失去的。

TOP