CSS3单页面垂直固定导航_html/css_WEB-ITnose
越来越多的开发者喜欢将单页面尤其像产品介绍页面设计成用一个简单的导航条关联的页面各个重要部分(节点)。本例中,一个页面由多个重要节点组成,在页面一侧会垂直展示多个简单的导航远点,滑上圆点会展示对应节点部分的名称,点击页面会滚动到对应的节点部分,而导航条位置固定不变。
查看演示 下载源码
当屏幕足够小时(如手机移动设备),会在屏幕右下角展示一个图标,触控图标,则会展开导航菜单,点击菜单页面会滚动到对应的节点,效果非常酷。
HTML
我们的导航条是一个无序列表ul,包含在nav.cd-vertical-nav内,通过连接a#section1关联到对应的节点。元素button.cd-nav-trigger是用来作为小屏幕设备上的用来触发菜单的按钮。section.cd-section就是用来对应导航节点的内容。
<nav class="cd-vertical-nav"> <ul> <li><a href="#section1" class="active"><span class="label">Intro</span></a></li> <li><a href="#section2"><span class="label">Events</span></a></li> <!-- additional navigation items here --> </ul></nav> <button class="cd-nav-trigger cd-image-replace">Open navigation<span aria-hidden="true"></span></button> <section id="section1" class="cd-section"> <div class="content-wrapper"> <h1 id="垂直固定导航">垂直固定导航</h1> <a href="#section2" class="cd-scroll-down cd-image-replace">scroll down</a> </div></section> <section id="section2" class="cd-section"> <div class="content-wrapper"> <!-- section content here --> </div></section>
CSS
HTML结构部署好后,我们要为页面添加必要的CSS样式。在非常小的屏幕下(视图宽度小于800px),我们将.cd-nav-trigger和
.cd-nav-trigger { display: block; position: fixed; z-index: 2; bottom: 30px; right: 5%;} .cd-vertical-nav { position: fixed; z-index: 1; right: 5%; bottom: 30px; transform: scale(0); transform-origin: right bottom; transition: transform 0.2s;}.cd-vertical-nav.open { transform: scale(1);}
那么在大的屏幕设备上,我们首先是要 Modernizr 来检测当前使用的设备是否支持触屏,在非触控屏上会有鼠标滑上的效果。我们将右侧的垂直导航条设置为固定的高度和宽度,并将其固定在页面右侧。默认右侧导航之显示几个圆点,当鼠标滑上圆点时,导航条会打开,可以选择导航菜单。
@media only screen and (min-width: 800px) { .cd-vertical-nav { right: 0; top: 0; height: 100vh; width: 90px; } .cd-vertical-nav::before { /* this is the navigation background */ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); transform: translateX(100%); transition: transform 0.4s; } .no-touch .cd-vertical-nav:hover::before, .touch .cd-vertical-nav::before { transform: translateX(0); } .cd-vertical-nav .label { display: block; transform: translateX(100%); transition: transform 0.4s; } .no-touch .cd-vertical-nav:hover .label, .touch .cd-vertical-nav .label { transform: translateX(0); }}
为了创建圆点和图标,可以使用::after和::before来为a元素添加伪类。
@media only screen and (min-width: 800px) { .cd-vertical-nav a { position: relative; padding: 3em 0 0; margin: 1.4em auto; } .cd-vertical-nav a::before, .cd-vertical-nav a::after { /* used to create the filled circle and the background icon */ content: ''; position: absolute; left: 50%; transition: transform 0.4s 0s; } .cd-vertical-nav a::before { /* filled circle */ top: 0; height: 32px; width: 32px; border-radius: 50%; background: #eaf2e3; transform: translateX(-50%) scale(0.25); } .cd-vertical-nav a::after { /* icon */ top: 8px; height: 16px; width: 16px; background: url(../img/cd-nav-icons.svg) no-repeat; transform: translateX(-50%) scale(0); } .no-touch .cd-vertical-nav:hover a::before, .no-touch .cd-vertical-nav:hover a::after, .touch .cd-vertical-nav li:nth-of-type(n) a::before, .touch .cd-vertical-nav li:nth-of-type(n) a::after { transform: translateX(-50%) scale(1); }}
当然到这里效果已经实现了,但是要实现点击导航菜单时页面做平滑滚动效果则需要借助jQuery来实现滚动动画。本例在下载源码包里已经打包了包含的全部jQuery代码,请大家下载后查看,本文不再描述。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati
