宁德做网站：用jQuery构建单页滑动导航栏
发布时间2020-03-27 阅读：216 作者：宁德网站设计开发公司许多网页设计工作室和自由职业者组合将包含流行的单页导航技术。这种布局的好处允许访问者在不需要重新加载网站的情况下浏览所有的主要内容。此外，这有助于保持界面非常简单和易于操作。
宁德做网站在本教程中，我想演示如何构建具有滑动导航效果的演示单页布局。JQuery一页导航额外的布局是符合HTML5和CSS3规范的标准，并且Nav仍然会在JavaScript禁用的浏览器中正确加载。如果你想瞥见我们正在创建的最终产品，请查看下面的演示页面。
现场演示 -下载源代码
构建文档
首先我想下载副本我们可以把所有的文件放在一起，在zip容器中，你需要一个副本。jquery.nav.js和jquery.scrollTo.js这两个库都需要用滑动动画样式来完成完整的效果。现在，我也将创建我们的主要网页索引。
?
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen | <!doctype html> <HTMLlang="en-US" > <头部> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8" > <title>Single Page Sliding Navigation Demo</title > <meta姓名=“作者”content="Jake Rocheleau" > <link雷尔=“快捷图标”href="https://www.vandelaydesign.com/favicon.ico" > <link雷尔=“图标”href="https://www.vandelaydesign.com/favicon.ico" > <link雷尔=“样式表”type="text/css"媒体=“全部”href="styles.css" > <link雷尔=“样式表”type="text/css"HREF="http://fonts.googleapis.com/css?family=Droid400700：机器人serif：400700> <script类型="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script > <script类型="text/javascript"charset="utf-8"SRC="js/jquery.scrollTo.js"></脚本> <script类型="text/javascript"charset="utf-8"SRC="js/jquery.nav.js"></脚本> <!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </头部> |
我使用一个免费的外部字体名为Droid serif从谷歌Web字体，以提高设计美学。谷歌的代码托管服务器为了最小化我们的本地文档，那么最后有趣的第三方脚本是HTML5shiv这是用于旧的Internet Explorer浏览器。这些不能适当地更新新的HTML5元素，所以我们需要包括JS代码来修复这些错误。
发展内容
在正文部分，我们需要将整个内容区域分割成不同的部分或面板。顶部导航菜单将一直固定，这将从文档流中删除。因此，我将这个导航栏与内部内容区分开。
?
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two Twenty-three Twenty-four Twenty-five Twenty-six Twenty-seven | <导航卫星id="navigation" > <ul身份证件="topnav"> <li类=“电流”><一href="#home">Homepage</a></li > <li><aHREF=“贵公司”>The Company</一></锂> <li><aHREF="#portfolio">Client Portfolio</一></锂> <li><aHREF=“接触”>Contact Us</一></锂> </ul > </导航卫星> <divid="content" > <section身份证件="home"> <div类=“包装器”> <!-- some content here --> </div > </section > <!-- BG Image Source:http://www.flickr.com/photos/jepoirrier/8206441823/ > <section身份证件=“公司”> <div类=“包装器”> <h1>About our Studio</h1 > <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget scelerisque augue. Phasellus felis est, lobortis ut luctus commodo, venenatis eget arcu. Integer dolor elit, dictum at scelerisque vitae, semper ac sapien. Ut sed nunc sed eros varius ultrices et in libero.</p > <p>Nam a tempor sem. Donec vel mi dui. Suspendisse potenti. Sed adipiscing lorem non erat consequat vulputate. In hac habitasse platea dictumst. Sed pellentesque pulvinar sem non suscipit. Vestibulum cursus lectus ut magna gravida vel molestie diam ornare.</p > <p>Donec interdum, magna ut pulvinar aliquet, felis tellus lacinia leo, ullamcorper venenatis nisi lectus et nibh. Cras a lectus eros. Cras nec quam sed ligula ornare malesuada. Etiam volutpat purus sed justo semper vitae hendrerit lectus posuere. Nam et fermentum elit.</p > </div > </section > |
我只在正文内容的前2个部分中复制HTML代码。注意每个链接的HREF值指向每个部分的特定ID。这意味着即使有JavaScript禁用，页面也会跳转到那些区域。我们可能会失去滑动效果，但网站仍然正常工作。
您还可以注意到每个内容段如何具有类的内部容器。包装器由于我使用固定背景图像，所以我们需要将部分区域与内部内容分开。这些包装将在不以背景为中心的情况下对内容进行中心处理。
设计关键CSS样式
如果我们宁德做网站可以移动到样式表，那么从上到下解释所有的东西都会更容易。Eric Meyer的默认值您应该可以自由地将这些复制到自己的项目中，甚至可以将它们保存为自定义代码段。
?
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two Twenty-three Twenty-four Twenty-five Twenty-six Twenty-seven Twenty-eight Twenty-nine Thirty Thirty-one Thirty-two Thirty-three Thirty-four Thirty-five Thirty-six | html, body, div, span, applet, object, iframe, hOne, hTwo, hThree, hFour, hFive, hSix, p, blockquote, 之前, a, abbr, acronym, address, big, cite, 代码, del, dfn, em, img, ins, kbd, q, s, samp, 小, strike, strong, 附属的, sup, tt, var, b, u, i, 机构, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, 字幕, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, 嵌入, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: Zero; 衬垫: Zero; 边境: Zero; 字体大小: 100%; 字体: inherit; 垂直对齐: 基线; 概述: 无; - WebKIT字体平滑：反锯齿； -webkit-text-size-adjust:100%; WebKIT框大小：边框； -MOZ盒大小：边框； 框大小：边框； } html { 高度: 101%; } body { 字体大小: 62.5%; 线高: One; 字体族: Helvetica, Tahoma, 阿拉里, sans-serif; 背景: #121212; 颜色: F0F0F0; } ::selection { 背景: α2AEC39; 颜色: #323232; } ::-moz-selection { 背景: α2AEC39; 颜色: #323232; } ::-webkit-selection { 背景: α2AEC39; 颜色: #323232; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 显示: 块; } ol, ul { 列表样式: 无; } blockquote, q { 报价: 无; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: 无; } strong { 字体加粗: 大胆的; } table { 边界塌陷: 崩溃; 边界间距: Zero; } img { 边境: Zero; 最大宽度: 100%; } hOne{ 字体族: “机器人serif”, Georgia, 衬线; 颜色: B9CAA1; 字体大小: 3.5EM; 线高: 1.45微米; margin-bottom: 20PX; } hTwo{ 显示: inline-块; 字体大小: 2.9EM; 衬垫: 12px17px;background: rgba(0,0,0,0.65);color:#fff;font-weight:bold;font-family:Arial,Tahoma,sans-serif;} p { 字体大小: 1.55; 线高: 1.35EM; 衬垫: 2PX0;margin-bottom:15px;} |
字体平滑属性仅适用于可以应用的Mac OSX或IOS系统。-webkit-text-size-adjust属性将帮助移动设备在从肖像切换到风景时，有时会重新调整字体。我已禁用此属性，因此我们可以根据需要运行固定的移动响应布局（或不需要）。
现在，导航菜单也应该在用户向下滚动时固定在页面的顶部。我想设置一个特定的高度值，它将使文本链接保持在一个均匀的直线上。rgba()color syntax.
?
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two Twenty-three Twenty-four Twenty-five Twenty-six Twenty-seven Twenty-eight Twenty-nine Thirty Thirty-one Thirty-two Thirty-three Thirty-four Thirty-five Thirty-six Thirty-seven Thirty-eight Thirty-nine Forty Forty-one Forty-two | /* top navigation */ #navigation { 显示: 块; 位置: 固定的; 上衣: 0px; width: 100%; 高度: 70px; 背景: rgba(Two hundred and fifty-five,Two hundred and fifty-five,Two hundred and fifty-five,Zero point seven five); Z指数: Nine thousand nine hundred and ninety-nine; } #topnav { 最大宽度: 900px; 最小宽度: 380PX; margin: Zeroauto; 字体族: “机器人”, Helvetica, 阿拉里, sans-serif; 清空: 二者都; } #topnav li a { 显示: 块; 浮动: 左边; 颜色: α5357D; 衬垫: 0px11px; 保证金权: 15PX; 字体大小: 1.6EM; 线高: 70px; 字体加粗: 大胆的; 文本装饰: 无; -webkit-transition:allZero point fives linear; -moz-transition:allZero point fives linear; 过渡：allZero point fives linear; } #topnav li a:hover { 颜色: 778079; 背景: rgba(Two hundred and fifty-five,Two hundred and fifty-five,Two hundred and fifty-five,Zero point six five); } #topnav li.current a { 背景: rgba(Two hundred and fifty-five,Two hundred and fifty-five,Two hundred and fifty-five,Zero point seven); 颜色: 90AE64; 边界底部: 4PXsolidB9DC8C; } |
每一个链接都使用了CSS3动画在悬停上的转换。链接将动画一个更清晰的背景颜色，它也使用阿尔法透明。所以我们从来没有一个完整的100%个白色背景，但是文本总是清晰的。所有的填充和额外的空间都被应用到锚链接上，这样访问者有更容易的时间点击。区域
?
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two | /* main content sections */ #content { 显示: 块; width: 100%; 溢流: 隐藏的; } .wrapper { 显示: 块; width: 800 px; 最小宽度: 380PX; margin: Zeroauto; } #home { 背景: 网址(图像/办公空间) 不重复center机构; 背景附件: 固定的; - WebKIT背景size封面； - MOZ背景-size封面； -O背景size封面； 背景size封面； 最小高度: 550PX; 垫顶: 85 px; margin-bottom: 40PX; 盒影：inset1PX-9px20PX-6px#000; } |
这是最后一组重要的属性，我们需要看我们的最终布局。#contentDIV为所有内部部分引用最外层容器。我们需要使用。溢出：隐藏；当窗口的大小比内部文本区域小时，处理多余的内容。
另一个有趣的代码位应用到家里这是网页的第一部分，当你完成所有的加载时，你会注意到的。我添加了一个固定的背景图像来缩放它的容器的整个宽度。同样的BG图像样式在页面下面的另一个部分中找到。我的原始代码是基于CSS3模型的，但是有。一些替代方案对于这个演示，我认为使用新方法更容易，并将外部资源保持在最低限度。
应用jQuery
进入最后阶段，我们可以添加一个小的JavaScript块来完成整个导航工作。我们所需要做的就是定义导航选择器以及一些不相关的函数参数。
?
One Two Three Four Five Six Seven Eight | <script type="text/javascript"> $(document).ready(功能(){ $('#topnav').onePageNav({ currentClass:'current', 滚动偏移：0 }; }); </script> |
你会发现<script>在我的HTML页面的底部，在关闭正文标签之前，请注意，我的选择器是引用的。#topnav它是无序列表元素，而不是导航容器。您将始终选择直接包含所有锚点链接的元素。
我通过的两个参数不必让所有的东西立刻工作。currentClass当它进入视图时，将一个类名附加到当前列表项中。偏移参数允许控制动画将停止在何处滑动。如果Nav菜单占据屏幕相当大的一部分，并且需要留下一些额外的填充，这是很有用的。我把这个值保留在0，但是您可以玩弄它，看看它是怎样的。另外，我已经复制了插件文档中发现的默认参数模板。
?
One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen | $('nav').onePageNav({ currentClass:'current', 昌赫什：false, 滚动速度：750， 滚动偏移：30， 滚动阈值：0.5， 滤波器'', 放松：'swing', 开始：function() { //当动画开始时我被解雇了 } 结束：function() { //当动画结束时，我被解雇了。 } scrollChange：function($currentListItem) { //当您输入一个区段时，我会被开除，并且我通过了该节的列表项。 } }); |
但是重申一下，这些参数对于插件来说是不必要的。这就是为什么代码是默认设置的！不过，我知道开发人员喜欢深入挖掘这些开源插件——所以可以随意定制自己喜欢的插件。
最后的想法
我宁德做网站希望这个教程对至少几个网络开发者来说是有用的。单页技术很受欢迎，而且它的势头很快。我注意到在过去的几年里，这种影响在网站上的添加频率更高。运行
看看我的直播演示项目，并随时下载一个源代码的副本。所有我的教程是在没有通用许可证下发布的，完全免费为您自己的网站修改/复制。一页的NavaPu外插件有其他选项，您可以找到。关于吉图布回购案如果你有任何问题或想法，请在讨论区告诉我们。
关于作者：
杰克是一名自由撰稿人和前端网络开发人员。他可以在许多博客上找到主题，如移动界面、自由职业、jQuery和Objtovi.C在谷歌上查看他的其他文章并按照他的推文进行。雅克罗舍罗 .杰克的谷歌简介 .
