logo标签列表

如何实现类似YouTube卡片的上下文菜单？

javascripthtmlcss
6

我正在学习一些CSS知识，今天我想实现一个类似的上下文菜单（当你点击YouTube卡片上的垂直省略号时显示）, 但我的尝试并没有取得很好的进展。这是我目前的代码：

<!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>

如您所见，代码很乱且有问题...但是我尝试解决的主要问题是：

  1. 在点击省略号按钮时上下文菜单位置不正确
  2. 项目显示为项目符号标记
  3. 与YouTube非常干净的样式相比，项目样式很丑陋

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

或者，如果我的方法完全错误，无法使用并准备扔掉...您能否请解释一下实现我的目标的最佳方法？

提前感谢。

3个回答
9

问题 #1

点击溢出菜单按钮时上下文菜单被放错位置了。实际上，上下文菜单并没有被放错位置。<label>元素中的for属性引用了错误的上下文菜单。例如，在第一个.container中，<label>元素的for值为menu-opener1，但在第二个.container中<label>元素的for值与第一个相同。因此，单击任何一个标签都会导致打开第一个容器中的下拉菜单，因为这两个标签都会使第一个隐藏的复选框被选中。

我们可以怎么做呢？只需更改id值，使每个下拉菜单都具有唯一的id值。然后，在<label>元素内使用该id值作为for值。

问题 #2

要隐藏<ul>中<li>元素的项目符号，您必须在CSS中使用list-style-type: none，而不是style-type: none。

问题 #3

这是一个非常主观的问题。一种设计对某些人来说可能很清晰，但对其他人来说可能不够清晰。尽管如此，我尝试达到我想看到的效果。以下是您可以更改以改善设计方面的一些内容。

  • 更改字体系列，使其适合您的主题。我在此处选择了无衬线字体系列。
  • 为您的上下文菜单添加背景。在这里，我选择了白色。
  • 在每个<li>元素之间添加间距。在这里，我使用了line-height。您也可以在每个<li>元素上使用padding或margin。
  • 添加box-shadow以显示高度。Google的Material Design建议使用此技术来显示元素的z位置更高。
  • 允许从上下文菜单从可见状态变为不可见状态等过渡。这意味着避免使用无法过渡的CSS属性（例如visibility和display）。在这里，我选择使用transform: scale和opacity过渡。

其他问题

从语义上讲，您的HTML标签是不正确的。

  • <nav>（导航）元素用于在页面之间进行导航。这里，您应该使用<menu> 元素代替。但是，由于它仍处于试验阶段，我选择使用了<section>。
  • 您正在使用一些不存在的 HTML 标签（例如 <icon-button> 和 <icon>）。请尝试参考此处获取有效的 HTML 标签和此处获取有效的 SVG 标签。
  • 最后一个 .container 项目有一个按钮，它将检查隐藏的复选框。但是， <button> 元素不能与 <label> 元素一起使用。因此，尝试使 <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>

更新

由于我没有完全理解提问者所说的“当鼠标悬停在菜单项上时，更改状态有多困难”，因此我决定对 <li> 元素进行悬停效果，并在点击时添加不同的涟漪效果。 我建议阅读这篇 有关创建涟漪效果的文章。

另外，根据要求，增加了一个功能，即在菜单框之外单击时隐藏菜单。 这里是可运行的代码片段。

// 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>

哇，这是目前为止最好的答案，真的很酷...让菜单项在鼠标悬停时改变状态有多难？最后，当点击菜单外部（如YouTube）时关闭菜单有多难？除此之外，它已经值得我的点赞。 - BPL
@BPL 我不确定您所说的更改菜单项状态的意思。但是，您可以使用:hover伪选择器更改其样式（第三个框中演示了这一点）。当您点击菜单外部时，您是指在框内还是框外进行单击？无论哪种方式，您都需要JS来实现。在SO上有很多回答涉及您的第二个问题。 - Richard
你所说的可以在第三个框中演示，我没有看到任何东西在悬停在第三个框中的项目时发生变化（类似于YouTube）...无论如何，关于悬停时样式的更改，这是我自己知道如何做的，不用担心...另一方面，关于菜单消失和js...是否实现起来太困难了（像YouTube一样）？无论如何，这只是额外的内容，你的问题已经足够好了，非常感谢。 - BPL
@BPL 哦，我明白了。你是指在悬停时更改<li>元素的样式吗？你也可以使用CSS中的:hover伪选择器来更改样式。至于Youtube设计，我在我的电脑上找不到溢出菜单。在我的手机上，根本无法悬停在<li>元素上。因此，我不确定你想要什么样的效果。我想留下一条注释，提醒你，在涉及设计问题时，添加一个HTML + CSS实现所需设计的截图可能有助于消除任何困惑。 - Richard
这是一个非常好的和准确的尝试，你赢得了我的“感谢此答案”：p - Om_16
显示剩余2条评论
3

$(document).ready(function() {
  $('.dropdown-opener').on('click', function() {
    $('.dropdown-menu').removeClass('show');
    $(this).parents('.dropdown').children('.dropdown-menu').toggleClass('show')
  });
  $(document).on('click', function(e) {
    if (!(e.target.matches('.dropdown-opener') || e.target.matches('.fa.fa-ellipsis-v'))) {
      $('.dropdown-menu').removeClass('show');      
     //debugger;
    }
  });
});
.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;
  list-style-type: none;
}

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

ul.dropdown-menu {
  background-color: #efefef;
  list-style-type: none;
  line-height: 1.5rem;
  border-radius: 3px;
  padding: 0;
  min-width: 60px;
  float: left;
  font-size: 14px;
  font-weight: bold;
  -webkit-box-shadow: 2px 3px 3px -1px rgba(196, 186, 196, 1);
  -moz-box-shadow: 2px 3px 3px -1px rgba(196, 186, 196, 1);
  box-shadow: 2px 3px 3px -1px rgba(196, 186, 196, 1);
}

ul.dropdown-menu.show {
  display: block;
}

ul.dropdown-menu li a {
  text-decoration: none;
  color: #030303;
  width: 100%;
  float: left;
  padding: 7px 15px;
  box-sizing: border-box;
}

ul.dropdown-menu li a:hover {
  background: #ddd;
}

ul.dropdown-menu li a i {
  margin-right: 10px;
}

.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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
  </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-opener2"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></label>
        <input class="dropdown-toggle" type="checkbox">
        <ul class="dropdown-menu">
          <li><a href="#"> <i class="fa fa-heart" aria-hidden="true"></i> Wishlist</a></li>
          <li><a href="#"><i class="fa fa-share-alt" aria-hidden="true"></i>
              Share</a></li>
          <li><a href="#"><i class="fa fa-ban" aria-hidden="true"></i> Not interested</a></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-opener2"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></label>
        <input class="dropdown-toggle" type="checkbox">
        <ul class="dropdown-menu">
          <li><a href="#"> <i class="fa fa-heart" aria-hidden="true"></i> Wishlist</a></li>
          <li><a href="#"><i class="fa fa-share-alt" aria-hidden="true"></i>
              Share</a></li>
          <li><a href="#"><i class="fa fa-ban" aria-hidden="true"></i> Not interested</a></li>
        </ul>
      </nav>
    </div>
  </body>

</html>

您好，请查看这个 jsfiddle，希望它能对您有所帮助。

https://jsfiddle.net/hm2zuo3r/2/

嗨，谢谢，是的，与@anatolhiman的代码片段类似，这个也肯定解决了我在问题中提到的许多问题，但它仍然缺少重要的一些功能。例如，当您悬停在项目上时，它们不会更改状态，当您单击菜单外部时，它不会变得不可见。换句话说，它不会像Youtube的上下文菜单那样运行。 - BPL
@BPL 我已经更新了 Fiddle 的链接，请检查一下。 - Girish Sasidharan
哇，这个很棒。目前为止，你的回答是最好的，值得被验证/奖励...它完全可以直接使用，除了一些细节问题，比如不要让菜单与菜单按钮重叠，看起来非常完美。我会让社区决定哪个答案是最好的，在本周结束时，获得更多赞的答案将被验证/奖励...为什么？因为现在对我来说已经很难决定了，这里有很多好的答案 :/，非常感谢！在此期间，我会给你点赞的。 - BPL
这是一个非常好的和准确的尝试，甚至让我给你点了个“感谢这个答案”的赞 :p - Om_16
1

  1. 为了触发正确的菜单，您需要使用唯一的ID(唯一命名)。现在，当点击任何一个触发器时，都会触发代码中的第一个菜单。

  2. 使用CSS中的list-style-type:none来从列表中删除项目符号

  3. 您需要在CSS中对ul.dropdown-menu项目进行样式设置，例如添加一些padding、background-color（例如白色），以及对ul.dropdown-menu li进行字体大小、行高等样式设置。

<!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;
}

ul.dropdown-menu {
  background-color: white;
  padding: 1rem 2rem;
  list-style-type: none;
  line-height: 2rem;
}

ul.dropdown-menu li a {
  color: orange;

}

.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><a href="#">Foo1</a></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-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>
    </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>

我已经用新代码编辑了我的问题。我尝试应用了您提供的第1点和第2点，但不幸的是由于某些原因我仍然做错了...您能否在您的回答中发布片段应该看起来像什么？ - BPL
前两个菜单ID仍然相同，它们都被称为menu-opener1。最后一个菜单代码块不同，似乎根本不起作用，如果您将其与前两个相同，但使用menu-opener3作为其ID，则应该可以正常工作。您尚未尝试使用CSS对菜单（ul等）进行样式设置，如果您尝试，我可以在看到您的尝试后指导您。要开始为菜单本身设置样式，请创建一个css规则.dropdown-menu { }。 - anatolhiman
已添加正确的ID以针对前两个菜单进行操作，并添加了一些CSS样式以帮助您入手。您看到要处理的模式了吗？至于第三个菜单，我不知道您想要实现什么，所以我没有对其进行更改。 - anatolhiman
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接