自定义样式-menubutton
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>自定义样式-menubutton</title>
<style type="text/css">
body{
background: #fff;
}
.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: 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;
}
.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;
/*//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;
padding: 0;
}
.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 {
background-color: #f5f5f5;
border: 1px solid #CBCBCB;
position: absolute;
z-index: 99;
left: -9999px;
top: -9999px;
}
.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;
}
.nav-menuitem-content {
display: inline;
}
</style>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:true}"></script>
</head>
<body>
<h1>自定义样式-menubutton</h1>
<p>模拟 mouse trigger menubutton</p>
<div id="context" style="width: 200px;margin-left:50px;">
</div>
<script type="text/javascript">
require(['menu', 'separator', 'node'], function (Menu, Separator, $) {
var context = $("#context");
var b, bb;
var sb = new Menu.PopupMenu({
prefixCls:"nav-",
// boolean，是否鼠标脱离菜单后自动隐藏全部下拉菜单
autoHideOnMouseLeave:true,
width:150,
align:{
offset:[-1, -1],
points:['tl', 'tl']
}
});
sb.addChild(new Menu.Item({
prefixCls:"nav-",
content:"<a>我要买</a>"}));
sb.addChild(new Menu.Item({
prefixCls:"nav-",
content:"<a>我要卖</a>"}));
sb.addChild(new Separator({
prefixCls:"nav-"
}));
var sb2 = new Menu.PopupMenu({
prefixCls:"nav-",
width:90,
// boolean，是否鼠标脱离菜单后自动隐藏全部下拉菜单
autoHideOnMouseLeave:true,
children:[
new Menu.Item({
prefixCls:"nav-",
content:"<a>旺铺</a>"})
],
// bug elStyle 无效
elStyle:{
color:"red"
}
});
sb2.addChild(new Menu.Item({
prefixCls:"nav-",
content:"<a>装修</a>"}));
var b2 = new Menu.SubMenu({
prefixCls:"nav-",
content:"<a>卖家中心</a>",
menu:sb2
});
sb.addChild(b2);
b = new Menu.SubMenu({
prefixCls:"nav-",
content:"<span class='title' style='width:58px'>淘宝网</span>",
menu:sb
});
var menu = new Menu({
prefixCls:"nav-",
width:90,
elCls:"horizonal",
render:'#context',
children:[b]
});
menu.render();
menu.on("click", function (e) {
S.log(e.target.get("content"));
});
});
</script>
</body>
</html>