[color=blue][/color][size=xx-small][/size][align=left][/align]
页面代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>MenuBar</title>
<link rel="stylesheet" type="text/css" href="menu.css">
<link rel="stylesheet" type="text/css" href="all.css">
<script type="text/javascript" src="menu.js"></script>
<script>
function loadNavMenu(){
var tdmenubar = new TdMenuBar({renderTo:"navDiv",menus:[{text:'文件',menus:[{text:'新建'},{text:'打开'}]}]});
}
</script>
</head>
<body οnlοad="loadNavMenu()">
<div id="navDiv" style="border: 2px inset;"></div>
</body>
</html>
JavaScript代码:
/*
* 自定义导航菜单
* 2009-4-18
*/
function TdMenuBar(config){
this.initial(config);
this.container;
this.rootUL;
}
/*
* 初始化
*/
TdMenuBar.prototype.initial = function(config){
for(var p in config){
this[p] = config[p];
}
this.container = document.getElementById(this.renderTo);
this.render();
}
/*
*
*/
TdMenuBar.prototype.render = function(){
this.container.innerHTML = "<ul class='menu'></ul>";
this.rootUL = this.container.getElementsByTagName("ul")[0];
if(this.menus && this.menus.length > 0){
var html = "";
for(var i=0; i<this.menus.length; i++ ){
html+="<li>";
html += "<a href='#'>"+this.menus[i].text+"</a>";
html += this.renderSub(this.menus[i]);
html += "</li>";
}
this.rootUL.innerHTML = html;
var menuItemLi = this.rootUL.getElementsByTagName("li");
/* 绑定事件 */
for (var i=0; i<menuItemLi.length; i++) {
menuItemLi[i].οnmοuseοver=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
menuItemLi[i].οnmοusedοwn=function() {
alert(event.srcElement.tagName);
}
menuItemLi[i].οnmοuseup=function() {
}
menuItemLi[i].οnmοuseοut=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"), "");
}
}
}
}
/*
*
*/
TdMenuBar.prototype.renderSub = function(menuItem){
var html = "";
if(menuItem.menus && menuItem.menus.length > 0) {
html += "<ul>";
for(var i =0 ; i < menuItem.menus.length; i++) {
html += "<li>";
html += "<a href='#'>"+menuItem.menus[i].text+"</a>";
html += "</li>";
}
html += "</ul>";
}
return html;
}
CSS样式定义:
ul.menu {
line-height: 20px;
list-style-type: none;
font-size:12px;
}
ul.menu a {
display: block;
width: 80px;
text-align:center;
}
ul.menu a:link {
text-decoration:none;
}
ul.menu a:visited {
text-decoration:none;
}
ul.menu a:hover {
text-decoration:none;
font-weight:bold;
}
ul.menu li {
float: left;
width: 80px;
}
ul.menu li a:hover{
background:#999;
}
ul.menu li ul {
line-height: 22px;
list-style-type: none;
text-align:left;
left: -999px;
width: 200px;
position: absolute;
}
ul.menu li:hover ul {
left: auto;
}
ul.menu li.sfhover ul {
left: auto;
}
ul.menu li ul li{
float: left;
}
ul.menu li ul a{
display: block;
width: 150px;
text-align:left;
padding-left:24px;
background:#999;
}
ul.menu li ul a:link {
color:#666;
text-decoration:none;
}
ul.menu li ul a:visited {
color:#666;
text-decoration:none;
}
ul.menu li ul a:hover {
color:#F3F3F3;
text-decoration:none;
font-weight:normal;
background:#C00;
}
相关资源：VUE组件封装左侧垂直导航三级菜单
