• ,在那之中一个
  • 来呈现这么些菜单的标题也许logo。

标签,这标签包蕴二个须求的class为“top-bar”

中间增加一个

接着在

为了兑现顶端工具栏,我们必要叁个

备注:设若你只想体现“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

那章我们要学的是foundation之最上端工具栏。Foundation的最上部工具栏是多少个那些精致有用的组件,但不是象征在您的工程中就势必要动用它。小编猜想,在运用Foundation来开辟过的项目中,大概占百分之四十的品种接受了最上部工具栏。你该认真深入分析项目须求来决定是不是相应接受最上端工具栏;顶端工具栏组件是相当轻易改造样式的,不过相互作用就相比较原则性了。

相关文章

网站地图xml地图