仿照淘宝ued的一个菜单栏

最新推荐文章于 2023-03-07 17:10:07 发布

husterxsp

最新推荐文章于 2023-03-07 17:10:07 发布

阅读量709

点赞数

分类专栏： javascript 文章标签： menu

本文链接：https://blog.csdn.net/xsp_Login/article/details/48086103

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

demo : http://codepen.io/husterxsp/pen/zvOyjz

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style type="text/css">
        html,
        body,
        div,
        ul,
        li,
        span,
        a {
            margin: 0;
            padding: 0;
            border: 0;
        }
        html,
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            width: 100%;
        }
        .nav-menu {
            position: relative;
            width: 90%;
            max-width: 600px;
            margin: 1rem auto;
        }
        .nav-label {
            position: absolute;
            z-index: 0;
            top: 0;
            right: 0;
            width: 100%;
            height: 4rem;
            -webkit-transition: top ease-out 0.2s;
            -moz-transition: top ease-out 0.2s;
            -o-transition: top ease-out 0.2s;
            transition: top ease-out 0.2s;
            border-left: 0.5rem solid #ff5f3e;
            background-color: #f8f8f8;
        }
        .menu {
            position: relative;
            z-index: 1;
            margin-left: 1rem;
            list-style: none;
        }
        .menu li {
            margin-top: -1px;
            border-top: 1px solid #f8f8f8;
        }
        .menu li:nth-child(1) {
            border-top: 0;
        }
        .menu li:nth-child(1) a{
            text-indent: .5rem;
        }
        .menu a {
            line-height: 4rem;
            display: block;
            height: 4rem;
            -webkit-transition: color 0.2s;
            -moz-transition: color 0.2s;
            -o-transition: color 0.2s;
            transition: color 0.2s;
            text-decoration: none;
            text-indent: 2rem;
            color: #333;
        }
        .menu a:hover {
            color: #ff5f3e;
        }
        .menu a.select {
            color: #ff5f3e;
        }
        .menu a span {
            float: right;
            font-size: .8rem;
            color: #afafaf;
            margin-right: 1rem;
        }
        @media only screen and ( max-width:420px) {
            html {
                font-size: 15px !important;
            }
        }
        @media only screen and ( max-width:375px) {
            html {
                font-size: 14px !important;
            }
        }
        @media only screen and ( max-width:320px) {
            html {
                font-size: 13px !important;
            }
        }
    </style>
</head>
<body>
<div class="nav-menu">
    <div class="nav-label"></div>
    <ul class="menu">
        <li><a href="#" class="select">任务列表</a></li>
        <li><a href="#" target="_blank">列表1<span>2015/8/29</span></a></li>
        <li><a href="#" target="_blank">列表2<span>2015/8/29</span></a></li>
        <li><a href="#" target="_blank">列表3<span>2015/8/29</span></a></li>
        <li><a href="#" target="_blank">列表4<span>2015/8/29</span></a></li>
        <li><a href="#" target="_blank">列表5<span>2015/8/29</span></a></li>
        <li><a href="#" target="_blank">列表6<span>2015/8/29</span></a></li>
    </ul> 
</div>
<script type="text/javascript">
    window.onload = function(){
        var menu = document.querySelector(".menu");
        var navlabel = document.querySelector(".nav-label");
        menu.addEventListener("mouseover",function(e){     
            navlabel.style.top = e.target.offsetTop+"px";
        },false);
        menu.addEventListener("mouseout",function(e){
            var select = document.querySelector(".select");
            navlabel.style.top = select.offsetTop+"px";
        },false);
        menu.addEventListener("click",function(e){
            var list = document.querySelectorAll(".menu a");
            for(var i = 0; i < list.length; i++){
                list[i].classList.remove("select");
            }
            e.target.classList.add("select");
            navlabel.style.top = e.target.offsetTop+"px";
        },false);
    }
</script>
</body>
</html>

主要是利用了z-index层级来实现效果，其中需要注意的是，z-index只适用于定位元素，即定义了 ‘position’为非static的元素，另外有关分层的显示可参看 w3chelp分层的显示

husterxsp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿照淘宝ued的一个菜单栏

主要是利用了z-index层级来实现效果，其中需要注意的是，z-index只适用于定位元素，即定义了 'position'为非static的元素，另外有关分层的显示可参看 [w3chelp分层的显示](http://www.w3help.org/zh-cn/kb/013/)
复制链接

扫一扫