树形菜单 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>树形菜单</title>
    <style>
        body {
            font: 12px/20px 宋体;
        }

        img {
            vertical-align: center;
            border: none;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        li {
            list-style: none;
        }
    </style>
    <script>
        function onclickfclose(id) {
            var ul = document.getElementById(id);
            var objv = ul.style.display;
            if (objv == 'none') {
                ul.style.display = 'block'
            } else {
                ul.style.display = 'none';
            }
        }


    </script>
</head>
<body>
<b><img src="images/fold.gif" alt=""/>树形菜单</b>
<ul>
    <a href="javascript:onclickfclose('art')"><img src="images/fclose.gif" alt=""/>文学艺术</a>
</ul>
<ul id="art" style="display: none;">
    <li><img src="images/doc.gif" alt=""/>著名小说</li>
    <li><img src="images/doc.gif" alt=""/>著名小说</li>
    <li><img src="images/doc.gif" alt=""/>著名小说</li>
    <li><img src="images/doc.gif" alt=""/>著名小说</li>
</ul>
<ul>
    <a href="javascript:onclickfclose('fangc')"><img src="images/fclose.gif" alt=""/>房产论坛</a>
</ul>
<ul id="fangc" style="display: none;">
    <li><img src="images/doc.gif" alt=""/>房产推销</li>
    <li><img src="images/doc.gif" alt=""/>房产推销</li>
    <li><img src="images/doc.gif" alt=""/>房产推销</li>
    <li><img src="images/doc.gif" alt=""/>房产推销</li>
</ul>
<ul>
    <a href="javascript:onclickfclose('tuhua')"><img src="images/fclose.gif" alt=""/>提图专区</a>
</ul>
<ul id="tuhua" style="display: none" ;>
    <li><img src="images/doc.gif" alt=""/>风景图画</li>
    <li><img src="images/doc.gif" alt=""/>风景图画</li>
    <li><img src="images/doc.gif" alt=""/>风景图画</li>
    <li><img src="images/doc.gif" alt=""/>风景图画</li>
</ul>
<ul>
    <a href="javascript:onclickfclose('bagua')"> <img src="images/fclose.gif" alt=""/>娱乐八卦</a>
</ul>
<ul id="bagua" style="display: none" ;>
    <li><img src="images/doc.gif" alt=""/>明星采访</li>
    <li><img src="images/doc.gif" alt=""/>明星采访</li>
    <li><img src="images/doc.gif" alt=""/>明星采访</li>
    <li><img src="images/doc.gif" alt=""/>明星采访</li>
</ul>
</body>
</html>

 

posted @ 2017-06-21 11:13  斯丢皮德曼  阅读(208)  评论(0)  编辑  收藏  举报