|
蓝森林 http://www.lslnet.com 2006年8月25日 8:28
 Div+CSS+JS树型菜单，可刷新
工作需要搞了一个DIV+CSS菜单，兼容Firefox,分享给大家，大家一齐学习
在线演示：http://www.livepo.com/UserCode/DivCssMenu.html
[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">
<!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
width:180px;
line-height: 24px;
list-style-type: none;
text-align:left;
/*定义整个ul菜单的行高和背景色*/
}
/*==================一级目录===================*/
#nav a {
width: 160px;
display: block;
padding-left:20px;
/*Width(一定要)，否则下面的Li会变形*/
}
#nav li {
background:#CCC; /*一级目录的背景色*/
border-bottom:#FFF 1px solid; /*下面的一条白边*/
float:left;
/*float：left,本不应该设置，但由于在Firefox不能正常显示
继承Nav的width,限制宽度，li自动向下延伸*/
}
#nav li a:hover{
background:#CC0000; /*一级目录onMouseOver显示的背景色*/
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
/*==================二级目录===================*/
#nav li ul {
list-style:none;
text-align:left;
}
#nav li ul li{
background: #EBEBEB; /*二级目录的背景色*/
}
#nav li ul a{
padding-left:20px;
width:160px;
/* padding-left二级目录中文字向右移动，但Width必须重新设置=(总宽度-padding-left)*/
}
/*下面是二级目录的链接样式*/
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#CC0000;
/* 二级onmouseover的字体颜色、背景色*/
}
/*==============================*/
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
#nav ul.collapsed {
display: none;
}
-->
#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">www.netany.net</a></li>
<li><a href="http://www.netany.net" target="_blank">www.netany.net</a></li>
<li><a href="http://www.netany.net" target="_blank">www.netany.net</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">http://www.netany.net</a></p>
</div>
</body>
</html>
<script type=text/javascript><!--
var LastLeftID = "";
function menuFix() {
var obj = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<obj.length; i++) {
obj[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
obj[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
function DoMenu(emid)
{
var obj = document.getElementById(emid);
obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
if((LastLeftID!="")&&(emid!=LastLeftID)) //关闭上一个Menu
{
document.getElementById(LastLeftID).className = "collapsed";
}
LastLeftID = emid;
}
function GetMenuID()
{
var MenuID="";
var _paramStr = new String(window.location.href);
var _sharpPos = _paramStr.indexOf("#");
if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
{
_paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
}
else
{
_paramStr = "";
}
if (_paramStr.length > 0)
{
var _paramArr = _paramStr.split("&");
if (_paramArr.length>0)
{
var _paramKeyVal = _paramArr[0].split("=");
if (_paramKeyVal.length>0)
{
MenuID = _paramKeyVal[1];
}
}
/*
if (_paramArr.length>0)
{
var _arr = new Array(_paramArr.length);
}
//取所有#后面的，菜单只需用到Menu
//for (var i = 0; i < _paramArr.length; i++)
{
var _paramKeyVal = _paramArr[i].split('=');
if (_paramKeyVal.length>0)
{
_arr[_paramKeyVal[0]] = _paramKeyVal[1];
}
}
*/
}
if(MenuID!="")
{
DoMenu(MenuID)
}
}
GetMenuID(); //*这两个function的顺序要注意一下，不然在Firefox里GetMenuID()不起效果
menuFix();
--></script>
[/html]
-----------------
稍微修改了一下显示，这样方便大家测试:)
|
很好
支持,特别是刷新保持 |
| 点一下 再点一下 再点一下.....不出来了... |
| 不好意思，有个小Bug，，已经修正 |
你的代码似乎存在效率问题，点击主菜单时明显cpu占用提高，机器速度变慢（赛扬800,256 SD），先看看能否消除这个影响噢～
初步判断是那几个菜单效果造成的影响，可以考虑使用a本身的css样式来实现嘛～ |
從論壇裏搞的，稍微修改了下，呵呵也可以叫原創了！
[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>常用后台菜单</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>
[/html] |
| 但是不支持刷新 |
Sheneyan
谢谢你的意见，，我会再看看 |
goos
你的代码很少，，不过好象不支持Firefox |
這下臭大了。。。。
|
hehe,goos，你的代码中不支持ff是小事，我对你文档的结构比较不喜欢:D
文档的结构我更喜欢NETAny的，他的代码更符合语义，单单看结构就能知道内容之间的关系，你的代码中滥用了div，这不是很好噢
也许是我太苛求，不过我还是希望尽最大努力，让自己的代码中不要出现与标签本意不符的内容，大家一起加油咯～ |
| 感谢。。。。。。。 |
Sheneyan在上个帖子中说
这个在调整的过程中，由于是xhtml的问题，才加了一个div
如果没有这个，布局好烂！
对于LZ的帖子，收藏了 ！
:D |
| 都是高手，，互相学习 |
NETAny 你网站的新闻系统不错，可否给我发一个源码呢？
谢谢了~！
[email]52go52go@gmail.com[/email]
|
呵呵，有个bug：在FF下，当你点击1个菜单显示子菜单，再点击关闭子菜单，当你再次点击同一个菜单的时候，菜单就没有反应了。点击其他菜单就没问题。
没仔细看代码，估计是哪里的js出了点问题 |
| IE下同样有这个问题。。。。 |
真是不好意思，只记得更改在线显示的那一个，贴在这里的代码忘记改了
已经改过来了 |
| 偶写了一个用cookie记忆D，不过有图片，放上来没图片会不好看D。:( |
楼上的 DAXIA
能不能把背景换成 卡通的图片
请教了
在自己的网站上加载 |
这个树型菜单的代码简单一点。
[html]
<script language="JavaScript">
NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
ver4 = (NS4 || IE4) ? 1 : 0;
if (ver4) {
with (document) {
write("<STYLE TYPE=''text/css''>");
if (NS4) {
write(".parent {position:absolute; visibility:visible}");
write(".child {position:absolute; visibility:visible}");
write(".regular {position:absolute; visibility:visible}")
}
else {
write(".child {display:none}")
}
write("</STYLE>");
}
}
function getIndex(el) {
ind = null;
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id == el) {
ind = i;
break;
}
}
return ind;
}
function arrange() {
nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
for (i=firstInd+1; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.visibility != "hide") {
whichEl.pageY = nextY;
nextY += whichEl.document.height;
}
}
}
function initIt(){
if (!ver4) return;
if (NS4) {
for (i=0; i<document.layers.length; i++) {
whichEl = document.layers[i];
if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
}
arrange();
}
else {
divColl = document.all.tags("DIV");
for (i=0; i<divColl.length; i++) {
whichEl = divColl(i);
if (whichEl.className == "child") whichEl.style.display = "none";
}
}
}
function expandIt(el) {
if (!ver4) return;
if (IE4) {
whichEl = eval(el + "Child");
if (whichEl.style.display == "none") {
whichEl.style.display = "block";
}
else {
whichEl.style.display = "none";
}
}
else {
whichEl = eval("document." + el + "Child");
if (whichEl.visibility == "hide") {
whichEl.visibility = "show";
}
else {
whichEl.visibility = "hide";
}
arrange();
}
}
onload = initIt;
</script>
</font></p>
<div id="KB1Parent" class="parent"> <a href="#" onClick="expandIt(''KB1''); return false" ><img
src="img/plus.gif" border=0>文件夹一</a></div>
<div id="KB1Child" class="child"> <a href="sample.htm" target="_blank" ><img
src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面一</a><br>
<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15"
height="11"><img src="img/open.gif" border=0>页面二</a><br>
<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15"
height="11"><img src="img/open.gif" border=0>页面三</a></div>
<div id="KB2Parent" class="parent"> <a href="#" onClick="expandIt(''KB2''); return false" ><img
src="img/plus.gif" border=0>文件夹二</a></div>
<div id="KB2Child" class="child"> <a href="sample.htm" target="_blank" ><img
src="img/spacer.gif" border=0 alt="" width="15" height="11"><img src="img/open.gif" border=0>页面一</a><br>
<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img
src="img/open.gif" border=0>页面二</a><br>
<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt="" width="15"
height="11"><img src="img/open.gif" border=0>页面三</a></div>
<div id="KB3Parent" class="parent"> <a href="#" onClick="expandIt(''KB3''); return false" ><img
src="img/plus.gif" border=0>文件夹三</a></div>
<div id="KB3Child" class="child"> <a href="sample.htm" target="_blank" ><img
src="img/spacer.gif" border=0 alt=""><img src="img/open.gif" border=0>页面一</a><br>
<a href="sample.htm" target="_blank" ><img src="img/open.gif" border=0>页面二</a><br>
<a href="sample.htm" target="_blank" ><img src="img/spacer.gif" border=0 alt=""><img
src="img/open.gif" border=0>页面三</a></div>
<script language="JavaScript">
if (NS4) {
firstEl = "KB1Parent";
firstInd = getIndex(firstEl);
arrange();
}
</script>
[/html] |
谁来给改改
不要笑哦 笑到跌交我可不负责
真的看不懂了
才来请教的
|
to NETAny:
嘿嘿，刚才在ff底下测试你的代码，发现你一处小问题～
Nav写成了nav，你的demo没问题，看来是笔误咯
|
to netdoctor:
...你的代码似乎括号配对有问题。。。家里没趁手的编辑工具，要找缺的括号好麻烦。。自己找找哈 |
这帖子这么热，，没图片我也来放一个。我是做了四张背景图，一张替换li圆点的图。
测试过，FF OPERA IE 都好像蛮正常的。
[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>
<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>
[/html] |
to:neyan
确实写错了，，呵
楼上厉害啊 |
也贴一个，嘿嘿！
[html]
<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>
<!--Start XP Style Menu-->
<SCRIPT LANGUAGE="Javascript" DEFER="TRUE">
<!--
var menuinit=new Array(50),vers;//(don't change this)
for(i=0;i<51;i++)menuinit[i]=new Array(3);//(don't change this)
var bgimages_show = "http://www.sosaw.com/UploadFile/2005-12/20051228141320118.gif";
var bgimages_hide = "http://www.sosaw.com/UploadFile/2005-12/20051228141311995.gif";
var onemenu = 0; //open one menu at same time.1 is yes, 0 is no. default=1.
var speedmout = 100; //menu show speed(1~100;default=50) *the large the fast, but also come with more bump.
var speedmin = 100; //menu hide speed(1~100;default=50)
var developversion = true; //when false block all script error if any.
//setting of which menu should be showen. In this example you have 4 menu, which you can switch between "show" and "not show"
//if you want to add extra one, you should follow this order: "menuinit[n][1]=;" (in [a][b], b must be '1', a is the serial number of menu)
menuinit[1][1]="show";
menuinit[2][1]="not show";
menuinit[3][1]="not show";
////////////////////////!!!DO NOT CHANGE BELOW THIS LINE!!!!/////////////////////////////
//
var da=new Date();
var browser=new BrowserDetectLite();
var fstrun=1;
var op="";
var whichContinue="";
var whichOpen="";
var opp=0;
var opd=0;
var opc=0;
var sc=1;sd=1;
var mnunum=0;
var cacheObj,cacheMaxh,cacheObj2;
//----------------------------------------------------------------------------------------
function menuShow(obj,maxh,obj2)
{
var da=new Date();
if(fstrun==1){
op="show";
mountmfunc(0,0,0);
obj2.background=bgimages_hide;
obj.style.pixelHeight=2;
obj.style.display='block';
opc=6.18*(speedmout*0.01); //step length
opp=Math.round(opc); //rounded step length
opd=(maxh/opp)/100; //times
sc=1;sd=opd;
fstrun=0;
cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2;
}else{
if(op!="show") return false;
}
if(obj.style.pixelHeight<maxh-opp)
{
if(opd>1){//for slow speed
if(sd-sc<1){obj.filters.alpha.opacity+=1;sd+=opd;}
sc++;
}else{//for fast speed
obj.filters.alpha.opacity+=Math.ceil(1/opd);
}
obj.style.pixelHeight+=opp;
cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2;
setTimeout('menuShow(cacheObj,cacheMaxh,cacheObj2)','5');
}else{
obj.style.pixelHeight=maxh;
obj.filters.alpha.opacity=100;
fstrun=1;
op="";
sc=1;sd=1;
mountmfunc(1,1,1);
return true;
}
}
//----------------------------------------------------------------------------------------
function menuHide(obj,maxh,obj2)
{
da=new Date();
if(fstrun==1){
op="hide";
mountmfunc(0,0,0);
obj2.background=bgimages_show;
opc=6.18*(speedmout*0.01); //step length
opp=Math.round(opc);
opd=((maxh-3)/opp)/100;
sc=1;sd=opd;
fstrun=0;
cacheObj=obj;cacheMaxh=maxh;cacheObj2=obj2;
}else{
if(op!="hide") return false;
}
if(obj.style.pixelHeight-opp>1)
{
if(opd>1){
if(sd-sc<1){obj.filters.alpha.opacity-=1;sd+=opd;}
sc++;
}else{
obj.filters.alpha.opacity-=Math.ceil(1/opd)*0.38;
}
obj.style.pixelHeight-=opp;
setTimeout('menuHide(cacheObj,cacheMaxh,cacheObj2)','5');
}else{
obj.style.pixelHeight=1;
obj.style.display='none';
obj.filters.alpha.opacity=0;
fstrun=1;
op="";
sc=1;sd=1;
mountmfunc(1,1,1);
if(whichContinue && onemenu==1) whichContinue.click();
return true;
}
}
//----------------------------------------------------------------------------------------
function menuChange(obj,maxh,obj2)
{
if(obj.style.pixelHeight>1)
{
menuHide(obj,maxh,obj2);
whichOpen='';
}
else
if(whichOpen)
{
whichContinue=obj2;
whichOpen.click();
}
else
{
menuShow(obj,maxh,obj2);
if(onemenu==1)whichOpen=obj2;
whichContinue='';
}
}
//----------------------------------------------------------------------------------------
function mountmfunc(clk,mi,mo){
//var=1 mount, var=0 disable var=2 do nothing
//clk=mouse click function
//mi=mouse over function
//mo=mouse out function
if(clk==1){document.onclick=monclick;}else if(clk==0){document.onclick="return false;";}else{}
if(mi==1){document.onmousemove=monmouseover;}else if(mi==0){document.onmousemove="return false;";}else{}
if(mo==1){document.onmouseout=monmouseout;}else if(mo==0){document.onmouseout="return false;";}else{}
for(i=1;i<mnunum;i++){
eval("document.all.menuTitle"+i+".className='menu_title';");
}
}
//----------------------------------------------------------------------------------------
//[Public]
var regex=new RegExp("menuTitle\d*","i");
var regex1=new RegExp("[0-9]*$","i");
var boo=0;
//----------------------------------------------------------------------------------------
function monmouseover(){
if(event.srcElement.tagName!="TD" || boo==1) return false;
if(regex.test(event.srcElement.id)){
event.srcElement.className="menu_title2";
boo=1;
}
}
//----------------------------------------------------------------------------------------
function monmouseout(){
if(event.srcElement.tagName!="TD") return false;
if(regex.test(event.srcElement.id)){
event.srcElement.className="menu_title";
boo=0;
}
}
//----------------------------------------------------------------------------------------
function monclick(){
if(!browser.isIE5up || browser.isIE55) return true;
if(event.srcElement.tagName=="A") return true;
if(event.srcElement.tagName=="SPAN"){
if(regex.test(event.srcElement.parentNode.id)){
b=event.srcElement.parentNode.id.match(regex1);
codex="menuChange(menu" + b + "," + eval("menuinit[" + b + "][2]") + "," + event.srcElement.parentNode.id+ ")";
eval(codex);
}
}
if(regex.test(event.srcElement.id)){
b=event.srcElement.id.match(regex1);
codex="menuChange(menu" + b + "," + eval("menuinit[" + b + "][2]") + "," + event.srcElement.id+ ")";
eval(codex);
}
}
//----------------------------------------------------------------------------------------
function init(){
if (document.readyState!="complete") return false;
if(!browser.isIE5up || browser.isIE55) return false;
if(!developversion)window.onerror = function(){window.onerror = blockError;return true;};
var mccount=0;
var showornot;
reg=new RegExp("menu[0-9]{1,2}","i");
reg1=new RegExp("[0-9]*$","i");
for(i=0;i<document.all.length;i++){
if(reg.test(document.all[i].id)){
mnunum++;
s=document.all[i].id.match(reg1);
k=eval("document.all.menu" + s + ".children[0].offsetHeight"); //code to get the height
eval("menuinit[s][2]=k");
for(n=0;n<document.all[i].childNodes.length;n++){
if(document.all[i].childNodes.item(n).tagName=="SPAN"){
//document.all[i].childNodes.item(n).
}
}
eval("showornot=menuinit[s][1]");
switch (showornot){
case "show":
if(++mccount>1 && onemenu==1)alert("You do not supposed put on 2 active menu while 'onemenu' on. Check your setting or turn 'onemenu' to '0'");
if(onemenu==1)eval("whichOpen=menuTitle" + s);
document.all[i].style.filter+="alpha(Opacity=100)";
document.all[i].style.overflow="hidden";
document.all[i].style.height=k;
document.all[i].style.display="block";
eval('document.all.menuTitle'+mnunum+'.background="'+bgimages_hide+'"');
break;
case "not show":
document.all[i].style.filter+="alpha(Opacity=0)";
document.all[i].style.overflow="hidden";
document.all[i].style.height="1";
document.all[i].style.display="none";
eval('document.all.menuTitle'+mnunum+'.background="'+bgimages_show+'"');
break;
default:
alert("Expect 'show' or 'not show' in setting section!");
}
}
}
}
//----------------------------------------------------------------------------------------
function xpmenucmd(op,arg1,arg2){
if (document.readyState!="complete") return false;
switch(op){
case "null":
break;
case "show":
if(arg1!=undefined && arg1>0 && arg1<=mnunum){
if(onemenu){
for(i=1;i<=mnunum;i++){
if(i==arg1){
eval('document.all.menu'+arg1+'.filters.alpha.opacity=100');
eval('document.all.menu'+arg1+'.style.height="'+menuinit[arg1][2]+'"');
eval('document.all.menu'+arg1+'.style.display="block"');
eval('document.all.menuTitle'+arg1+'.background="'+bgimages_hide+'"');
eval('whichOpen=document.all.menuTitle'+arg1);
}else{
eval('document.all.menu'+i+'.filters.alpha.opacity=0');
eval('document.all.menu'+i+'.style.height="1"');
eval('document.all.menu'+i+'.style.display="none"');
eval('document.all.menuTitle'+i+'.background="'+bgimages_show+'"');
}
}
}else{
eval('document.all.menu'+arg1+'.filters.alpha.opacity=100');
eval('document.all.menu'+arg1+'.style.height="'+menuinit[arg1][2]+'"');
eval('document.all.menu'+arg1+'.style.display="block"');
eval('document.all.menuTitle'+arg1+'.background="'+bgimages_hide+'"');
}
}
break;
case "hide":
if(arg1!=undefined && arg1>0 && arg1<=mnunum){
eval('document.all.menu'+arg1+'.filters.alpha.opacity=0');
eval('document.all.menu'+arg1+'.style.height="1"');
eval('document.all.menu'+arg1+'.style.display="none"');
eval('document.all.menuTitle'+arg1+'.background="'+bgimages_show+'"');
whichContinue='';
whichOpen='';
}
break;
case "set mode":
switch(arg1){
case "s":
onemenu=1;
xpmenucmd("hide all");
break;
case "m":
onemenu=0;
whichOpen="";
break;
default:
alert("arg1 error!\n\ne.g. xpmenucmd('set mode','[ m | s ]')");
return false;
}
return true;
break;
case "query mode":
switch(onemenu){
case 1:
return "s";
break;
case 0:
return "m"
break;
default:
alert("something was wrong. onemenu must either be 1 or 0!");
}
break;
case "show all":
if(!onemenu){
for(i=1;i<=mnunum;i++){
eval('document.all.menu'+i+'.filters.alpha.opacity=100');
eval('document.all.menu'+i+'.style.height="'+menuinit[i][2]+'"');
eval('document.all.menu'+i+'.style.display="block"');
eval('document.all.menuTitle'+i+'.background="'+bgimages_hide+'"');
}
whichContinue='';
whichOpen='';
}else{
alert("you can only use this command in multi-menu mode!");
}
break;
case "hide all":
for(i=1;i<=mnunum;i++){
eval('document.all.menu'+i+'.filters.alpha.opacity=0');
eval('document.all.menu'+i+'.style.height="1"');
eval('document.all.menu'+i+'.style.display="none"');
eval('document.all.menuTitle'+i+'.background="'+bgimages_show+'"');
}
whichContinue='';
whichOpen='';
break;
case "query value":
return eval(arg1);
break;
case "exec javascript":
return eval(arg1);
break;
case "set value":
return eval(arg1+"="+arg2);
break;
case "show version":
var regex=/\((.*)\)/;
alert("XP Style Menu\n\n"+regex.exec(vers)[1]);
break;
default:
alert("Don't understood your command.\n\ne.g. xpmenucmd('command','arg1','arg2')");
}
return true;
}
//----------------------------------------------------------------------------------------
if(browser.isNS6up || browser.isIE5up){
mountmfunc(1,1,1);
}else{
mountmfunc(1,2,2);
}
document.onreadystatechange = init; //Let's go!
//That's the end of my code.
//========================================================================================
//Browser detect script by Chris Nott
//(NEEDED!DO NOT DEL.)
function BrowserDetectLite() {
var ua = navigator.userAgent.toLowerCase();
// browser name
this.isGecko = (ua.indexOf('gecko') != -1);
this.isMozilla = (this.isGecko && ua.indexOf("gecko/") + 14 == ua.length);
this.isNS = ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) );
this.isIE = ( (ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1) );
this.isOpera = (ua.indexOf("opera") != -1);
this.isKonqueror = (ua.indexOf("konqueror") != -1);
this.isIcab = (ua.indexOf("icab") != -1);
this.isAol = (ua.indexOf("aol") != -1);
this.isWebtv = (ua.indexOf("webtv") != -1);
// spoofing and compatible browsers
this.isIECompatible = ( (ua.indexOf("msie") != -1) && !this.isIE);
this.isNSCompatible = ( (ua.indexOf("mozilla") != -1) && !this.isNS && !this.isMozilla);
// browser version
this.versionMinor = parseFloat(navigator.appVersion);
// correct version number
if (this.isNS && this.isGecko) {
this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
}
else if (this.isIE && this.versionMinor >= 4) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
}
else if (this.isOpera) {
if (ua.indexOf('opera/') != -1) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) );
}
else {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) );
}
}
else if (this.isKonqueror) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) );
}
else if (this.isIcab) {
if (ua.indexOf('icab/') != -1) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab/') + 6 ) );
}
else {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab ') + 6 ) );
}
}
else if (this.isWebtv) {
this.versionMinor = parseFloat( ua.substring( ua.indexOf('webtv/') + 6 ) );
}
this.versionMajor = parseInt(this.versionMinor);
this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );
// dom support
this.isDOM1 = (document.getElementById);
this.isDOM2Event = (document.addEventListener && document.removeEventListener);
// css compatibility mode
this.mode = document.compatMode ? document.compatMode : 'BackCompat';
// platform
this.isWin = (ua.indexOf('win') != -1);
this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1) );
this.isMac = (ua.indexOf('mac') != -1);
this.isUnix = (ua.indexOf('unix') != -1 || ua.indexOf('linux') != -1 || ua.indexOf('sunos') != -1 || ua.indexOf('bsd') != -1 || ua.indexOf('x11') != -1)
// specific browser shortcuts
this.isNS4x = (this.isNS && this.versionMajor == 4);
this.isNS40x = (this.isNS4x && this.versionMinor < 4.5);
this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7);
this.isNS4up = (this.isNS && this.versionMinor >= 4);
this.isNS6x = (this.isNS && this.versionMajor == 6);
this.isNS6up = (this.isNS && this.versionMajor >= 6);
this.isIE4x = (this.isIE && this.versionMajor == 4);
this.isIE4up = (this.isIE && this.versionMajor >= 4);
this.isIE5x = (this.isIE && this.versionMajor == 5);
this.isIE55 = (this.isIE && this.versionMinor == 5.5);
this.isIE5up = (this.isIE && this.versionMajor >= 5);
this.isIE6x = (this.isIE && this.versionMajor == 6);
this.isIE6up = (this.isIE && this.versionMajor >= 6);
this.isIE4xMac = (this.isIE4x && this.isMac);
}
//
-->
</SCRIPT>
<!--End XP Style Menu-->
<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>
[/html]
:D |
to wenming：cookie读取在ff底下失效~
to zozo98：你的代码在ff下无效:p
顺手也写了个简单的菜单，只测了ie，ff，而且css不确定在其他浏览器下会不会很恶心
....现在的css就很难看....
[html]
<!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>
[/html] |
| 都OK啊 |
To Sheneyan：
偶那个代码在本地或者我们内部的网站上面在FF上面Cookie也是可以的哦。怎么在经典这里就不行呢。还真是不懂了。：） |
这个menu酷，如果能在点击其他menu得时候将以前展开得menu折叠起来就更好了
zozo98在上个帖子中说
|
| 定上来 |
| 收藏此贴 |
怎么设置这个菜单默认全部打开
这样可以一次看到里面的向导了
http://www.x2blog.cn/CIH/
象他的blog的left 那样的效果 |
| 收着 |
|
