导航栏菜单按钮 - 样式

菜单按钮的CSS样式会在不同的设备上继承,从大到小。

在桌面电脑模式下的CSS样式,会继承到后面所有的设备中。在平板电脑模式下的CSS样式,会覆盖桌面电脑下的样式,同时被手机模式继承。以此类推。

推荐从桌面电脑模式开始设置CSS,从大到小,可以尽可能地复用之前的CSS设置,方便管理,提高效率。

不仅仅是菜单按钮,设置其他盒子的CSS,也推荐按照同样的方法,从桌面电脑先开始,最后是手机。

按钮样式

由于默认设置中,菜单按钮从平板电脑开始才会显示,我们就从平板电脑开始设置它相关的样式。

切换到平板电脑设备模式。选中「Menu Button 菜单按钮」盒子。切换到「Styles 样式」面板。向下滚动找到「Background 背景」,给它设置一个背景色浅蓝色 #b2e0ff。

练习题:给按钮设置一个hover状态下的背景色。

设置完成后,要取消hover状态。

汉堡图标样式

WebFlow的图标是使用「Typography 文字排版」来设置样式。

保持选中「Menu Button 菜单按钮」盒子。在「Styles 样式」面板上找到「Typography 文字排版」。

修改字号可以改变图标的大小。

修改文字颜色可以改变图标的颜色。我们把它改为深蓝色 #005c79。

由于「Icon 图标」盒子会继承「Menu Button 菜单按钮」盒子的样式,所以刚刚的修改也会全部反应在「Icon 图标」盒子上。

为什么我们不直接选择「Icon 图标」盒子设置样式?

设置CSS样式的时候有一条原则:尽可能在最外层的盒子设置样式,让内层盒子继承。

遵循这个原则有三个好处:

  1. 代码量减少 - CSS会被内层盒子继承
  2. 方便维护 - CSS互相覆盖的可能性降低
  3. 网站加载快 - 因为代码量减少,CSS文件变小,网站速度变快

按钮打开后的样式

除了可以给按钮默认状态和hover状态设置不同的样式外,还可以给打开状态设置样式。

当点击「Open Menu 打开菜单」按钮时,实际上,「Menu Button 菜单按钮」动态添加了一个打开状态的class。

因此,只要确认「Open Menu 打开菜单」的按钮激活,就可以针对打开状态的菜单按钮设置不同的样式。

步骤如下:

选中「Menu Button 菜单按钮」盒子。切换到「Settings 设置」面板。点击「Open Menu 打开菜单」按钮,让菜单打开。

切换到「Styles 样式」面板。再次选中「Menu Button 菜单按钮」盒子。

一定要看到「Open」绿色的class出现,说明现在是「打开」状态,再设置CSS样式。

如果没有看到绿色class,确认菜单处于打开状态,再选中一次「Menu Button 菜单按钮」盒子,一般就会出现。

接着,向下滚动找到「Typography 文字排版」,把文字颜色设置为白色。

找到「Background 背景」,把背景色设置为深蓝色 #005c79。

点击预览,观看效果。

results matching ""

    No results matching ""