浙江 杭州

jQuery和css3简单实用的FAQ问答页面模板

系统分类: 网页特效 - jquery插件 - jQuery高级页面组件 2015-07-19

人气9888

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款简单实用的jQuery和css3 FAQ问答系统单页模板。该FAQ模板左侧的导航菜单会随着页面的滚动而移动到相应的选项上,设计得十分人性化。可用于FAQ系统或网站简介等。

如果你的系统需要这样一种用于为用户解答各种问题的FAQ系统,那么这个FAQ模板是你最好的选择。这个FAQ插件是响应式的,使用jQuery和css3制作,同时在不支持JAVASCRIPT的浏览器上也能正常工作。

HTML结构

html结构使用一个section .cd-faq作为wrapper。里面分割为两个部分: .cd-faq-categories .cd-faq-items。第一个用于导航,第二个用于放置问答列表。每一个.cd-faq-group是一个包含一组问题的无序列表。

<section class="cd-faq">
  <ul class="cd-faq-categories">
    <li><a href="#basics">Basics</a></li>
    <li><a href="#mobile">Mobile</a></li>
    <li><!-- ... --></li>
  </ul>
 
  <div class="cd-faq-items">
    <ul id="basics" class="cd-faq-group">
      <li class="cd-faq-title"><h2>Basics</h2></li>
      <li>
        <a class="cd-faq-trigger" href="#0">How do I change my password?</a>
        <div class="cd-faq-content">
          <!-- content here -->
        </div> 
      </li>
 
      <li>
        <a class="cd-faq-trigger" href="#0">How do I sign up?</a>
        <div class="cd-faq-content">
          <!-- content here -->
        </div> 
      </li>
 
      <li><!-- ... --></li>
    </ul>
 
    <ul id="mobile" class="cd-faq-group">
      <!-- ... -->
    </ul> 
 
    <!-- ... -->
  </div> 
</section>
                

CSS样式

这个demo的css样式非常简单,你可以下载文件来自行研究,特别需要指出的一点是,CSS样式中使用.no-js class来支持那些不支持javascript的浏览器实现效果。

使这个类工作的方法是:将.no-js放到<html>元素中。Modernizr 将移除这个class并将它更换为 .js class。你需要知道:如果Modernizr不工作(因为浏览器不支持javascript),你使用的是.no-js来制作你的样式。

JAVASCRIPT

对于屏幕小于768像素的浏览器,当用户点击了某一个问题的类别,我们为每一个faq项添加.slide-in类。

对于大屏幕,选项被选择时屏幕平滑的向下滚动。

当屏幕大于1024像素,我们为窗口的滚动绑定updateCategory() 事件。这个方法检测$(window).scrollTop()的值,如果用户滚动到比.cd-faq高的位置,就为.cd-faq-categories设置position: fixed,这样使它们在屏幕上一直处于可见状态。

查看演示
下载资源:4
下载资源
错误提交:

格式:zip 大小:28.52KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-927.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和css3简单实用的FAQ问答页面模板

我当前G币余额:0 已下载次数:4

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有1 评论)