自定义二级标签

最新推荐文章于 2023-04-04 17:28:57 发布

weixin_30478757

最新推荐文章于 2023-04-04 17:28:57 发布

阅读量299

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/yi-mi-yangguang/p/6382893.html

版权

<!DOCTYPE html>
<html lang="en">
    <head>
    <link rel="stylesheet" href="../css/default.css">
    <script src="../js/main.js"></script>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function(){
     var li=document.getElementsByTagName('li');//先获取到li
     for (var i = 0; i < li.length; i++) {
         li[i].onmouseover=function(){
             var subNav=this.getElementsByTagName('ul')[0];//获取到ul下的第一个元素
             if(subNav!=null){//判断是否还有元素，若没有判断则会报obj.timer  undefined错误
       startMove(subNav,{height:120});
     }};
         li[i].onmouseout=function(){
             var subNav=this.getElementsByTagName('ul')[0];
             if(subNav!=null){
       startMove(subNav,{height:0});
     }};
     }
    };
    </script>
    </head>
    <body>
    <ul class='nav'>
        <li><a href="#">一级菜单</a>
            <ul class='subNav'>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a>
            <ul class='subNav'>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a>
            <ul class='subNav'>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a>
            <ul class='subNav'>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
.nav {
width: 490px;
position: absolute;
margin-left: 150px;
border-bottom: 5px solid #F93;
}
.nav li {
float: left;
height: 30px;
margin-left: 2px;
}
.nav li a {
display: block;
width: 120px;
height: 30px;
text-align: center;
background: #ccc;
line-height: 30px;
}
.nav li a:hover {
background: #F93;
}
.subNav {
width: 120px;
height: 0px;
overflow: hidden;
}
.subNav li a {
margin-left: -2px;
}

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

function startMove(obj, json, fn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;
        for (var attr in json) {
            var speed = 0;
            var icur = 0;
            if (attr == 'opacity') {
                icur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                icur = parseInt(getStyle(obj, attr));
            }
            speed = (json[attr] - icur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (json[attr] != attr) {
                flag = false;
            }
            if (attr == 'opacity') {
                obj.style[attr] = (icur + speed) / 100;
                obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';
            } else {
                obj.style[attr] = icur + speed + 'px';
            }
            if (flag) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }
    }, 30);
}

二级标签css样式几个关键位置

.nav即包裹层的宽度限制着一级标签的个数。

.nav li{

height:30px;//和.nav li a {height:30px;要相等}

}

把.nav布局固定。去掉的话，底边框会被撑开。

.nav li a{

width:120px;//决定着二级标签的宽度

}

.subNav {
width: 120px;//二级标签的宽度,去除的话布局会乱
height: 0px;
overflow: hidden;//height:0px,和overflow:hidden2者共同决定二级标签的隐藏
}

转载于:https://www.cnblogs.com/yi-mi-yangguang/p/6382893.html

weixin_30478757

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义二级标签

<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href="../css/default.css"> <script src="../js/main.js"></script> <meta ch...
复制链接

扫一扫