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

相关文章
navigation

24 篇文章
{
,

}
文章的直接链接 图标 玻璃质感效果 在 CSS 中
backdrop-filter background-clip element() emoji filter hsl mask-clip navigation

图标 玻璃质感效果 在 CSS 中

我最近偶然发现了一种很酷的效果,叫做 玻璃质感 在 Dribbble 的截图 中。我的第一个想法是,如果我使用一些表情符号来制作图标,我可以在几分钟内快速重现它,而无需浪费时间……

Avatar of Ana Tudor
Ana Tudor 于 2021 年 11 月 8 日
文章的直接链接 使用原生 JavaScript 创建智能导航栏
navigation sticky

使用原生 JavaScript 创建智能导航栏

粘性或固定导航是一个流行的设计选择,因为它为用户提供了持续访问网站的导航方式。另一方面,它会占用页面空间,有时会以不那么理想的方式覆盖内容……

Avatar of Jemima Abu
Jemima Abu 于 2021 年 4 月 5 日
文章的直接链接 赞美明确的点击菜单
menus navigation

赞美明确的点击菜单

我仍然记得当我学会用纯 CSS 构建一个悬停触发的子菜单时的兴奋感。(这可能是读完2003 年来自A List Apart的这篇文章之后。)当时,这确实是一个 CSS 技巧。说真的……

Avatar of Mark Root-Wiley
Mark Root-Wiley 于 2021 年 3 月 18 日
文章的直接链接 使用 IntersectionObserver 的目录
IntersectionObserver navigation

使用 IntersectionObserver 的目录

如果您在长滚动页面上有一个目录,由于,比如,position: fixed; 或 position: sticky;,JavaScript 中的IntersectionObserver API 是突出显示目录中对应内容的完美伙伴……

Avatar of Chris Coyier
Chris Coyier 于 2021 年 3 月 15 日
文章的直接链接 如何改进单页面应用程序菜单的可访问性
:focus-within accessibility focus menu navigation

如何改进单页面应用程序菜单的可访问性

我最近开始与我的团队一起为客户开发一个渐进式 Web 应用 (PWA)。我们使用 React 以及通过 React Router 进行的客户端路由,我们创建的第一个元素之一就是主菜单。菜单……

Avatar of Luke Denton
Luke Denton 于 2021 年 2 月 25 日
文章的直接链接 如何在不使用 JavaScript 的情况下创建滚动时收缩的页眉
navigation scrolling sticky

如何在不使用 JavaScript 的情况下创建滚动时收缩的页眉

想象一个网站的页眉,它很厚实,在内容的顶部和底部有大量的填充。当您向下滚动时,它会收缩到自身,减少一些填充,从而使更多屏幕真实……

Avatar of Håvard Brynjulfsen
Håvard Brynjulfsen 于 2021 年 6 月 7 日
文章的直接链接 我今天看到了两个超级菜单…
navigation

我今天看到了两个超级菜单…

一个是(较旧)美国政府网站的页脚。另一个是 AWS 控制台中 AWS 服务的导航。
Avatar of Chris Coyier
Chris Coyier 于 2021 年 2 月 2 日
文章的直接链接 将 Markdown 解析为自动目录
IntersectionObserver markdown navigation vue animations

将 Markdown 解析为自动目录

目录是一个链接列表,允许您快速跳转到同一页面上的特定内容部分。它有利于长篇内容,因为它向用户展示了内容的便捷概述……

Avatar of Lisi Linhart
Lisi Linhart 于 2020 年 11 月 13 日
文章的直接链接 页面旋转动画揭示菜单
checkbox hack menu navigation

页面旋转动画揭示菜单

网站上的菜单有很多不同的方法。一些菜单是持续存在的,始终可见并显示所有选项。其他菜单是隐藏设计的,需要打开才能查看选项。甚至还有……

Avatar of Preethi
Preethi 于 2020 年 9 月 8 日
  • 1
  • 2
  • 3
  • 较旧

CSS-Tricks 由 DigitalOcean 提供支持。

关注最新的网页开发资讯

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

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律信息
  • 获取免费信用额度!
CSS-Tricks
  • 为我们写作!
  • 与我们合作广告
  • 联系我们
社交
  • RSS Feed
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.