初学Foundation之导航栏

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

本文由Spy根据的《Foundation for Beginners: Navigation》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-navigation,以及作者相关信息

——作者:

——译者:Spy

一个前端框架是否优秀,其中看该框架如何处理导航栏。初学Foundation,我们先来看几种用javascript工具实现效果的导航栏。我还会介绍另一种有益于你更好地成为Foundation开发者、很有用的工具。

Section 插件

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

初学Foundation之导航栏

初学Foundation之导航栏

见如下代码:

<div class="section-container auto" data-section>
    <section>
        <p class="title" data-section-title><a href="#">Section 1</a></p>
        <div class="content" data-section-content>
            <p>Content of section 1.</p>
        </div>
    </section>
    <section>
        <p class="title" data-section-title><a href="#">Section 2</a></p>
        <div class="content" data-section-content>
            <p>Content of section 2.</p>
        </div>
    </section>
</div>

这段代码可能比前面章节都要复杂些,我来解释一下:

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

接下来需要添加<section>块,里面添加一个title和该title链到内容的链接:

<section>
    <p class="title" data-section-title><a href="#panel1">Section 1</a></p>
    <div class="content" data-section-content>
        <p>Content of section 1.</p>
    </div>
</section>

从上面代码可以看出每个Section都是有<section>容器包含着。还有一个<p>标签,添加classtitle, <a>链接链到相对应的内容。接着下面包含的是Section要显示内容块,需要添加classcontent, 重复多个<section>内容就可以创建多个Section了。

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

深层链接

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

初学Foundation之导航栏

<div class="section-container auto" data-section data-options="deep_linking: true">
    <section>
        <p class="title" data-section-title><a href="#section1">Section 1</a></p>
        <div class="content" data-slug="section1" data-section-content>
            <p>Content of section 1.</p>
        </div>
    </section>
    <section>
        <p class="title" data-section-title><a href="#section2">Section 2</a></p>
        <div class="content" data-slug="section2" data-section-content>
            <p>Content of section 2.</p>
        </div>
    </section>
</div>

从上面的代码,应该注意到在<div class="content" data-slug="section1" data-section-content>这个内容div里面添加了一个新属性为data-slug,是用来告诉Foundation加载页面时,先显示哪个Section

侧导航

Foundation的侧导航(一种类似于垂直导航)通常被包含在内容div里面。它的html结构也是非常简单的,而且可以使用divider(分界线)分区分。看如下代码所需要的标签:

<ul class="side-nav">
    <li class="active"><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="divider"></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
</ul>   

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

初学Foundation之导航栏

子导航

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

<dl class="sub-nav">
    <dt>Filter:</dt>
    <dd class="active"><a href="#">All</a></dd>
    <dd><a href="#">Photos</a></dd>
    <dd><a href="#">Videos</a></dd>
    <dd><a href="#">Music</a></dd>
</dl>

初学Foundation之导航栏

分页导航

分页导航也是导航中的一种;事实上,分页应该被包含在<nav>元素当中,Foundation使用哪些标记来实现分页,见如下代码:

<ul class="pagination">
    <li class="arrow unavailable"><a href="">&laquo;</a></li>
    <li class="current"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li class="unavailable"><a href="">&hellip;</a></li>
    <li><a href="">12</a></li>
    <li><a href="">13</a></li>
    <li class="arrow"><a href="">&raquo;</a></li>
</ul>

分页中左右两侧通常都用箭头表示,那就需要用到class:arrow,左侧内容上使用左箭头:&laquo;或者&lsaquo;,甚至&larr;右侧使用右箭头:&raquo;,或者&rsaquo;,甚至&rarr;,更多字符编码到unicode-table.com来查找。

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

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

初学Foundation之导航栏

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

有用的工具

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

初学Foundation之导航栏

下一篇预告

到目前为止,我们学习了网格系统、块网格、Orbit滑动插件,Section插件和三种形式导航,下一篇我们将学习顶栏插件、面包屑导航和另外一些有用工具。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

关于Spy

原名吴建杰,常用昵称“间谍”,现居广州。目前不断学习CSS3,HTML5等前沿技术,巩固js基础知识。在进行前端开发的过程中,追求HTML便签语义化,CSS的重用性,js封装等很多性能优化的操作,一切以用户体验为基础,不断地追求性能优化。希望与更多的同行朋友一起共勉:个人博客,新浪微薄

如需转载,烦请注明出处:

英文原文:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/foundation-for-beginners-navigation/

中文译文:http://www.w3cplus.com/css/foundation-for-beginners-navigation.html

jordans for sale dress

如需转载,烦请注明出处:https://www.w3cplus.com/css/foundation-for-beginners-navigation.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部