树型菜单的制作解决方案
日期：2014-05-19 浏览次数：20597 次
树型菜单的制作
想做个如：http://www.51windows.net/data/?url=/data/files/file_843.asp
左侧的树型菜单，或者类似本站的树型菜单也不错，不知要从何入手
请高手们赐教！！
给个思路也行，有代码最好
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 123 </title>
</head>
<body>
<script>
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
//if (window.opera) return; // I 'm too tired
actuator.parentNode.style.backgroundImage = "url(../images/pic_7.gif) ";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block ") ? "url(../images/pic_7.gif) " : "url(../images/pic_7.gif) ";
menu.style.display = (display == "block ") ? "none " : "block ";
return false;
}
}
window.onload = function() {
initializeMenu( "productsMenu ", "productsActuator ");
initializeMenu( "newPhonesMenu ", "newPhonesActuator ");
initializeMenu( "compareMenu ", "compareActuator ");
}
</script>
<style>
body {
font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
background-color: #FFFFFF;
color: #000;
width: 100%;
}
#menuList {
margin: 0px;
padding: 10px 0px 10px 15px;
}
li.menubar {
background: url(../images/pic_7.gif) no-repeat 0em 0.3em;
font-size: 12px;
line-height: 1.5em;
list-style: none outside;
}
.menu, .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}
.menu li, .submenu li {
background: url(../images/pic_9.gif) no-repeat 0em 0.3em;
list-style: none outside;
}
a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
a.actuator:hover {
text-decoration: underline;
}
.menu li a, .submenu li a {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
/*border-bottom: 1px dashed #000;*/
text-decoration: underline;
}
span.key {
text-decoration: underline;
}
</style>
</head>
<body>
<div id= "mainMenu ">
<ul id= "menuList ">
<li class= "menubar ">
<a href= "# " id= "productsActuator " class= "actuator "> 555 </a>
<ul id= "productsMenu " class= "menu ">
<li>
<a href= "# " id= "newPhonesActuator " class= "actuator "> 666 </a>
<ul id= "newPhonesMenu " class= "submenu &quo
想做个如：http://www.51windows.net/data/?url=/data/files/file_843.asp
左侧的树型菜单，或者类似本站的树型菜单也不错，不知要从何入手
请高手们赐教！！
给个思路也行，有代码最好
------解决方案--------------------
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 123 </title>
</head>
<body>
<script>
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return;
//if (window.opera) return; // I 'm too tired
actuator.parentNode.style.backgroundImage = "url(../images/pic_7.gif) ";
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block ") ? "url(../images/pic_7.gif) " : "url(../images/pic_7.gif) ";
menu.style.display = (display == "block ") ? "none " : "block ";
return false;
}
}
window.onload = function() {
initializeMenu( "productsMenu ", "productsActuator ");
initializeMenu( "newPhonesMenu ", "newPhonesActuator ");
initializeMenu( "compareMenu ", "compareActuator ");
}
</script>
<style>
body {
font-family: verdana, helvetica, arial, sans-serif;
}
#mainMenu {
background-color: #FFFFFF;
color: #000;
width: 100%;
}
#menuList {
margin: 0px;
padding: 10px 0px 10px 15px;
}
li.menubar {
background: url(../images/pic_7.gif) no-repeat 0em 0.3em;
font-size: 12px;
line-height: 1.5em;
list-style: none outside;
}
.menu, .submenu {
display: none;
margin-left: 15px;
padding: 0px;
}
.menu li, .submenu li {
background: url(../images/pic_9.gif) no-repeat 0em 0.3em;
list-style: none outside;
}
a.actuator {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
a.actuator:hover {
text-decoration: underline;
}
.menu li a, .submenu li a {
background-color: transparent;
color: #000;
font-size: 12px;
padding-left: 15px;
text-decoration: none;
}
.menu li a:hover, submenu li a:hover {
/*border-bottom: 1px dashed #000;*/
text-decoration: underline;
}
span.key {
text-decoration: underline;
}
</style>
</head>
<body>
<div id= "mainMenu ">
<ul id= "menuList ">
<li class= "menubar ">
<a href= "# " id= "productsActuator " class= "actuator "> 555 </a>
<ul id= "productsMenu " class= "menu ">
<li>
<a href= "# " id= "newPhonesActuator " class= "actuator "> 666 </a>
<ul id= "newPhonesMenu " class= "submenu &quo
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
