最新消息:申明:内容大部分为转发或者对自己有益的东西,旨在分享,记录,如果有涉及到侵权问题的,可及时与我联系,联系邮箱: yangwenjun61@sina.com

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

网站建设 yangwenjun 150浏览 0评论

文章目录[隐藏]

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

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

Demo与源代码下载 

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

  1. <!doctype html>
  2. <html lang=“en-US”>
  3. <head>
  4. <meta charset=“utf-8”>
  5. <meta http-equiv=“Content-Type” content=“text/html”>
  6. <title>Single Page Sliding Layout – Design Shack Demo</title>
  7. <meta name=“author” content=“Jake Rocheleau”>
  8. <link rel=“shortcut icon” href=“http://designshack.net/favicon.ico”>
  9. <link rel=“icon” href=“http://designshack.net/favicon.ico”>
  10. <link rel=“stylesheet” type=“text/css” media=“all” href=“css/styles.css”>
  11. <script type=“text/javascript” src=“js/jquery-1.10.2.min.js”></script>
  12. <script type=“text/javascript” src=“js/jquery.scrollTo.js”></script>
  13. </head>

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

  1. <div id=“w”>
  2. <div id=“content”>
  3. <nav id=“stickynav”>
  4. <ul id=“nav” class=“clearfix”>
  5. <li><a href=“#topbar”>Homepage</a></li>
  6. <li><a href=“#about”>About</a></li>
  7. <li><a href=“#photos”>Photos</a></li>
  8. <li><a href=“#contact”>Contact</a></li>
  9. </ul>
  10. </nav>

使用ID #w把整个页面封装,另外用div #content装饰页面的内容。在我的教程中,导航包含在页面内容里,不过你可以移动到任意合适的位置。因为导航是固定的,所以无论浏览用户处在什么位置,菜单总是随之滚动。

容器#stickynav能够保证所有内部元素一直置于页面内容顶部。我利用了CSS z-index属性和列表选项中的内部漂浮。注意HREF的值都是指向定位在页面中某一处的一个散列标志,我们通过这个值就能决定用户滑动到哪个位置。

在关闭导航块之后我们发现一小段代码。文本中有很多额外的间距,这样你就可以看到在一个典型网页中它会如何表现。每一块容器都利用HTML5<section>元素,附带一个类的名称.section

  1. <section id=“about” class=“section”>
  2. <h2>About Us</h2>
  3. ….
  4. </section>


我想区分开一般的顶部导航栏与本文介绍的固定导航。我们可以把一个褐色附带链接的导航条固定到页面顶端,但如果这样做的话,导航栏会挡住页面布局的一小部分。取而代之,我创建了一个新的无序列表,把链接样式设定成彼此紧挨并在旁边漂浮,这样一来菜单风格将更紧凑。

  1. #topbar {
  2. background: #4f4a41;
  3. padding: 10px 0 10px 0;
  4. textalign: center;
  5. height: 36px;
  6. overflow: hidden;
  7. webkittransition: height 0.5s linear;
  8. moztransition: height 0.5s linear;
  9. transition: height 0.5s linear;
  10. }
  11. #topbar a {
  12. color: #fff;
  13. fontsize:1.3em;
  14. lineheight: 1.25em;
  15. textdecoration: none;
  16. opacity: 0.5;
  17. fontweight: bold;
  18. }
  19. #topbar a:hover {
  20. opacity: 1;
  21. }
  22. #stickynav {
  23. display: block;
  24. height: 35px;
  25. width: 100%;
  26. zindex: 9999;
  27. }
  28. #stickynav #nav { position: fixed; z-index: 9999; }
  29. #stickynav #nav li { display: inline; }
  30. #stickynav #nav li a {
  31. display: block;
  32. float: left;
  33. marginright: 8px;
  34. fontsize: 1.2em;
  35. fontweight: bold;
  36. padding: 5px 7px;
  37. background: #cce4c4;
  38. webkitborderradius: 4px;
  39. mozborderradius: 4px;
  40. borderradius: 4px;
  41. }
  42. #stickynav #nav li a:hover {
  43. textdecoration: none;
  44. background: #d8f0d0;
  45. }

观察容器#stickynav,你会发现导航将跨越整个页面宽度,在使用一个透明背景的情况下当然不会很明显,但是请记住,你可能会扩大导航宽度至更宽的外部页面包装。

在我的样式表中还有一个有趣的部分拥有表单输入域和页面容器。这些规则都是定位在文件底部的,连同字体更新。注意每个标题是如何集中在页面上,以便给旁边的导航项提供空间的。可以轻易向右调整这些标题的距离,给导航链接提供跟多的空间。

  1. form .basic {
  2. display: block;
  3. fontsize: 1.5em;
  4. color: #555;
  5. fontfamily: Arial, Tahoma, sansserif;
  6. padding: 4px 6px;
  7. marginbottom: 10px;
  8. }
  9. form .basictxt {
  10. display: block;
  11. width: 550px;
  12. height: 180px;
  13. fontfamily: Arial, Tahoma, sansserif;
  14. color: #666;
  15. padding: 5px 8px;
  16. fontsize: 1.6em;
  17. lineheight: 1.4em;
  18. }
  19. /** page structure **/
  20. #w {
  21. display: block;
  22. width: 750px;
  23. margin: 0 auto;
  24. paddingtop: 30px;
  25. }
  26. #content {
  27. display: block;
  28. width: 100%;
  29. background: #fff;
  30. padding: 25px 20px;
  31. paddingbottom: 35px;
  32. webkitboxshadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  33. mozboxshadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  34. boxshadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
  35. }

我没有设置可以在某处提交的联系表单,但我确实希望它有一些体面的自定义样式。当然这也没什么特别的,不过它有重置的默认字体与颜色。而且如果你需要扩大中央内容的区域,你可以找到宽度值:附加到外部容器的750px属性。最好理解这些基本样式,虽然并不是什么非常特别的内容。

最后一块代码内容非常简单,就算你不懂脚本。我在用于结束的</body>之前添加了一个新标签,指向固定导航锚链接。无论什么时候当用户点击这个链接,我们输出散列值并立即滚动到页面部分。

  1. $(function(){
  2. $(“#nav a”).click(function(e){
  3. e.preventDefault();
  4. $(‘html,body’).scrollTo(this.hash,this.hash);
  5. });
  6. });

jQuery .click()方法包含了一个事件处理器参数,通过这个参数我们能取消默认行为,以便浏览器不会跳转页面。jQuery scrollTo运行针对当前的链接值this.hash。

这个方法很容易掌握,因为你可以很快的实现页面内容。我肯定还有许多其他类似的jQuery scrollTo相关插件,如果你有时间都可以尝试一下。

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

我是原文

转载请注明:魔法师 » 创建具有固定导航功能的滑动单页面布局网站

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址