大概占40%的项目使用了顶部工具栏

日期:2020-03-26编辑作者:北京pk赛车网站-web前端

这章我们要学的是foundation之顶部工具栏。Foundation的顶部工具栏是一个非常小巧有用的组件,但不是意味着在你的工程中就一定要使用它。我估计,在使用Foundation来开发 过的项目中,大概占40%的项目使用了顶部工具栏。你该认真分析项目需求来决定是否应该使用顶部工具栏;顶部工具栏组件是很容易改变样式的,但是交互功能 就比较固定了。

基本架构

为了实现顶部工具栏,我们需要一个

标签,这标签包含一个必须的class为“top-bar”

接着在

里面添加一个

  • ,其中一个
  • 来显示这个菜单的标题或者logo。

备注:如果你只想显示“MENU”或者“三横”,就可以去掉menu-icon,或者是标签内容“Menu”。

TopBarTitle

Menu

添加父链接

添加父链接是我们接下来要做的,关闭之前需要添加一个

标签,在这个section中需要添加一个无序列表。

在这里,依然允许你使用“divider”来区分列表,可参考下面的代码示例:

MainItem1

MainItem2

从代码中注意到,

中有个class为left,用来控制在左侧显示导航内容。甚至可以添加两个菜单链接,左右(class="right")显示导航内容。

到目前为止,我们所添加的代码可以水平地显示在顶部工具栏上,在小屏幕的设备上,将会变成一个下来菜单,点一下“MENU”或者“三横”按钮就可以显示出来。

添加子菜单

每个li项可以内嵌一个无序列表作为子菜单。为了实现这个功能,父链接必须添加一个class为has-dropdown,内嵌的ul必须添加class为dropdown:

MainItem3

DropdownLevel3Label

DropdownLevel3a

DropdownLevel3b

DropdownLevel3c

备注:为了标记当前链接处于激活状态,可以添加active。

子菜单在大屏幕下显示为标准的下拉菜单,而在小屏幕则显示为“滑动块”。

附加设置

尽管被叫为“顶部”栏,其实你可以放置在你的布局任何地方。如果你想固定住这“顶部”栏,就需要添加一个div,并添加class为“fixed”,来包含顶部工具栏。再或者,你可以添加class“contain-to-grid”在主容器中来控制顶部工具栏的宽度,更方便的是,可以同时使用两者。

假设你想顶部工具栏居于布局中间,当用户向下滚动的时候,并固定在页面的顶部,这时可同时使用class“contain-to-grid”和“sticky”。

添加一个搜索输入框

如果这些功能还不能满足你,你可能还需要一个输入框来作为搜索功能、邮箱注册功能、或者其他内容。我们需要在菜单列表项中添加一个带有 class“has-form”的li。见下面的代码,我们在顶部工具栏中运用了网格功能。这使得很容易去布局元素——当然也能响应式,因为网格的列在小 屏幕上发生转变。

面包屑导航

面包屑导航在CMS系统页面中是很常见的,例如WordPress,其中一些多层次的页面在使用起来有点复杂。在任何一个基于Foundation的项目中使用面包屑导航是很容易的,在

  • Home
  • Features

本文由北京pk赛车官网下载发布于北京pk赛车网站-web前端,转载请注明出处:大概占40%的项目使用了顶部工具栏

关键词:

我添加两列

让我们继续为基于Foundation的项目添加更多的功能,如将学习Joyride插件,该插件帮助引导用户来使用你的站点;还会学...

详细>>

想要让用户在移动端也能浏览PC网站

现在浏览网页的终端越来越多了,尤其是在移动端的比例越来越重了,并且用户体验越来越高,从而导致对产品要求...

详细>>

关于响应式设计布局

关于响应式设计布局,响应式设计当仁不让地成为了设计师/开发者们的青睐了,而采用上佳的响应式网站测试工具则...

详细>>

index.html文件里面已经预包含一些HTML代码

Zurb开发的第5版本Foundation使得顶部工具栏表现为非常突出,出色的顶部工具栏差不多成为一个由Foundation搭建起来网站...

详细>>