跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
navigation

24 篇文章
{
,

}
文章“JavaScript 导航的三个 CSS 替代方案”的直链
导航

JavaScript 导航的三个 CSS 替代方案

嘿,很快!您需要为网站创建导航,并且您开始处理移动设备的行为。您选择什么模式?如果您像大多数人一样,它可能是“汉堡”菜单,单击该菜单时,会使用少量 JavaScript……

Avatar of Blake Lundquist
Blake Lundquist 于 2020 年 7 月 14 日 发布
文章“带有滚动活动状态的粘性目录”的直链
IntersectionObserver 导航

带有滚动活动状态的粘性目录

假设您有一个两列布局:一列是主要内容,另一列是侧边栏。假设它有很多内容,并且有需要滚动的部分。侧边栏基本上是空的,因此您可以安全地放置……

Avatar of Chris Coyier
Chris Coyier 于 2020 年 2 月 13 日 发布
文章“带有一侧 React Hooks 和 Styled Components 的汉堡菜单”的直链
菜单 导航 React Hooks Styled Components

带有一侧 React Hooks 和 Styled Components 的汉堡菜单

我们都知道什么是汉堡菜单,对吧?当这种模式开始进入网页设计时,它因其简约性而受到嘲讽和赞扬,这种简约性允许主菜单被隐藏在屏幕外,尤其是在移动设备上……

Avatar of Maks Akymenko
Maks Akymenko 于 2019 年 9 月 12 日 发布
文章“哦,制作三角形面包屑丝带的多种方法!”的直链
CSS 形状 导航 SVG

哦,制作三角形面包屑丝带的多种方法!

哦,制作三角形面包屑丝带的多种方法

让我们看看如何创建一行链接,这些链接以某种方式相互连接,每个块上都有一个类似于V形或缺口的形状,就像您可能……

Avatar of Silvestar Bistrović
Silvestar Bistrović 于 2019 年 5 月 3 日 发布
文章“在 Vue 中创建可重用的分页组件”的直链
导航 分页 Vue

在 Vue 中创建可重用的分页组件

大多数 Web 应用程序背后的理念是从数据库中提取数据并以最佳方式呈现给用户。当我们处理数据时,在某些情况下,最佳的呈现方式……

Avatar of Mateusz Rybczonek
Mateusz Rybczonek 于 2019 年 3 月 29 日 发布
文章“使用鲜为人知的 CSS element() 函数创建小地图导航器”的直链
element() 导航

使用鲜为人知的 CSS element() 函数创建小地图导航器

W3C 的 CSS 工作组经常为我们提供很棒的 CSS 功能来进行实验。有时我们会遇到一些非常酷的东西,它会让我们脸上露出笑容,但它会立即消失,因为我们会想,“这很棒,但……”

Avatar of Preethi
Preethi 于 2019 年 2 月 5 日 发布
文章“粘性、流畅、活动的导航”的直链
导航 粘性

粘性、流畅、活动的导航

就像标题说的那样!这是一个侧边栏导航栏,它……

  1. 使用粘性定位。它在可能的情况下会停留在屏幕上,但不会与标题、页脚重叠,也不会使任何链接无法访问。
  2. 平滑滚动到
…
Avatar of Chris Coyier
Chris Coyier 于 2018 年 8 月 7 日 发布
文章“在 React 中简单构建复杂的 UI 动画”的直链
导航 React Stripe

在 React 中简单构建复杂的 UI 动画

让我们使用React、Styled Components 和React Flip Toolkit 来创建我们自己的 Stripe 首页动画导航菜单版本。这是一个令人印象深刻的菜单,具有一些流畅的动画效果,这三种工具的组合可以……

Avatar of Alex Holachek
Alex Holachek 于 2018 年 7 月 12 日 发布
文章“包含“更多”按钮的容器自适应选项卡”的直链
下拉菜单 导航 优先级+

包含“更多”按钮的容器自适应选项卡

或者优先级导航模式,或者逐步折叠的导航菜单。我们可以用至少三种方式来命名它。

选项卡和菜单有多种UX解决方案,每种解决方案都比另一种具有自身的优势,您只需……

Avatar of Osvaldas Valutis
Osvaldas Valutis 于 2018 年 5 月 2 日 发布
  • 更新
  • 1
  • 2
  • 3
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注 Web 开发最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律声明
  • 获取免费积分!
CSS-Tricks
  • 为我们写文章!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.