nav-menu.html | searchcode

/5.0/demos/menu/cited-by-md/nav-menu.html

https://github.com/kissyteam/kissyteam.github.com
HTML | 180 lines | 174 code | 6 blank | 0 comment | 0 complexity | 3b62fc9034cf7144743c05a00b8adeac MD5 | raw file
Possible License(s): Apache-2.0

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>水平导航菜单</title>
<link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
<style type="text/css">
.nav-menu {
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.nav-menu a {
    text-decoration: none;
}
.nav-menu a, .nav-menu a:link, .nav-menu a:visited {
    color: #333;
}
.nav-menu a:hover, .nav-menu .nav-menuitem-hover a, .nav-menu a:active {
    text-decoration: none;
    color: #F96400;
}
.horizonal {
    background-color: #f0f0f0;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    height: 33px;
    _overflow: hidden;
    *zoom: 1;
}
.nav-menu .nav-menuitem {
    white-space: nowrap;
}
.nav-menu .nav-menuitem .title {
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: 33px;
    line-height: 33px;
    padding: 0 30px;
}
.nav-menu .nav-menuitem span.title {
    padding: 0 20px 0 12px;
}
.horizonal .nav-menuitem {
    float: left;
}
.nav-menu .nav-menuitem-hover a.title {
    border-top: 2px solid #F96400;
    margin-top: -1px;
    line-height: 31px;
    background-color: #e4e4e4;
    background-image: -moz-linear-gradient(-90deg, #e9e9e9, #dedede);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9e9e9), color-stop(1, #dedede));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr = '#e9e9e9', EndColorStr = '#dedede');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#e9e9e9', EndColorStr='#dedede')";
}
.nav-menu .nav-menuitem-hover span.title {
    background: #f5f5f5;
    padding-bottom: 1px;
    border: 1px solid #cbcbcb;
    border-bottom: none;
    margin-top: -1px;
    margin-left: -1px;
}
.nav-menu .nav-submenu {
    position: relative;
    z-index: 10000;
}
.nav-menu .nav-submenu .nav-submenu-arrow {
    position: absolute;
    top: 46%;
    top: 40%\9;
    right: 6px;
    width: 0;
    height: 0;
    border-width: 4px 4px 0 4px;
    border-style: solid dashed dashed dashed;
    border-color: #666 transparent transparent transparent;
    font-size: 0;
    line-height: 0;
    /*http://goo.gl/jb0w0*/
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.2s ease-in;
    -moz-transition: -moz-transform 0.2s ease-in;
    -o-transition: -o-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
}
.nav-menu .nav-submenu-hover .nav-submenu-arrow {
    -moz-transform: rotate(180deg);
    -moz-transform-origin: 50% 30%;
    -webkit-transform: rotate(180deg);
    -webkit-transform-origin: 50% 30%;
    -o-transform: rotate(180deg);
    -o-transform-origin: 50% 50%;
    transform: rotate(180deg);
    transform-origin: 50% 30%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = 2);
}
.nav-popupmenu {
    position:absolute;
    left:-9999px;
    top:-9999px;
    background-color: #f5f5f5;
    border: 1px solid #CBCBCB;
}
.nav-popupmenu .nav-menuitem a {
    display: block;
    padding-left: 12px;
    height: 30px;
    line-height: 30px;
}
.nav-popupmenu .nav-menuitem-hover a {
    background: #fff;
    font-weight: bold;
}
.nav-popupmenu-hidden {
    visibility: hidden;
}
.horizonal .ks-menuitem {
    float: left;
}
</style>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:true}"></script>
</head>
<body>
<h1>水平导航菜单</h1>
<div id="menu_container">
    
</div>
<script type="text/javascript">
    require(['menu', 'util'], function (Menu, util) {
        var prefixCls = "nav-";

        // 首先创建一个弹出菜单
        var sb = new Menu.PopupMenu({
            width:200,
            // boolean，是否鼠标脱离菜单后自动隐藏
            autoHideOnMouseLeave:true,
            align:{   //相对父组件 b = new Menu.SubMenu() 定位
                offset:[-1, -1],
                points:['bl', 'tl']
            },
            prefixCls:prefixCls
        });

        util.each(['日志', '相册', '个人资料'], function (title) {
            sb.addChild(new Menu.Item({
                prefixCls:prefixCls,
                content:'<a href="javascript:void(0)" tabindex="-1">' + title + '</a>'
            }));
        });

        // 这个子菜单, 关联到上面创建的弹出菜单
        var b = new Menu.SubMenu({
            prefixCls:prefixCls,
            content:'<span class="title">更多</span>',
            menu:sb
        });

        // 创建导航菜单
        var menu = new Menu({
            prefixCls:prefixCls,
            width:'70%',
            render:'#menu_container',
            elCls:"horizonal"
        });

        util.each(['淘单', '动态'], function (title) {
            menu.addChild(new Menu.Item({
                prefixCls:prefixCls,
                content:'<a href="javascript:void(0)" class="title" tabindex="-1">' + title + '</a>'
            }));
        });
        menu.addChild(b);
        menu.render();
    });
</script>
</body>
</html>