foundation之顶部工具栏-Web前端之家

最近一段时间实在是太忙了,公司事情多,自己的事情也多,都没时间更新博客了。项目基本完成,腾出点时间更新下博客了。

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

今天谈的内容还是Foundation,先前发布过二篇文章了。下面就说下第三章-Foundation之导航栏详解。一个前端框架是否优秀,其中看该框架如何处理导航栏。我们先来看几种形式用javascript工具实现效果的导航栏。我还会介绍另一种有益于你更好地成为Foundation开发者、很有用的工具。废话少说,进入正题:

基本架构

我们先介绍下一款插件:section插件:

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

Foundation提供其中一个最好的javascript插件就是Section:类似于tabs有选择性地,在同一时间内显示一块页面内容。Section主要以几种形式的导航栏出现,如手风琴式导航,tabs,
垂直和水平导航。效果如下图:

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

Section1

接着在

Contentofsection1.

里面添加一个

Section2

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

Contentofsection2.

备注:如果你只想显示“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

不管你打算创建哪种形式的Section,都要以

开头,这个data-section属性声明我们正在使用哪种Section,class:auto指明使用Foundation默认的风格:手风琴。如果想使用上其他风格的话,可以把auto改为tabs,accordion,vertical-nav或者是horizontal-nav。最后给data-section赋上相同class值,来确认你用对特定形式的section。

接下来需要添加

块,里面添加一个title和该title链到内容的链接:

Section1

Contentofsection1.

从上面代码可以看出每个Section都是有

容器包含着。还有一个

标签,添加class为title,
链接链到相对应的内容。接着下面包含的是Section要显示内容块,需要添加class为content,
重复多个

内容就可以创建多个Section了。

备注:添加class名vertical-nav或者horizontal-nav时,在大屏幕上正常显示垂直或者水平的导航栏,但遇到小屏幕时就会自动转换成accordin风格导航。

深层链接

假设你想默认链接到第二个section,但是当你打开页面时,它还是默认显示第一个section的内容。不用纠结!Foundation本身就提供了解决方案,方案就是需要添加一个新的属性值:data-options=”deep_linking:true”在外面的section容器。当用户浏览一个有锚点的url时,例如

Section1

Contentofsection1.

Section2

Contentofsection2.

从上面的代码,应该注意到在

这个内容div里面添加了一个新属性为data-slug,是用来告诉Foundation加载页面时,先显示哪个Section。侧导航

Foundation的侧导航通常被包含在内容div里面。它的html架构也是非常简单的,而且可以使用divider分区分。看如下代码所需要的标签:

Link1

Link2

Link3

Link4

代码显示的是一段标准的无序列表,包含一系列内嵌链接的子项。无论你想要什么,添加关键class:side-nav到ul,然后在li里添加class:active表明当前显示的子项链接。如果你想区分子项,就可以添加一段

代码来显示分界线。子导航

Foundation的子导航通常用来过滤、挑选特定的内容。但是子导航并不是像前面那样使用无序列表,而是使用描述列表。这样的好处就是有选择地使用描述标签来定义特定术语包含链接。这里就不能使用divider了,但依然还是用使用class:active,见代码如下:

Filter:

All

Photos

Videos

Music

分页功能

分页功能也是导航中的一种;事实上,分页应该被包含在

元素当中,Foundation使用哪些标记来实现分页,见如下代码:

«

1

2

3

4

12

13

»

分页中左右两侧通常都用箭头表示,那就需要用到class:arrow,左侧内容上使用左箭头:«或者‹,甚至←右侧使用右箭头:»
,或者 ›,甚至→,更多字符编码到unicode-table.com来查找。

分页导航允许我们使用class:unavailable 和
current,分别表示不可用状态和当前使用状态。

上面段代码添加到如WordPress的内容管理系统中去是相当简单的。

提示:你可以给ul添加一个class:pagination-centered来居中分页导航,就好像Foundation所有元素那样,分页功能是响应式并且很容易去改变样式的。

有用的工具

使用响应式前端框架,如Foundation,是一种快速的途径使得你的工程很好地显示在所有的设备上,但是测试页面依然是一件繁琐的任务。为了减轻测试工作,我开发了一个工具叫
Respondr,只要输入url,就可以把内容显示在智能手机、平板电脑和普通电脑上,可以很快地发现页面上的不足。

总结

这章节就说到这里,现在您是否对Foundation有了一定的了解了呢。后面在第四章学习顶栏插件、面包屑导航和另外一些有用工具。如您有任何问题可以给我留言,猛搓这里:在线留言

发表评论

电子邮件地址不会被公开。 必填项已用*标注