首页 > 代码库 > 树形菜单

树形菜单

2024-10-09 13:39:01   211人阅读

简单的一个树形菜单

<!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="http://www.mamicode.com/ 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="http://www.mamicode.com/ 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="http://www.mamicode.com/ 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>

 

树形菜单


联系
我们