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

借用鼠标指定的对象实现动态显示和隐藏菜单

时间:2014-05-07 18:19:48      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:style   class   ext   color   width   int   

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #p > li {
            list-style-type:none;
            float:left;
            width:80px;
            cursor:pointer;
        }
        .hide {
            display: none;
        }
        .show {
            position: absolute;
            list-style-type: none;
            display: block;
            margin: 0;
            padding: 0;
            background-color: Gray;
        }
    </style>
    <script>
        //document.getElementsByTagName
        function show(li)
        {
            var ul = l1.getElementsByTagName("ul");
            for (var i = 0; i < ul.length; i++)
            {
                //alert("执行到这了");
               // alert(ul.innerText);
                if (ul[i].className == "hide")
                {
                    ul[i].className = "show"
                }
            }
        }

    </script>
</head>
<body>
    <ul id="p">
        <li id="l1" onmousemove="show(this)">
            文件
            <ul class="hide" id="memu">
                <li>新建</li>
                <li>保存</li>
                <li>另存为</li>
                <li>退出</li>
            </ul>
        </li>

        <li>
            编辑
            <ul class="hide" id="memu">
                <li>新建</li>
                <li>保存</li>
                <li>另存为</li>
                <li>退出</li>
            </ul>
        </li>
        <li>
            插入
            <ul class="hide" id="memu">
                <li>新建</li>
                <li>保存</li> 
                <li>另存为</li>
                <li>退出</li>
            </ul>
        </li>
        <li>
            窗体
            <ul class="hide" id="memu">
                <li>新建</li>
                <li>保存</li>
                <li>另存为</li>
                <li>退出</li>
            </ul>
        </li>
        <li>
            帮助
            <ul class="hide" id="memu">
                <li>新建</li>
                <li>保存</li>
                <li>另存为</li>
                <li>退出</li>
            </ul>
        </li>
    </ul>

</body>
</html>

借用鼠标指定的对象实现动态显示和隐藏菜单,布布扣,bubuko.com

借用鼠标指定的对象实现动态显示和隐藏菜单

标签:style   class   ext   color   width   int   

原文地址:http://www.cnblogs.com/shangguanjinwen/p/3709900.html

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