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

我不是女神ヾ 2022-10-09 12:26 153阅读 0赞

日期：2013-9-17  来源：[GBin1.com][]

![创建具有固定导航功能的滑动单页面布局网站][title.jpg]

[在线演示][Link 1]   [在线下载][Link 2]

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

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

[Demo][]与源代码[下载 ][Link 3]

## 入手 ##

首先下载[jQuery][]的本地副本，并与其他脚本文件放在一起。还需要[jQuery.scrollTo][]插件副本，它是一个单一的.js文件。我创建了两个替换文件***index.html***和***styles.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插件][jQuery 1]中。欢迎下载我的源代码，将这个效果运用到以后的作品中。

via [极客标签][Link 2]

###  ###

### 来源：[创建具有固定导航功能的滑动单页面布局网站][GBin1.com] ###

[GBin1.com]: http://www.gbin1.com/technology/jquerytutorial/20130917-single-page-nav/
[title.jpg]: http://www.gbin1.com/technology/jquerytutorial/20130917-single-page-nav/title.jpg
[Link 1]: http://www.gbtags.com/gb/demoviewer/1962/6546f98c-b05b-4d7d-889b-43b69039fcca/demo%7Cindex.html.htm
[Link 2]: http://www.gbtags.com/gb/share/1962.htm
[jQuery]: http://www.gbin1.com/bloghome.html?tag=jquery
[Demo]: http://designshack.net/tutorialexamples/single-page-slider/
[Link 3]: http://designshack.net/tutorialexamples/single-page-slider/single-page-slider.zip
[jQuery.scrollTo]: http://www.gbtags.com/gb/editpost.htm?postid=1962#github.com/flesler/jquery.scrollTo
[jQuery 1]: http://www.gbin1.com/bloghome.html?tag=jquery%E6%8F%92%E4%BB%B6