火星文字

ρεйg 的个人资料简洁的想法照片日志列表

工具

帮助

2005/11/19

下面这段代码(也就是某些人形容的火星文字)可以用来生成一个竖直方向可展开的菜单，兼容IE,Firefox,Oprea。写这段小小的代码，我可是走了不少弯路。

1,关于javascript：

eval()函数在Firefox中居然不起作用，而且它对onclick()事件也不能很好支持。还好程序员都有共享精神，在网上我找到了一段讲述类似问题的代码，虽然不能直接解决我的问题，但毕竟知道问题出在onclick()和eval()函数上。接下来，调试了半天还是点不动菜单，我几乎要放弃了，后来，凭一点直觉，小改了一下代码，居然成功了。要点一个是event，一个是getElementById，大家可以看代码。

另外打开页面时加载的javascript函数也要特殊处理，一是调用函数的代码位置要在定义函数的代码位置之后，二是要用window.onload=function(){showsubmenu(0);}的形式调用，如果写window.onload=showsubmenu(0);是会没有反应的。

2,关于CSS：

我觉得自己不是一个完美主义者，但为了符合W3C的网页标准，我花了几乎是平时几倍的时间和精力在IE,Firefox,Oprea上调试，看看是不是有相同的显示效果。在CSS的leftnav类中，我开始定义了高度，也就是背景图片的高度。结果点开菜单的时候，在IE正常，在Firefox中展开的部分居然和下面的内容重合。后来在一个不起眼的网页上发现了这个heigh的定义是要不得的。此外我还添加了overflow:hidden;这样改动过后，在所有浏览器都OK了。

程序员也许就是这样在痛苦中长大的吧。

下面是代码，作为菜单的背景图片可以下载后放在images目录下。

图片名称：menuup.gif

图片名称：menudown.gif

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>菜单</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<META content="ZhangPeng" name="author">
<script language="javascript">
function showsubmenu(sid,evt){
    evt = evt ? evt : (window.event ? window.event : null);
    if (document.getElementById("submenu" + sid).style.display == "none"){
        document.getElementById("submenu" + sid).style.display = "block";
        document.getElementById("imgmenu" + sid).style.background= 'url(images/menuup.gif)';
    }else{
        document.getElementById("submenu" + sid).style.display = "none";
        document.getElementById("imgmenu" + sid).style.background= 'url(images/menudown.gif)';
    }
}
</script>
<style type="text/css">
UL.leftnav{
    margin:5px auto 0px;
    font: 14px verdana,geneva,arial,helvetica,sans-serif;
    width: 170px;
    PADDING: 5px 0px 0px 0px ; 
    background: url("images/menudown.gif");
    text-align: left;
    LIST-STYLE-TYPE:none;
    cursor: hand;
    overflow:hidden;
    }
A.navalpha {
    MARGIN:     0px; 
    DISPLAY:     block;
    BORDER:     0px; 
    BACKGROUND-COLOR:#d6dff7; 
    PADDING: 5px 0px 3px 10px ; 
    COLOR:         #000; 
    FONT-WEIGHT:     normal; 
    TEXT-ALIGN:     left; 
    TEXT-DECORATION:none; 
    WIDTH:         100%;
    font: 12px verdana,geneva,arial,helvetica,sans-serif;
}
A.navalpha:visited {
    BACKGROUND-COLOR: #d6dff7;
}
A.navalpha:hover {
    BACKGROUND-COLOR:    #E4E4E4;
    color: #EC870E;
    font: 12px verdana,geneva,arial,helvetica,sans-serif;
}
</style>
</head>
<body>
<div>
    <span id="imgmenu0"></span>
    <span id="submenu0"></span>
    <UL id="imgmenu1" class="leftnav" onclick="showsubmenu(1,event)" ><span style="padding-left:8px" >修改注册信息</span>
        <div id="submenu1" style="display: block;">
            <li><a class="navalpha" href="#">基本信息</a></li>
            <li><a class="navalpha" href="#">安全信息</a></li>
            <li><a class="navalpha" href="#">附加信息</a></li>
        </div>
    </ul>

    <ul id="imgmenu2" class="leftnav" onclick="javascript:showsubmenu(2,event)"><span style="padding-left: 8px;">帖子管理</span>
        <div id="submenu2" style="display: none;">
            <li><a class="navalpha" href="#">需求信息</a></li>
            <li><a class="navalpha" href="#">供应信息</a></li>
        </div>
    </ul>
    <script>window.onload=function(){showsubmenu(0);}</script>
</div>
</body></html>

1:07 | 写入日志 | 网页 / web / Webseite

若要添加评论，请使用您的 Windows Live ID 登录（如果您使用过 Hotmail、Messenger 或 Xbox LIVE，您就拥有 Windows Live ID）。登录

还没有 Windows Live ID 吗？请注册

暮年马良发表:

晕，是说偶吗？
嗯，慰问完火星居民，临走前给你留个巴掌印:P吼吼~~

11 月 19 日

引用通告

此日志的引用通告 URL 是：

http://zpvip.spaces.live.com/blog/cns!BDF2257D6BCC1CC2!364.trak

引用此项的网络日志

日志

火星文字

评论 (1)

引用通告