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

Zurb开发的第5版本Foundation使得顶部工具栏表现为非常突出,出色的顶部工具栏差不多成为一个由Foundation搭建起来网站的象征元素。今天我们将学习如何通过不同方式去实现它,把它放置在页面的其他地方,让你拥有自定义样式和响应式的水平导航菜单。

首先我们将需要最新版本的Foundation。解压源码包并且把所有的文件放置在你的工程或者测试目录下。我们将直接使用index.html文件,创建一个style.css样式文件将用来重写顶部工具栏的样式来达到自定义导航栏效果。

搭起HTML结构

第一步:常用的模板

index.html文件里面已经预包含一些HTML代码。你可以保留

里面的代码,也可以保留所有的脚本链接。保留这些来确保Foundation的网格系统和顶部工具栏可以运行起来。

你可以删掉其他内容代码,我们将采用一种全部宽度的设计,这不是很复杂的,只是需要想到更好的办法来处理它。

好的,我们将编写header、导航、主内容和footer区域的内容,我们将给每个区域都添加class=”full-width”,然后再添加一个块元素

,块元素里面再添加一个块元素

,这也就是搭起基本的网格结构。

备注:更多关于网格系统如何运行的,可以回顾教程第二章:WEB前端框架-Foundation之网格系统

Foundation-4CustomTopBar

Loremipsumdolorsitamet,consecteturadipisicingelit.Harum,asperiores,voluptas,veniamcommodiimpeditteneturdolorescumquefacereexplicaboessequaeratveritatislaboriosameiusmodiametmaximenonofficianemo?Iste,quisquam,voluptatum,dolornamreiciendisundealiquamnumquamnecessitatibusodioetperspiciatisfacerenihilinventoreullamaspernaturcorporisveritatisquiadolorum?Sed,hic,eosquisquibusdameumautoptiorepudiandaeat!Eligendi,nequerationealiasenimquaemagnamdoloresessepariaturearumlaborumreiciendisnobissuntsequisapienteducimusiureipsam.Sapiente,minima,rerum,facerequossaepepariaturmagnidoloremcumametnemoquislaborumipsadignissimosducimusinventoremodiremcumquequibusdamquamasperiores!Optio,nobissuscipitmolestiasvoluptasveritatisaspernaturaccusamusexcepturiremquaeratimpeditanimivoluptateatfacilisaliquidcumfugitlaboreomnisprovidentrecusandaeautem.Doloribus,mollitiaquosofficiisquassapientenamdolorpraesentiummaximecupiditateillum?Rem,esse,nullavitaeadipiscisequidelenitiquasi!

©2014

第二步:顶部工具栏标记

在编写样式之前,我们需要编写出一些必须的HTML结构代码使得Foundation顶部工具栏能够正确地运行起来。因此需要5样基础元素使得引擎跑起来。

= 为了增强在手机布局上的菜单。

现在我们用这5样基础元素来搭建基础框架并且实现功能。

备注:在此教程例子中,我们将创建一个自定义的导航菜单,因此删除一些包括logo、文本和图片的标题。因此从下面代码例子可以看到在块元素

里的

里面是空的。

接着,我们来添加一些菜单元素和一个下拉菜单代码,在你想添加下拉菜单的li元素里添加class=”has-dropdown”,然后在里面包含下拉菜单代码

。如果想表示当前使用状态的li,则需要添加”active”。

Menu

Home

Aboutus

Ourproducts

Portfolio

Blog

Prices

Features

Modalboxes

Submenu’sandnavigation

Pricetables

Buttons

Buttongroups

Labels,KeystrokesandTooltips

Alertboxes

Columns

Contact

第三步:目前效果

现在可以在你的浏览器上看到目前的效果,基于Foundation框架使用顶部工具栏我们已经创建一个水平菜单。为了方便把菜单放置到其他地方,而不是固定在浏览器的顶部,我们需要在以上代码外层添加网格的

当你在调整浏览器窗口时,会发现菜单栏在预先设定的断点发生改变。

接下来着手编写自定义样式,将关注如何去编写顶部工具栏的样式和可以使用哪些class。

编写CSS

第一步:通用样式

如果你还没做好准备,可以创建一个css文件,命名为style.css并且放置到下载下来的Foundation工程下css文件夹下。但别忘记把此引用到index.html文件里。如下代码示例:

Foundation4

这里如果你不把style.css放置在foundation.css下面,将不会覆盖原来顶部工具栏的样式。

很好,接下来我们要为header、导航、内容和footer写一些基础样式,如导航块,我们将添加一张已经下载好的背景图。这些通用样式一般不是很难去实现的,见如下代码示例,我们添加一个class”full-width”到每个区域中,以致于每个区域的宽度都是占满浏览器宽度的。

background-color:#ccc;

/**Setthebackgroundsforthedifferentsections**/

.header-area{

background-color:#2d465c;

min-height:160px;

.navigation-area{

background-image:url(‘../img/navigation-container.jpg’);

background-repeat:repeat-x;

.content-area{

padding:50px070px0;

.footer-area{

background-color:#1f1f1f;

color:#fff;

min-height:50px;

padding:20px000;

.full-width{

min-width:100%;

position:relative;

color:#fff;

font-weight:normal;

margin-top:50px;

第二部:顶部工具栏样式

现在看一下效果,会发现菜单会往外偏移一点,原因就是使用默认的样式,接下来修复这个问题!

有一些样式类是需要修改以达到想要的效果。首先,我们将在.top-bar和.top-bar-section
li里移除黑背景,改变height和line-height为58px。如下代码,可看注释帮助理解。

/**Changesbackgroundcolor,heightandmarginoftheborder**/

background:none;

height:58px;

line-height:58px;

margin-bottom:0;

/**Removesblackbackgroundonmenubar**/

.top-bar-sectionul{

background:none;

text-transform:uppercase;

/**Removesblackbackgroundonmenuitem**/

.top-bar-sectionlia:not{

background:none;

line-height:58px;

padding:027px;

我们已经移除黑背景了,并且适应高度、行高和内边距,将文字转化为大写字母,这些都是为了适应我们自定义设计。

如果你进行刷新页面,可以看到出现雏形了,我们继续编写下拉菜单、菜单子项目、激活的状态的样式吧。继续往下看代码示例,并阅读注释:

/**Changestheactivemenuitemfromdefaultblacktoagradient**/

.top-bar-sectionulli.active>a{

background:rgb;

background:linear-gradient(tobottombottom,rgba0%,rgbarepeatscroll00transparent;

color:#fff;

/**Changesthehoverstateofnonactivemenuitems**/

.top-bar-sectionli:hovera{

background:linear-gradient(tobottombottom,rgba0%,rgbarepeatscroll00transparent;

color:#网赌正规网站网址,fff;

/**Changesnonactivemenuitemstextcolortoblack**/

.top-bar-sectionulli>a{

color:#2d2d2d;

/**Changesthehoverstateofdropdownmenuitems**/

.top-bar-sectionul.dropdownlia:hover:not{

background:nonerepeatscroll00rgba;

/**IMPORTANTfillfortheuldropdowncontainer**/

.top-bar-sectionul.dropdown{

background:#333;

color:#fff;

/**Thisfixesthepositionandthecolorofthedropdownarrow**/

.top-bar-section.has-dropdown>a:after{

border-color:rgbatransparenttransparent;

margin-top:2.5px;

我们已经改变菜单的好几个地方,如首先,我们就改变激活菜单默认的黑背景为“CSS渐变”,接着给不激活菜单添加hover状态,并改变里面的文字颜色为深灰色,目的是显示得更为清晰。然后.top-bar-section
li:hover
的样式将使得下拉菜单里的子项目被鼠标悬空时显示特定效果。为了完善样式,我们ul.dropdown添加一个背景颜色和重新设置下拉菜单箭头的位置,是因为我们内边距适应.top-bar-section。

第三步:效果

重新刷新页面,看一下现在的效果,我们还没完成样式的编写,只是想看看当调整浏览器的大小时,页面效果是否显示正常。接下来我们将添加“媒体查询”代码来实现这种效果。

编写媒体查询

第一步:媒体查询

我们需要做些操作来使得使用我们自定义样式的菜单栏能够适应不断缩小的屏幕。这里主要涉及到添加一些内边距、行高、文本颜色和背景颜色。如下CSS代码示例,查看每个section的注释。

@mediaonlyscreenand{

/*Makestheresponsivemenufitinthenavigationcontainerandchangeitsbackgroundtoblack*/

.top-barul{

background-color:rgba;

padding-bottom:13px;

/*Changenonactivemenuitemcolortoblack*/

.top-bar-sectionulli>a{

color:#fff;

/*Givesthedropdownulablackfill*/

.top-bar-sectionul{

background:#000;

/*GivetheBACKbuttonaftergoinginasubmenutheappropriatefilling*/

.top-bar-section.dropdownli.titleh5a{

line-height:57px;

/*Thisfixesthepositionandthecolorofthedropdownarrow*/

.top-bar-section.has-dropdown>a:after{

border-color:rgbatransparenttransparent;

margin-top:2.5px;

}/*endmediaquery*/

第二步:享受你的效果

保存文件,然后重新刷新页面,不断地调整浏览器窗口的大小,你就会看到菜单栏都能很好地展示出来。

总结

最后,总结一下此教程:我们如何利用Foundation5框架里的顶部工具栏来创建一个自定义菜单。需要记住的一点是,菜单栏不一定要被放置在页面的顶部的,可以使用网格系统来包含它,然后就可以放置任何你想放置的地方。

Foundation是一系列非常有用的工具可以快速地创建起响应式网站设计,当你不断地熟悉Foundation这个框架,就可以更高效地、创意地创建出更多好玩的东西出来,继续努力吧!

相关文章

发表评论

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

网站地图xml地图