<!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" />
<!--
Author:Shaoyun
Time:2008/08/10 16:41
Email:shaoyun at yeah.net
Updata:
++2008/08/11 19.32
实现菜单链接通过XML文件配置
++2008/08/10 16:41
JQuery+CSS实现二级菜单，通过Firefox3和IE6测试
-->
<style type="text/css">
*{margin:0;padding:0;}
ul#menu a{ color:#FFF; font-weight:bold; text-decoration:none; display:block;width:80px;}
ul#menu a:hover{ color:#FFF; background:#666;}
ul#menu,dl.submenu{list-style-type:none;}
ul#menu li{ background:#900;float:left;margin-left:10px; position:relative;display:inline;width:80px; text-align:center;font-size:13px;line-height:24px;}
dl.submenu{ display:none;position:absolute;left:0px;}
dl.submenu dd{ clear:both;width:80px;background:#900;border-top:1px solid #600;}
</style>
<!-- --------------------- Scrtip Code Begin -------------------------------- -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function loadXML(xmlpath){
var xmlDoc=null;
if (window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}else if (document.implementation && document.implementation.createDocument){
xmlDoc=document.implementation.createDocument("","",null);
}else{
alert('Your browser cannot handle this script.');
}
xmlDoc.async=false;
xmlDoc.load(xmlpath);
return xmlDoc;
}
function initMenu(xmlpath){
var oxml=loadXML(xmlpath);
$(oxml).find("menus > menu").each(function(){
var temp_str;
temp_str="<li><a href="+$(this).attr("link")+">"+$(this).attr("name")+"</a>"
if($(this).find("submenu").size()>0){
temp_str+="<dl class=submenu>"
$(this).find("submenu").each(function(){
temp_str+="<dd><a href="+$(this).attr("link")+">"+$(this).attr("name")+"</a></dd>"
});
temp_str+="</dl>"
}
temp_str+="</li>";
$(temp_str).appendTo("#menu");
});
$("#menu li").each(function(){
$(this).hover(
function(){
$(this).children("dl.submenu").show();
},
function(){
$(this).children("dl.submenu").hide();
});
});
}
$(function(){
var timeBegin=new Date();
initMenu("menu.xml");
var timeEnd=new Date();
$("#scriptExeTime").html(timeEnd-timeBegin);
});
</script>
<!-- --------------------- Script Code End -------------------------------- -->
</head>
<body id="code" style="background:#000;text-align:center;"><BR><BR>
<h3 style="color:#FFF;font-size:16px;">CSS+JQuery+XML二级菜单</h3><BR>
<!-- --------------------- HTML Code Begin -------------------------------- -->
<div id="nav_header" style="width:700px;margin:0px auto;">
<ul id="menu"></ul>
</div>
<!-- --------------------- HTML Code End -------------------------------- -->
<BR>
<h4 style="margin-top:5px!important;margin-top:0;clear:both;float:right;color:#FFF;font-size:14px;font-weight:normal;text-align:right;padding-right:200px;">作者:shaoyun Email:shaoyun at yeah.net</h4><BR>
<BR>
<div style="color:#CCC;font-size:14px;padding:10px 25px;line-height:24px;margin:0px auto;border:1px solid #900;width:630px;height:auto;text-align:left;">
<ul>
<li>用XML做配置文件，其他代码用JS生成，实现代码与数据分离。</li>
<li>IE6大多标签不支持hover，这里使用JQuery的hover事件函数。</li>
<li>测试环境IE6、Firefox3，代码很好的兼容了IE和Firefox，其他环境未做测试。</li>
<li>鼠标移动活动链接高亮显示，而且下拉菜单不会被文字遮挡，当然Select表单元素除外。</li>
<li>使用JQuery的函数读取XML总是失败，所以这里用了一个自定义的函数loadXML()。</li>
<li>有其他疑问或建议请发邮件给我，欢迎访问我的Blog: <a href="http://shaoyun.cnblogs.com" target="_blank">http://shaoyun.cnblogs.com</a> 与我交流。</li>
</ul>
</div>
<BR>
<center><font color="#CCCCCC" size=2><<<---- 脚本执行耗时<span id="scriptExeTime"></span>毫秒 ---->>></font></center>
</body>
</html>
评论2
最新资源