固定/粘性/浮动顶部菜单导航栏的正确名称

时间:2014-06-20 06:26:35

标签: menu navigation webpage terminology user-experience

向下滚动页面时,顶部会出现一个菜单栏(可能位于其他位置)并停留在那里(固定<div>), 最正确的是什么 这个术语?如果您不知道我在说什么元素,请参阅Example1Example2Example3

我看过它有几个不同的术语:

  • 粘性菜单
  • 粘性工具栏
  • 浮动菜单
  • 浮动导航栏
  • TopMenu中
  • top menubar
  • 固定导航栏
  • 固定菜单
  • 真棒

但实际上, 它叫什么 ?并请,请给我“个人偏好”hogwash - 我需要一些真正的肉。让我们浮出一些可能性,浏览我们的选项,并修复一个坚持的观点。 ; - )

编辑注意:这是ON主题,因为我正在尝试以语义方式编码 - 我在课堂和变量名称中使用的是什么?

2 个答案:

答案 0 :(得分:1)

这实际上取决于你在做什么。

浮动

如果条形图被设置为风格或以其他方式编程以保持在特定介质上的特定位置,即使您滚动它,也可以说它是浮动的。否则,如果您想要明确,可以将其称为“静态”。

顶部,底部,左侧,右侧

不管它是否漂浮,它可能是其中任何一种......或者甚至在你的视线中间砸......虽然,这会很尴尬......

控制或导航

条形图是否包含分为层次结构的链接的分类列表?如果是这样,那么这是一个导航栏。它是否包含搜索框或其他选项?如果是这样,它就是一个控制栏,即使它也有导航元素。

栏或菜单

如果它从可视区域的最大或最突出部分的左侧延伸到该区域的右侧,或从该区域的顶部到底部,并且占用不到一半,则它将被称为它。该区域,无论是<div>还是其他。如果它没有在整个长度或至少其中很大一部分拉伸,您可能需要使用“菜单”而不是条形。

因此,如果您的栏中只有链接或下拉列表,其中包含指向站点不同部分的链接,并且位于浮动顶部,则它将是“浮动顶部导航栏”。

如果你有一个带有搜索框,收音机和链接的左侧栏,滚动时它不会浮动,它将是一个“静态左控制栏”或只是“左控制栏”。如果它没有延伸超过元素侧面的一半,我会更倾向于将其称为“左控制菜单”

您的用户不会关心您所说的内容,但维护您代码的任何人都至少知道您的目的是什么。

答案 1 :(得分:1)

它们都是固定导航栏,但是它们的行为有点不同,我想这些都是你要问的。

<强>粘性

当你向下滚动页面时,它会稍微改变,并且在z-index属性的基础上变为“浮动”。

<强>浮动

它总是浮动在顶部,带有z-index属性,这意味着即使在最顶端滚动,正文内容也在栏下。

<强>固定

始终在顶部,向下滚动时不会进行更改。