自定义菜单树简单实例 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#nav {
    width: 200px;
}
#nav>ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#nav>ul>li {
    border-bottom: 1px solid #ed9f9f;
}
#nav>ul>li>a {
    display: block;
    padding: 5px 5px 5px 0.5em;
    text-decoration: none;
    border-left: 12px solid #711515;
    border-right: 1px solid #711515;
}
#nav>ul>li>a:link, #nav>ul>li>a:visited {
    background-color: #c11136;
    color: #fff;
}
#nav>ul>li>a:hover {
    background-color: #990020;
    color: #ff0;
}
#nav ul li ul {
    list-style-type: none;
    margin: 0px;
    padding: 0;
}
#nav ul li ul li {
    border-top: 1px solid #ed9f9f;
}
#nav ul li ul li a {
    display: block;
    padding: 3px 3px 3px 0.5em;
    text-decoration: none;
    border-left: 28px solid #a71f1f;
    border-right: 1px solid #711515;
}
#nav ul li ul li a:link, #nav ul li ul li a:visited {
    background-color: #e85070;
    color: #ffffff;
}
#nav ul li ul li a:hover {
    background-color: #c2425d;
    color: #ffff00;
}
#nav ul li ul.hide {
    display: none;
}
#nav ul li ul.show {
    display: block;
}
</style>
<script>
window.onload = function() {
    var oul = document.getElementById('list');
    var ali = oul.childNodes;
    var oa;
    for (var i = 0; i < ali.length; i++) {
        if (ali[i].tagName == 'LI' && ali[i].getElementsByTagName('ul').length) {
            oa = ali[i].firstChild;
            oa.onclick = change;
        }
    }
}
function change() {
    var osd = this.parentNode.getElementsByTagName('ul')[0];
    if (osd.className == 'hide') osd.className = 'show';
    else osd.className = 'hide';
}
</script>
</head>
<body>
<div id="nav">
    <ul id="list">
        <li><a href="#">home</a></li>
        <li><a href="#">news</a>
        <ul class="hide">
            <li><a href="#">lastest news</a></li>
            <li><a href="#">all news</a></li>
        </ul>
        </li>
        <li><a href="#">sports</a>
        <ul class="hide">
            <li><a href="#">basketball</a></li>
            <li><a href="#">football</a></li>
            <li><a href="#">volleyball</a></li>
        </ul>
        </li>
        <li><a href="#">weather</a>
        <ul class="hide">
            <li><a href="#">today's weather</a></li>
            <li><a href="#">forecast</a></li>
        </ul>
        </li>
        <li><a href="#">contact me</a></li>
    </ul>
</div>
</body>
</html>

 

posted @ 2014-12-29 11:58  feilv  阅读(299)  评论(0)    收藏  举报