码迷,mamicode.com
首页 > 其他好文 > 详细

树形菜单

时间:2017-06-21 13:37:11      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:oct   text   har   bsp   splay   isp   get   12px   ges   

简单的一个树形菜单

<!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>

 

树形菜单

标签:oct   text   har   bsp   splay   isp   get   12px   ges   

原文地址:http://www.cnblogs.com/lwj820876312/p/7058597.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!