看了下 bootstrap 的导航菜单，立刻非常喜欢，注意是浅色的那个：
而不是黑色的那个：
由于浅色的导航css定义在 docs 中，故没有 less 源码文件可以参考，纯看 css 非常混乱，这次就用 less 重新实现了下浅色导航，实现后才发现 bootsrap 对于细节非常重视，其中样式状态非常之多，和之前搞的语法解析的状态有得一比。
html 代码
重新实现后的导航为 KISSY toolbar 组件，html 如下：
KISSY kisses bootstrap navbar
包含下拉菜单的为 menubutton（button 的子类），不包含则为普通的 button 组件.
状态枚举
toolbar
toolbar 有背景色以及边框和阴影样式，可以先定义变量：
@toolbarBackgroundHighlight: #F5F5F5; @toolbarBackground: #eee; @toolbarShadow: inset 0 1px 0 white, 0 1 px 5 px rgba(0, 0, 0, .1);
之后定义 toolbar 样式：
.ks-toolbar {
#gradient > .vertical(@toolbarBackgroundHighlight, @toolbarBackground);
border: 1px solid @toolbarItemBorderColor;
border-radius: 4px;
outline: none;
.box-shadow(@toolbarShadow);
}
注意 ：.vertical 表示垂直渐变，最终 toolbar 视觉效果如下：
toolbaritem(button)
普通状态
补齐
即普通的按钮组件，首先按钮组件都有一定的 padding，只有左右边框，并且首按钮没有左边框，右按钮没有右边框，那么首尾按钮要通过 padding 补齐来防止移位：
.ks-toolbar {.ks-button {
padding: 11px 12px 11px 12px;
}}
.ks-toolbar {
.ks-button:first-child {
border-left: 0;
padding-left: 13px;
}
.ks-button:last-child {
border-right: 0;
padding-right: 13px;
}
}
颜色
普通状态下按钮有两种颜色：
@toolbarItemBorderColor: #e5e5e5; // 右边框颜色 @toolbarItemColor: #08C; // 字体颜色
而左边框则定义为和 toolbar 的渐变的浅色背景一样，从而达到突出分割的效果:
.ks-toolbar {
.ks-button
color: @toolbarItemColor;
border-left: 1px solid @toolbarBackgroundHighlight;
border-right: 1px solid @toolbarItemBorderColor;
}
}
视觉效果：
注意边框旁边的留白.
hover 状态
当鼠标经过时即进入 hover 状态，引入三种颜色：
@toolbarItemHoverColor: #005580; // hover 字体颜色 @toolbarItemHoverBackgroundColor: @toolbarBackground; // hover 背景色 @toolbarItemHoverBorderColor: #ddd; // hover 右边框颜色
视觉效果：
注意左右边框对比.
checked(active) 状态
按钮可以有选中状态，以及 active（鼠标按下） 状态，引入三种颜色：
@toolbarItemCheckedBackgroundColor: #e9e9e9; @toolbarItemCheckedColor: #777; @toolbarItemCheckedShadow: inset 0 3px 5px rgba(0, 0, 0, .05);
同时需要将左边框的留白部分消除，并用padding补齐（左边框的颜色变为和背景一样有点问题），以更好得融入
.ks-button-checked,
.ks-button-active {
color: @toolbarItemCheckedColor;
background-color: @toolbarItemCheckedBackgroundColor;
padding-left: 13px;
border-left: 0;
box-shadow: @toolbarItemCheckedShadow;
}
视觉效果：
toolbaritemOpen(menubutton)
此即为带下拉菜单的按钮，由于有独特的下拉箭头而需要设置不同的样式（下拉菜单 menu 部分暂不处理）
普通状态
由于 menubutton 继承自 button 则 button 的状态会自动附加到 menubutton 上面，menubutton仅需考虑下拉箭头颜色，和 toolbaritem 的文字颜色保持一致即可：
@toolbarDropdownBackgroundColor: @toolbarItemColor;
注意这里使用border（详见前同事lizzie总结）来画三角
.ks-menu-button-dropdown {
border-top-color: @toolbarDropdownBackgroundColor;
}
视觉效果：
注意原本箭头即具备 menubutton 组件的透明效果
hover 状态
按钮部分仍然无需处理，仅处理箭头部分即可：
@toolbarDropdownHoverBackgroundColor: @toolbarItemCheckedColor;
.ks-button-hover .ks-menu-button-dropdown {
border-top-color: @toolbarDropdownHoverBackgroundColor;
}
注意颜色和按钮选中状态一致，更加突出，视觉效果（注意由于menubutton影响，箭头已恢复透明度）：
open 状态
menubutton 没有选中状态，只有当菜单打开时的 open 状态, 在 open 状态又是三个颜色：
@toolbarItemOpenColor: white; // open 文字颜色 @toolbarItemOpenBackgroundColor: #999; // open 背景颜色 @toolbarDropdownOpenBackgroundColor: @toolbarItemOpenColor; // open 箭头颜色
注意箭头颜色仍然和 open 时的文字颜色保持一致。
.ks-menu-button-open {
color: @toolbarItemOpenColor;
background-color: @toolbarItemOpenBackgroundColor;
border-color: @toolbarItemOpenBackgroundColor;
}
.ks-menu-button-open {
.ks-menu-button-dropdown {
border-top-color: @toolbarDropdownOpenBackgroundColor;
}
}
视觉效果（注意由于menubutton，透明度已恢复）
最终 demo：
KISSY toolbar DPL
最终代码
.ks-toolbar {
#gradient > .vertical(@toolbarBackgroundHighlight, @toolbarBackground);
border: 1px solid @toolbarItemBorderColor;
border-radius: 4px;
outline: none;
.box-shadow(@toolbarShadow);
}
.ks-toolbar {
.ks-button {
background: transparent;
border: none;
text-shadow: none;
padding: 11px 12px 11px 12px;
color: @toolbarItemColor;
margin: 0;
border-left: 1px solid @toolbarBackgroundHighlight;
border-right: 1px solid @toolbarItemBorderColor;
border-radius: 0;
background-image: none;
.box-shadow(none);
}
.ks-button:first-child {
border-left: 0;
padding-left: 13px;
}
.ks-button:last-child {
border-right: 0;
padding-right: 13px;
}
.ks-button-hover {
color: @toolbarItemHoverColor;
background-color: @toolbarItemHoverBackgroundColor;
border-right-color: @toolbarItemHoverBorderColor;
}
.ks-button-checked,
.ks-button-active {
color: @toolbarItemCheckedColor;
background-color: @toolbarItemCheckedBackgroundColor;
padding-left: 13px;
border-left: 0;
box-shadow: @toolbarItemCheckedShadow;
}
.ks-menu-button-dropdown {
border-top-color: @toolbarDropdownBackgroundColor;
}
.ks-button-hover .ks-menu-button-dropdown {
border-top-color: @toolbarDropdownHoverBackgroundColor;
}
.ks-menu-button-open {
color: @toolbarItemOpenColor;
background-color: @toolbarItemOpenBackgroundColor;
border-color: @toolbarItemOpenBackgroundColor;
}
.ks-menu-button-open {
.ks-menu-button-dropdown {
border-top-color: @toolbarDropdownOpenBackgroundColor;
}
}
}
最好欢迎你的建议!
- 查看图片附件