Section主要以几种形式的导航栏出现,Foundation的顶

作者:mgm娱乐

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

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

基于 jQuery 实现垂直滑动的手风琴效果,jquery手风琴

  今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果。其主要思想是扩大手风琴片上的点击和显示更多的信息。其他内容片段将变得不那么透明。当使用一个导航箭头导航下一个片段,新的片会从顶部或底部滑动。

 

 

效果演示     插件下载

 

HTML 示例代码:

<div id="va-accordion" class="va-container">
    <div class="va-nav">
        Previous
        Next
    </div>
    <div class="va-wrapper">
        <div class="va-slice va-slice-1">
            <h3 class="va-title">Marketing</h3>
            <div class="va-content">
                <p>Henry Watson</p>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>
        <div class="va-slice va-slice-2">
            ...
        </div>
    </div>
</div>

JavaScript 示例代码:

$('#va-accordion').vaccordion({
    accordionW      : $(window).width(),
    accordionH      : $(window).height(),
    visibleSlices   : 5,
    expandedHeight  : 450,
    animOpacity     : 0.1,
    contentAnimSpeed: 100
});

  

您可能感兴趣的相关文章

  • Web 开发中很实用的10个效果【源码下载】
  • 精心挑选的优秀jQuery Ajax分页插件和教程
  • 12个让人惊叹的的创意的 404 错误页面设计
  • 让网站动起来!12款优秀的 jQuery 动画插件
  • 十分惊艳的8个 HTML5 & JavaScript 特效

 

本文链接:学习基于 jQuery 实现垂直滑动的手风琴效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

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

基本架构

高分jquery 手风琴效果实现代码

$("#topBox li").toggle(function(){
$(this).find("ul").show();

},function(){
$(this).find("ul").hide();
});  

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

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

个简单的jquery垂直手风琴菜单特效

<!doctype html>

<htmllang="en">
<head>
<metacharset="utf-8"/>
<title>jQuery UI Accordion - Default functionality</title>
<linkrel="stylesheet"href="code.jquery.com/...ui.css"/>
<scriptsrc="code.jquery.com/jquery-1.9.1.js"></script>
<scriptsrc="code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<linkrel="stylesheet"href="/resources/demos/style.css"/>
<script>
$(function() {
$("#accordion").accordion();
});
</script>
</head>
<body>

<divid="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
......余下全文>>  

jQuery 实现垂直滑动的手风琴效果,jquery手风琴 今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果。其主要思想是扩大手...

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风格导航。

深层链接

本文由mgm娱乐发布,转载请注明来源

关键词: