`

创建具有固定导航功能的滑动单页面布局网站

阅读更多

日期:2013-9-17 来源:GBin1.com

创建具有固定导航功能的滑动单页面布局网站

在线演示 在线下载

建立简单网页时,倾向于将内容放在同一布局中,而非多个页面。这类单页面网站非常适用于在线展示一个小型项目或者作品集。如果把内容分割为几个整洁的部分,那么访问者可以使用滑动导航以便快速浏览页面。

本教程展示如何利用jQuery建立典型的滑动导航,有多种可替代的插件都可以实现同样的功能,并且很省时。但我们这次只使用了jQuery,然后用scrollTo插件优化了性能。点击下面的链接查看在线动画演示吧。

Demo与源代码下载

入手

首先下载jQuery的本地副本,并与其他脚本文件放在一起。还需要jQuery.scrollTo插件副本,它是一个单一的.js文件。我创建了两个替换文件index.htmlstyles.css,用于存放页面架构。我们首先来分析主要的内容。

 

<!doctype html> 
<html lang="en-US">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html">
   <title>Single Page Sliding Layout - Design Shack Demo</title>
   <meta name="author" content="Jake Rocheleau">
   <link rel="shortcut icon" href="http://designshack.net/favicon.ico">
   <link rel="icon" href="http://designshack.net/favicon.ico">
   <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
   <script type="text/javascript" src="js/jquery.scrollTo.js"></script> 
</head> 

 

头文件的内容应该简明扼要,不要繁琐复杂。索引文件使用HTML5文档类型,还有我们下载的样式表以及两个JS文件。显然还有其他可替代的来自定义滚动效果,但是在本教程中直接运用了插件就简单许多了。在页面HTML中我们可以看到如何设置导航。

 

<div id="w">
   <div id="content">
     <nav id="stickynav">
       <ul id="nav" class="clearfix">
         <li><a href="#topbar">Homepage</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#photos">Photos</a></li>
         <li><a href="#contact">Contact</a></li>
       </ul>
     </nav> ........

 

结语

简单网页不需要复杂的菜单系统,利用本文介绍的技术可以帮助组织网页内容。我希望本教程能够帮助开发者创建简单的页面布局。jQuery是可扩展的,且很容易被扩展这个代码库到你自己的jQuery插件中。欢迎下载我的源代码,将这个效果运用到以后的作品中。

via极客标签

 

来源:创建具有固定导航功能的滑动单页面布局网站

分享到:
评论

相关推荐

    横向滑动导航

    此外,ViewPager还支持添加头部和尾部视图,使得在顶部或底部添加固定导航栏成为可能。 在"顶部横向导航栏的效果"中,ViewPager经常被用作实现这种效果的主要工具。通常,顶部的导航栏会包含一系列的图标或文字,每...

    Android导航菜单图片viewpage滑动

    为了使顶部的单张图片具有滑动效果,我们需要自定义一个`ViewPager`的子类或者适配器,将图片设置为`ViewPager`的页面,然后通过监听滑动事件来处理图片的切换。 第二个知识点是**仅滑动图片,不滑动页面内容**。在...

    JQUERY固定在网站固定位置下拉自动隐藏 上滑动显示导航菜单.rar

    本资源“JQUERY固定在网站固定位置下拉自动隐藏 上滑动显示导航菜单.rar”显然关注的是一个特定的JavaScript(JS)特效,利用jQuery库实现了一个智能且互动的导航菜单。jQuery是一个轻量级的JavaScript库,它简化了...

    仿照滴滴打车底部滑动条

    - **底部导航栏**:设计一个固定在屏幕底部的水平布局,包含多个图标和文字标签,每个代表一个功能模块。 - **选中状态**:当用户切换到某个模块时,对应的图标和文字应有明显的选中状态,如改变颜色、添加下划线...

    23种Bootstrap导航菜单布局设计jQuery插件

    jQuery插件在Bootstrap中的作用在于增强JavaScript功能,使导航菜单具有动态效果和交互性。例如,Bootstrap的.navbar-collapse类允许菜单在小屏幕设备上折叠和展开,这背后的实现就依赖于jQuery。通过监听窗口大小...

    [Android] 使用Include布局+Fragment滑动切换屏幕(源代码)

    例如,在多个页面都需要一个导航栏或者底部菜单时,我们可以创建一个单独的布局文件,然后在需要的地方使用`&lt;include&gt;`标签将其包含进来。`Include`的语法如下: ```xml ``` `Fragment`是Android SDK引入的一个...

    CSS实现导航固定的、左右滑动的滚动条制作方法

    在网页设计中,创建一个固定在顶部且支持左右滑动的导航栏是一个常见的需求,尤其在移动设备上,这样的设计可以有效地节省屏幕空间并提供良好的用户体验。本文将详细讲解如何使用CSS来实现这一功能。 首先,为了...

    Android ScrollView向上滑动控件顶部悬浮效果实现

    本文将详细讲解如何实现ScrollView向上滑动时,控件顶部悬浮的效果,这种效果通常被称为“头部固定”或“吸顶”效果,常见于各种应用的导航栏或者工具栏。 首先,我们需要理解这个效果的基本原理。当用户在...

    AndroidStudio-Tablayout滑动TAb

    在Android开发中,TabLayout是谷歌Material Design设计规范中的一部分,用于实现标签页切换功能,为用户界面提供清晰的导航。本教程将详细介绍如何在Android Studio中使用TabLayout实现滑动标签页。 首先,让我们...

    android使用ViewPager实现底部菜单栏和左右滑动效果,加载多个Activity

    在Android应用开发中,创建一个具有底部菜单栏和左右滑动切换内容的界面是一个常见的需求。这个需求可以通过结合使用ViewPager和Fragment来实现,同时利用底部导航栏(BottomNavigationView)为用户提供直观的操作...

    侧边栏+滑动列表

    将侧边栏与滑动列表结合起来,可以创建出高效的导航结构。例如,在侧边栏中,用户可以选择不同的类别或标签,然后在主内容区域显示相应的滑动列表。这种设计常见于电商应用,用户可以通过侧边栏选择商品类别,滑动...

    Android源码——系统主界面下方的小按钮滑动效果--SlideD.zip

    这个区域通常包含几个固定的功能图标,如主屏幕、应用抽屉、最近应用等,用户可以通过点击或者滑动这些图标在不同的应用程序或功能间切换。在Android源码中,这部分的实现涉及到Android UI框架的底层逻辑,包括View...

    使用 TabActivity 实现滑动翻页(带动画)和标签置底

    一种可能的解决方案是自定义一个底部导航栏,这可以通过创建一个包含底部`LinearLayout`或`RelativeLayout`的布局,并添加多个按钮(每个代表一个标签)来实现。通过监听这些按钮的点击事件,可以改变`TabActivity`...

    安卓Android源码——模仿微信导航页效果源码.zip

    结合TabLayout,我们可以创建出具有标签指示器的导航栏,用户可以通过点击不同的标签或滑动页面在不同模块间切换。TabLayout提供了多种模式,例如固定、滚动和堆叠,可以根据应用的需求选择合适的样式。 接下来,...

    网页布局组件

    网页布局组件是构建网站界面的重要元素,它们负责组织和展示页面上的内容,如文本、图像、视频等。在Web开发中,布局组件的设计和选择直接影响到用户体验和网站的整体视觉效果。"Wyre"是一个提供了126种不同网页布局...

    jquery宽屏图片滑动切换效果代码.zip

    在网页设计中,轮播通常由一组图片组成,这些图片在页面的一个固定区域(如banner)内按照一定的顺序和间隔自动播放,用户也可以通过点击导航按钮来手动切换。这种效果可以吸引用户的注意力,同时节省网页空间。 在...

    【Android进阶】(6)Activity启动模式和窗口导航

    - FragmentPagerAdapter适合页面数量固定且不经常改变的场景,因为它不会重建已创建的Fragment。 - FragmentStatePagerAdapter则适用于页面数量多或频繁变化的情况,会根据需要销毁和重建Fragment,节省内存。 3....

    javascript经典特效---固定的左侧导航菜单.rar

    这个"javascript经典特效---固定的左侧导航菜单.rar"压缩包文件包含了一个实现这一功能的实例,主要涉及到的知识点有: 1. **CSS定位**:在实现固定侧边栏菜单时,通常会用到CSS的`position`属性。`position: fixed...

    仿照苹果横向动态导航

    这种导航方式通常用于展示多个类别或者页面之间的切换,让用户在不同的内容之间轻松滑动浏览。 在iOS的设计哲学中,简洁和一致性是关键。苹果的横向动态导航通常体现在App的底部,如“标签栏”(Tab Bar),它提供...

    Android高级应用源码-ViewPager仿微信分页导航,多Activity载入.zip

    【标题】"Android高级应用源码-ViewPager仿微信分页导航,多Activity载入.zip" 涉及到的核心知识点是Android开发中的ViewPager组件以及如何实现类似微信的分页导航功能,同时涉及到多个Activity的管理和交互。...

Global site tag (gtag.js) - Google Analytics