那些你不知道的炫酷导航交互效果

南城FE 2023-03-28 原文

基于上次发布的那些你不知道的炫酷按钮交互效果反馈比较好，后续将继续收集那些炫酷的交互效果，希望可以给你的项目添砖加瓦，更上一层楼。

那些你不知道的炫酷交互效果系列：

那些你不知道的炫酷按钮交互效果
那些你不知道的炫酷导航交互效果

本文带来的炫酷的导航交互效果，一个结构层次清晰的导航是网站必不可少的功能之一，它可以帮助用户快速轻松的找到想要的信息。导航功能在PC端项目用到的比较多，国内一般的后台管理系统的导航都比较类似，都是一些颜色宽高大小的不同，涉及到官方网站或活动推广类型的相对会比较重设计感以及交互感。以下的效果都是我比较中意的设计及交互，全都来源于codepen，为了更方便快速体验效果，都已更新在码上掘金中，下面有原作者链接，有兴趣的可以了解他们的更多作品。

全屏方向导航

带有不同动画选项的全屏导航交互效果，在中心位置MAIN下方可选择不同的动画效果，通过点击上下左右不同的方位切换导航内容，对于有全屏需求的网站这个导航是一个很不错的选择。核心逻辑是每看到的面板都是一个独立的模块，每个模块的宽高是屏幕的100%，在每个点击事件中传入下次需要进入模块的x，y轴坐标，坐标设置方式以中心位置为（0，0），左侧模块的坐标则是（-1，0），依此类推，最终在最外层的元素中设置以下样式并增加对应的动画切换效果即可。

<div class="panel" data-x-pos="0"  data-y-pos="0"></div>
<div class="panel" data-x-pos="0"  data-y-pos="1"></div>
<div class="panel" data-x-pos="-1"  data-y-pos="1"></div>
<div class="panel" data-x-pos="1"  data-y-pos="1"></div>
<div class="panel" data-x-pos="-1"  data-y-pos="0"></div>
<div class="panel" data-x-pos="-1"  data-y-pos="-1"></div>

function setPos(){
  wrap.style.transform = 'translateX(' + pos_x + '00%) translateY(' + pos_y + '00%)';
}

在线预览：https://code.juejin.cn/pen/7159770082090942498

原作者：Brad Arnett

纯CSS折叠导航

纯CSS极简设计导航效果，展开时图标动画过渡成为关闭图标，同时内容展开并带有弹性效果，

在线预览：https://code.juejin.cn/pen/7159514650143375368

原作者：Nikolay Talanov

多层环形导航

点击菜单动画依次展开显示环形，整个交互效果给网站带来一个很不错的亮点，整个实现逻辑也很简单。点击Menu时增加一个open类，再次点击Close去掉该类，元素存在open类时添加对应的动画及样式即可，每一层圆形通过定位布局，按照图例从下往上排列，这样可不需要额外的z-index属性控制层级，核心CSS代码如下：

@for $i from 1 through $items {
  .l#{$i} {
    .open & {
      transition-delay: $i * $transition/$items;
      transform: scale3d(1,1,1) rotate3d(0,0,1,$start-rot);
      opacity: 1;
    }
  }
}

在线预览：https://code.juejin.cn/pen/7159517310380671007

原作者：Bennett Feely

分割多个扇形导航

和上一个交互效果都是一样的圆形菜单交换，这一个整体局中显示，点击展开菜单，所有子菜单合并展示为一个圆形，整个效果还是比较炫酷的，扇形的布局主要用到了transform中的rotate，skew两个属性。默认都是一个角度，展示在最上方，当展开时给每个字菜单设置不同的角度并增加transition过渡效果即可。

在线预览：https://code.juejin.cn/pen/7159821463334158336

原作者：Justin

光标带有反转效果的侧边导航

类似的侧边导航展开的效果你应该见过不少，但这个展开的效果给人一种很柔和的感觉，展开后菜单内容依次显示，最后是增加了一个聚焦的圆跟随光标移动，当遇到菜单内容时会放大圆形并反转显示菜单文字，加深了对导航的交互，这里的反转色基于 mix-blend-mode: difference 实现。这个效果还有两个主题色切换，有兴趣的可以在线看效果。

在线预览：https://code.juejin.cn/pen/7159775604047364099

原作者：Ivan Grozdic

有活力的侧边导航

这个导航样式和常见的导航类似，但是在选中菜单的效果上增加了小小的花样，让整个交互效果感觉很轻快有活力。其实逻辑比较简单，整个白色块是通过定位改变其top值实现，并且在过渡中增加了贝塞尔曲线动画。然后右侧的圆角并不是在底部菜单元素中实现的，是在定位元素中的两个伪元素设置圆角的效果。

transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

在线预览：https://code.juejin.cn/pen/7159782902702538788

原作者：Piyush

纯CSS 3D效果导航

很简约的一款3D交互效果，鼠标悬停时菜单突出且变色，这个效果适用的场景可能比较少，很少有类似的排版布局，但是也是值得分享一下的。

在线预览：https://code.juejin.cn/pen/7159814391708745736

原作者：Katy DeCorah

结束

本次整理的导航交互分享就结束了，希望可以在你的项目中带来一定的收获，如果你还有什么好的设计交互效果欢迎留言讨论。后期还会继续整理分享其他功能组件的优质设计交互效果，如果有什么期望整理的组件也欢迎留言哈。

看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

不知那些 quot https blockquote css 前端导航交互设计Html/CSS 前端开发yyds干货盘点

有关那些你不知道的炫酷导航交互效果的更多相关文章

ruby-on-rails - 如何在 ruby 交互式 shell 中有多行？ - 2
这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式rubyshell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。最佳答案这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f
ruby - EventMachine - 你怎么知道你是否落后了？ - 2
我正在研究使用EventMachine支持的twitter-streamrubygem来跟踪和捕获推文。我对整个事件编程有点陌生。我如何判断我在事件循环中所做的任何处理是否导致我落后？有没有简单的检查方法？最佳答案您可以通过使用周期性计时器并打印出耗时来确定延迟。如果您使用的是1秒的计时器，您应该已经过了大约1秒，如果它更长，您就知道您正在减慢react器的速度。@last=Time.now.to_fEM.add_periodic_timer(1)doputs"LATENCY:#{Time.now.to_f-@last}"@
ruby-on-rails - Ruby 如何知道在哪里可以找到所需的文件？ - 2
这里还有一个新手问题:require'tasks/rails'我在每个Rails项目的根路径中的Rakefile中看到了这一行。我猜这行用于要求vendor/rails/railties/lib/tasks/rails.rb加载所有rake任务:$VERBOSE=nil#LoadRailsrakefileextensionsDir["#{File.dirname(__FILE__)}/*.rake"].each{|ext|loadext}#LoadanycustomrakefileextensionsDir["#{RAILS_ROOT}/lib/tasks/**/*.rake"].so
ruby - 在不同的文件中设置断点没有效果 - 2
ruby调试器不会在我在与执行开始时不同的文件中设置的断点处停止。例如，考虑这两个文件，foo.rb:#foo.rbclassFoodefbarputs"baz"endend和main.rb:#main.rbrequire'./foo'Foo.new.bar我使用ruby-rdebug.\main.rb开始调试。现在，当我尝试使用b./foo.rb:4在另一个文件的特定行上设置断点时，我收到消息Setbreakpoint1atfoo.rb:4，但是当我cont时，程序执行到最后，调试器永远不会停止。但是，如果我在main.rb中的一行上打断，例如b./main.rb:3，或者一个方法，
ruby-on-rails - 在 Rails 3 中向 Active Admin 添加全局导航项的最佳方法是什么 - 2
我正在尝试将全局导航菜单项添加到我的ActiveAdmin安装(在“仪表板”导航按钮旁边)。ActiveAdmin说这在他们的网站上是可能的，但他们没有任何关于如何实现它的文档。有谁知道如何做到这一点？编辑:抱歉，我应该更清楚。我想添加一个指向由任意文本/链接对组成的全局导航的链接。IE，如果我想添加一个链接到http://google.com在事件管理员的全局导航中使用文本“Google”，我将如何实现？最佳答案 ActiveAdmin.register_page"Google"domenu:priority=>1,:label
ruby - 如何知道通过 ruby 上传 ftp 是否成功？ - 2
下面的代码通过ftp上传文件并且它有效。require'net/ftp'ftp=Net::FTP.newftp.passive=trueftp.connect("***")ftp.login("***","***")ftp.chdir"claimsecure-xml-files"ftp.putbinaryfile("file.xls",File.basename("file.xls"))ftp.quit但是如何确定上传是否成功呢？最佳答案之后ftp.putbinaryfile("file.xls",File.basename("
ruby-on-rails - Ruby表达式 '-'后留空格的效果 - 2
今天我在我的Rails控制台中尝试了一些东西，这发生了，2.0.0p247:009>Date.today-29.days=>Fri,07Feb20142.0.0p247:010>Date.today-29.days=>Thu,09Jan2014我很困惑。我可以看到我缺少一些基本的东西。但这让我印象深刻!谁能解释为什么会这样？最佳答案实际发生的是这样的:Date.today(-29.days)#=>Fri,07Feb2014today有一个名为start的可选参数，默认为Date::ITALY。Anoptionalargument
千耘农机导航的“星地一体”能力究竟是什么？ - 2
伴随农业机械化和智能化的发展，越来越多的人开始使用农机自动驾驶系统助力耕作，千耘农机导航的“星地一体”能力可有效解决信号受限的问题，实现作业提效。究竟什么是“星地一体”，又是如何解决智能化农机作业的痛点的？下面为大家揭秘。农机效率通常受限于通信网络目前虽然我国通讯网络的人口覆盖率达到99%，但地面移动通讯网络覆盖率仍小于国土面积的40%，而很多农田所在区域恰是山区、戈壁滩等偏远地区。两省交界地也会出现通信信号不稳定的状况；而国内大部分农机自动驾驶系统非常依赖通信网络，当通信网络弱的时候会出现系统掉线的现象，必须得携带小基站才能正常使用，极为繁琐。Q:什么是千耘农机导航“星地一体”能力？A:是星
Unity 血条及“掉血”缓冲效果 - 2
视频教程：https://www.bilibili.com/video/BV1WJ411778C/?spm_id_from=333.999.0.0&vd_source=4a4c35da6aef7094d5990c213c39aa09使用素材（推荐使用GitZipforgithub下载）：https://github.com/zheyuanzhou/Youtube-Unity-Tutorial/tree/master/EP45_Health%20Bar/Sprites效果如下图所示：首先在场景中创建一个新的Canvas，并命名为HeathBar，并创建三个Image作为前者的子物体，分别命名为
WebSocket的那些事（1-概念篇） - 2
目录一、什么是Websocket二、WebSocket部分header介绍三、HTTPVSWebSocket四、什么时候使用WebSockets五、关于SockJS和STOMP一、什么是Websocket根据RFC6455标准，Websocket协议提供了一种标准化的方式在客户端和服务端之间通过TCP连接建立全双工、双向通信渠道。它是一种不同于HTTP的TCP协议，但是被设计为在HTTP基础上运行。Websocket交互始于HTTP请求，该请求会通过HTTPUpgrade请求头去升级请求，进而切换到Websocket协议。请求报文如下：GET/spring-websocket-portfoli