KISSY kisses bootstrap navbar

最新推荐文章于 2021-08-05 14:37:04 发布

原创最新推荐文章于 2021-08-05 14:37:04 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

framework / lib 专栏收录该内容

72 篇文章

订阅专栏

本文详细解析了如何使用Less重新实现浅色导航栏，深入探讨了Bootstrap在细节上的重视，包括状态变化、颜色搭配和布局调整，旨在为前端开发者提供实现类似导航栏的实用指南。

看了下 bootstrap 的导航菜单，立刻非常喜欢，注意是浅色的那个：

而不是黑色的那个：

由于浅色的导航css定义在 docs 中，故没有 less 源码文件可以参考，纯看 css 非常混乱，这次就用 less 重新实现了下浅色导航，实现后才发现 bootsrap 对于细节非常重视，其中样式状态非常之多，和之前搞的语法解析的状态有得一比。

html 代码

重新实现后的导航为 KISSY toolbar 组件，html 如下：

<div class="ks-toolbar>
	<div class="ks-menu-button ks-button">
		<div class="ks-menu-button-caption">menu-button</div>
		<div class="ks-menu-button-dropdown"></div>
	</div>
	<div class="ks-button">button</div>
	<div class="ks-menu-button ks-button">
		<div class="ks-menu-button-caption">menu-button2</div>
		<div class="ks-menu-button-dropdown"></div>
	</div>
</div>

包含下拉菜单的为 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;
        }
    }

}

最好欢迎你的建议!