水平导航菜单
Source
Output
QRCode
<!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>