javascript - 如何实现类似于 youtube 卡片的上下文菜单？-6ren

javascript - 如何实现类似于 youtube 卡片的上下文菜单？

转载作者：行者123 更新时间：2023-12-01 15:12:06

我正在学习一点 CSS，今天我发现自己想要实现一个类似的上下文菜单(当你点击 youtube 卡片上的垂直省略号时显示的那个)但我的尝试没有成功很远:D。这是我所拥有的:

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.container {
    display: inline-block;
    position: relative;
}

.dropdown {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.dropdown-opener {
    cursor: pointer;
    user-select: none;
    position: absolute;
    right: 0;
}

.dropdown .dropdown-toggle,
.dropdown .dropdown-menu {
    display: none;
    style-type: none;
}

.dropdown .dropdown-toggle:checked+ul {
    display: block;
}

.style-scope .menu-renderer {
    --layout-inline_-_display: inline-flex;
    --icon-button-icon-height: 24px;
    --icon-button-icon-width: 24px;
    --spec-icon-active-other: #606060;
    --spec-icon-inactive: #909090;
    --spec-text-disabled: #909090;
    --spec-text-secondary: #606060;
    align-items: var(--layout-center-center_-_align-items);
    color: var(--menu-renderer-button-color, var(--spec-icon-inactive));
    cursor: pointer;
    display: var(--layout-inline_-_display);
    fill: var(--iron-icon-fill-color, currentcolor);
    width: var(--icon-button-icon-width, 100%);
    background: transparent;
}
</style>
</head>

<body>
<div class="container">
    <img alt="sample" src="https://via.placeholder.com/200x200">
    <nav class="dropdown layer--topright">
        <label class="dropdown-opener" for="menu-opener1">...</label>
        <input class="dropdown-toggle" id="menu-opener1" type="checkbox">
        <ul class="dropdown-menu">
            <li>Foo1</li>
            <li>Bar1</li>
            <li>Baz1</li>
        </ul>
    </nav>
</div>
<div class="container">
    <img alt="sample" src="https://via.placeholder.com/200x200">
    <nav class="dropdown layer--topright">
        <label class="dropdown-opener" for="menu-opener1">...</label>
        <input class="dropdown-toggle" id="menu-opener1" type="checkbox">
        <ul class="dropdown-menu">
            <li>Foo2</li>
            <li>Bar2</li>
            <li>Baz2</li>
        </ul>
    </nav>
</div>
<div class="container">
    <img alt="sample" src="https://via.placeholder.com/200x200">
    <nav class="dropdown layer--topright">
        <icon-button id="button" class="dropdown-opener dropdown-trigger style-scope menu-renderer">
            <button id="button" class="style-scope icon-button" aria-label="Action menu">
                <icon class="style-scope menu-renderer">
                    <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope icon" style="pointer-events: none; display: block; width: 100%; height: 100%;">
                        <g class="style-scope icon">
                            <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" class="style-scope icon"></path>
                        </g>
                    </svg>
                </icon>
            </button>
        </icon-button>
        <input class="dropdown-toggle" id="menu-opener2" type="checkbox">
        <ul class="dropdown-menu">
            <li>Foo3</li>
            <li>Bar3</li>
            <li>Baz3</li>
        </ul>
    </nav>
</div>
</body>

</html>

如您所见，代码很脏而且损坏了...但是我的尝试存在重大问题，我不知道如何解决:

单击省略号按钮时出现错误的上下文菜单

显示元素符号的元素

与真正干净的 youtube 相比，元素风格很难看

因此，如果您能解释如何解决这些问题，以便从我的尝试中获得可用的东西，那就太棒了。

或者，如果我的方法全错了，无法使用并准备扔进垃圾箱……您能否解释一下实现我的目标的最佳方法是什么？

提前致谢。

最佳答案

问题 #1
单击溢出菜单按钮时出现错位的上下文菜单。上下文菜单实际上并没有放错位置。 for 中的属性<label> element 指的是错误的上下文菜单。例如，for您的 <label> 的值(value)第一个 .container 中的元素值为 menu-opener1 ，但 for <label> 上的值 中的元素第二 .container具有完全相同的值。单击任一标签会导致第一个容器中的下拉菜单打开，因为这两个标签都会导致选中第一个容器上的隐藏复选框。
我们能做什么？只需更改 id值，以便每个下拉菜单都有一个唯一的 id 值。然后，将该 id 值用于 for <label> 中的值元素。

问题 #2
隐藏li的公告ul 中的元素, 你必须使用 list-style-type: none 在您的 CSS 和 上不是 style-type: none .

问题 #3
这是一个非常主观的问题。一个设计对一个人来说可能看起来很干净，但对其他人来说却是不干净的。尽管如此，我还是试图实现我想看到的。您可以更改以下一些内容以改进设计方面。

更改您的字体系列，使其适合您的主题。我在这里选择了一个无衬线字体系列。

为您的上下文菜单添加背景。在这里，我选择了白色。

在每个 li 之间添加空格元素。在这里，我使用了line-height .您也可以使用padding或 margin在每个 li元素。

添加 box-shadow显示海拔。 Google's Material Design recommends using this technique to show that an element's z-position is higher.

当上下文菜单从可见变为不可见时允许转换，反之亦然。这意味着避免使用不可转换的 CSS 属性(例如 visibility 和 display )。在这里，我选择使用transform: scale和 opacity过渡。

其他问题
从语义上讲，您的 HTML 标记不正确。

<nav> (navigation) 元素用于在页面之间导航。在这里，您可能应该使用 <menu> element instead .但是，由于它仍处于试验阶段，我选择使用 <section> .

您正在使用一些不存在的 HTML 标签(例如 <icon-button> 和 <icon> )。尝试咨询here for valid HTML tags和 here for valid SVG tags .

最后.container item 有一个按钮，可以检查隐藏的复选框。但是，the <button> element does not work with <label> element .因此，尝试制作 <label>元素在视觉上看起来像一个按钮。您可以使用:active和 :hover CSS 伪选择器分别在按下和悬停时更改按钮样式。此外，这减少了嵌套。

当可以使用 CSS 进行样式设置时，尽量避免使用内联样式(例如，您的内联 SVG 样式)

个人喜好。大多数框架使用 .container包含整个页面，所以我选择使用类名 .box而不是 .container .

这是可运行的片段。

* {
  font-family: Helvetica;
  box-sizing: border-box;
}

.box {
  display: inline-block;
  position: relative;
}

.dropdown {
  position: absolute;
  right: 0;
  top: 8px;
}

.dropdown-opener {
  cursor: pointer;
  user-select: none;
  position: absolute;
  width: 24px;
  height: 24px;
  background: url('https://i.imgur.com/Qt3Qwgp.png');
  background-repeat: no-repeat;
  background-position: right;
  right: 0;
}

.dropdown .dropdown-toggle {
  display: none;
}

.dropdown .dropdown-menu {
  list-style-type: none;
  transform: scale(0);
  opacity: 0;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  
  position: absolute;
  top: 1.5em;
  right: 10px;
  line-height: 1.75em;
  background: white;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  border-radius: 5px;
  padding: 20px;
  margin: 0;
  transform-origin: top right;
}

.dropdown .dropdown-toggle:checked + ul {
  transform: scale(1);
  opacity: 1;
}

.dropdown-opener-button {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 0;
}

.icon-button {
  padding: 0;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: 
    box-shadow .25s ease,
    background .25s ease,
    transform .25s ease;
  background: #ffffffdd;
}

.icon-button:hover {
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.35);
}

.icon-button:active {
  background: #ffffff77;
  transform: scale(0.9);
}

.icon-button ~ .dropdown-menu {
  top: 1.75em;
}

<div class="box">
  <img alt="sample" src="https://via.placeholder.com/200x200">
  <section class="dropdown layer--topright">
    <label class="dropdown-opener" for="menu-opener1"></label>
    <input class="dropdown-toggle" id="menu-opener1" type="checkbox">
    <ul class="dropdown-menu">
      <li>Foo1</li>
      <li>Bar1</li>
      <li>Baz1</li>
    </ul>
  </section>
</div>
<div class="box">
  <img alt="sample" src="https://via.placeholder.com/200x200">
  <section class="dropdown layer--topright">
    <label class="dropdown-opener" for="menu-opener2"></label>
    <input class="dropdown-toggle" id="menu-opener2" type="checkbox">
    <ul class="dropdown-menu">
      <li>Foo2</li>
      <li>Bar2</li>
      <li>Baz2</li>
    </ul>
  </section>
</div>
<div class="box">
  <img alt="sample" src="https://via.placeholder.com/200x200">
  <section class="dropdown layer--topright">
    <label class="dropdown-opener-button icon-button" for="menu-opener3">
      <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope icon">
        <g class="style-scope icon">
          <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" class="style-scope icon"></path>
        </g>
      </svg>
    </label>
    <input class="dropdown-toggle" id="menu-opener3" type="checkbox">
    <ul class="dropdown-menu">
      <li>Foo3</li>
      <li>Bar3</li>
      <li>Baz3</li>
    </ul>
  </section>
</div>

更新
由于没有清楚地理解 OP 的含义，即当用鼠标悬停时使菜单项改变状态有多难，我决定创建悬停效果和单击时的不同效果(波纹) <li>元素。我推荐阅读这篇 writing on creating a ripple effect .
此外，根据要求，添加了在菜单框外单击时隐藏菜单的功能。这是可运行的片段。

// Closing menu on outside click
const outsideClickListener = event => {
  let checkedToggle = document.querySelector('.dropdown-toggle:checked')
  let openedMenu = document.querySelector('.dropdown-toggle:checked + .dropdown-menu')
  
  // If click is performed on checkbox (through label), do nothing
  if (event.target.classList.contains('dropdown-toggle')) {
    return
  }
  
  // If click is performed on label, uncheck all other dropdown-toggle
  if (event.target.classList.contains('dropdown-opener') ||
      event.target.classList.contains('dropdown-opener-button')) {
    let forId = event.target.getAttribute('for')
    document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
      if (forId !== toggle.getAttribute('id'))
        toggle.checked = false
    })
    return
  }
  
  // If click is performed outside opened menu
  if (openedMenu && !openedMenu.contains(event.target)) {
    checkedToggle.checked = false
  }
}
document.addEventListener('click', outsideClickListener)

// Ripple effect on li elements
const createRipple = event => {
  let li = event.target
  let liBox = li.getBoundingClientRect()
  let x = event.pageX - liBox.left
  let y = event.pageY - liBox.top
  let animDuration = 350
  let animationStart, animationFrame
  
  let animationStep = timestamp => {
    if (!animationStart) animationStart = timestamp
    let frame = timestamp - animationStart
    if (frame < animDuration) {
      let easing = (frame / animDuration) * (2 - (frame / animDuration))
      let circle = `circle at ${x}px ${y}px`
      let color = `rgba(0, 0, 0, ${0.2 * (1 - easing)})`
      let stop = `${100 * easing}%`
      li.style.backgroundImage = `radial-gradient(${circle}, ${color} ${stop}, transparent ${stop})`
      animationFrame = window.requestAnimationFrame(animationStep)
    }
    else {
      li.style.backgroundImage = ''
      window.cancelAnimationFrame(animationStep)
    }
  }
  
  animationFrame = window.requestAnimationFrame(animationStep)
}
const listItems = document.querySelectorAll('li')
listItems.forEach(li => {
  li.addEventListener('click', createRipple)
})

* {
  font-family: Helvetica;
  box-sizing: border-box;
}

.box {
  display: inline-block;
  position: relative;
}

.dropdown {
  position: absolute;
  right: 0;
  top: 8px;
}

.dropdown-opener {
  cursor: pointer;
  user-select: none;
  position: absolute;
  width: 24px;
  height: 24px;
  background: url('https://i.imgur.com/Qt3Qwgp.png');
  background-repeat: no-repeat;
  background-position: right;
  right: 0;
}

.dropdown .dropdown-toggle {
  display: none;
}

.dropdown .dropdown-menu {
  list-style-type: none;
  transform: scale(0);
  opacity: 0;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
  
  position: absolute;
  top: 1.5em;
  right: 10px;
  background: white;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  border-radius: 5px;
  margin: 0;
  transform-origin: top right;
  padding: 7.5px 0 7.5px 0;
}

.dropdown .dropdown-toggle:checked + ul {
  transform: scale(1);
  opacity: 1;
}

.dropdown-menu li {
  padding: 7.5px;
  padding-left: 25px;
  cursor: pointer;
  transition: background .15s ease;
}

.dropdown-menu li:hover {
  background: #00000012;
}

.dropdown-opener-button {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 8px;
  top: 0;
}

.dropdown-opener-button svg {
  pointer-events: none;
}

.icon-button {
  padding: 0;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  transition: 
    box-shadow .25s ease,
    background .25s ease,
    transform .25s ease;
  background: #ffffffdd;
}

.icon-button:hover {
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.35);
}

.icon-button:active {
  background: #ffffffaa;
  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.35);
  transform: scale(0.9);
}

.icon-button ~ .dropdown-menu {
  top: 1.75em;
}

<div class="box">
  <img alt="sample" src="https://via.placeholder.com/200x200">
  <section class="dropdown layer--topright">
    <label class="dropdown-opener" for="menu-opener1"></label>
    <input class="dropdown-toggle" id="menu-opener1" type="checkbox">
    <ul class="dropdown-menu">
      <li>Foo1</li>
      <li>Bar1</li>
      <li>Baz1</li>
    </ul>
  </section>
</div>
<div class="box">
  <img alt="sample" src="https://via.placeholder.com/200x200">
  <section class="dropdown layer--topright">
    <label class="dropdown-opener" for="menu-opener2"></label>
    <input class="dropdown-toggle" id="menu-opener2" type="checkbox">
    <ul class="dropdown-menu">
      <li>Foo2</li>
      <li>Bar2</li>
      <li>Baz2</li>
    </ul>
  </section>
</div>
<div class="box">
  <img alt="sample" src="https://via.placeholder.com/200x200">
  <section class="dropdown layer--topright">
    <label class="dropdown-opener-button icon-button" for="menu-opener3">
      <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope icon">
        <g class="style-scope icon">
          <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" class="style-scope icon"></path>
        </g>
      </svg>
    </label>
    <input class="dropdown-toggle" id="menu-opener3" type="checkbox">
    <ul class="dropdown-menu">
      <li>Foo3</li>
      <li>Bar3</li>
      <li>Baz3</li>
    </ul>
  </section>
</div>

关于javascript - 如何实现类似于 youtube 卡片的上下文菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62366173/

文章推荐： java - 允许电子邮件交互 - Java 服务器

文章推荐： java keystore 文件限制

java - 自定义 JPA 实现//现有的无 SQL JPA 实现
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
java - 未由 S3FileSystem FileSystem 实现 Hadoop Jar 实现
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
c# - 实现 "Inherit"(实现)通用接口(interface)的接口(interface)？
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
java - 任何 JPA 实现(或更广泛的 Java ORM 实现)是否支持可更新游标
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。允许在行(实体)中进行迭代，并在对当前
generics - 如果我为 B 实现 From ，是否也会为 Vec 实现 From>？
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发

c# - 在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;

OpenVG 实现？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the

performance - 实现 (^)
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0

博弈树的C++实现
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。这是一个好的方法吗？ struct TreeElement{ SomeMoveType

字符串匹配alg的c++实现
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。例子: “贾

图算法的C++实现
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点

Python A* 实现
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-

DHT的C++实现
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。它必须能够将信息发布到 DHT 并检索它。最佳答案 OpenDHT是

C++实现
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？最佳答案 “C++ 实现”是指编译器加上链接

背包分支定界的C++实现
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印

FNV哈希的C#实现
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的

LRU缓存替换策略及C#实现
目录 LRU缓存替换策略核心思想不适用场景算法基本实现算法优化

大角度非迭代的空间坐标旋转C#实现
1. 绪论在前面文章中提到空间直角坐标系相互转换，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系

实现.Net7下的数据库定时检查
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .

查找算法之二分查找的C++实现
二分查找二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。

行者123

个人简介
我是一名优秀的程序员,十分优秀！

作者热门文章

html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？

JMeter 在响应断言中使用 span 标签的问题

html - 在 :hover and :active? 上具有不同效果的 CSS 动画

html - 相对于居中的 html 内容固定的 CSS 重复背景？

滴滴打车优惠券免费领取

全站热门文章

[rCore学习笔记028]Rust中的动态内存分配

[python]基于PyOD库实现数据异常检测

七，MyBatis-Plus扩展功能：乐观锁，代码生成器，执行SQL分析打印（实操详细使用）

掌握Docker：简化KES单机安装与管理的最佳实践

Windows应急响应-灰鸽子远控木马

Windows下安装Nessus10.8.3安装破解教程

kali安装和升级

USB和CAN都是用差分信号来传输数据，为什么CAN的传输距离能比USB远那么多？

ModbusTCP通信协议分析

Flutter实现骨架屏

首页

博学

6Ren·AI

商城

javascript - 如何实现类似于 youtube 卡片的上下文菜单？