仿照淘宝ued的一个菜单栏

来源：互联网发布：便携工具知乎编辑：程序博客网时间：2024/05/01 13:36
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分层的显示
0 0