我正在学习一些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>
如您所见,代码很乱且有问题...但是我尝试解决的主要问题是:
- 在点击省略号按钮时上下文菜单位置不正确
- 项目显示为项目符号标记
- 与YouTube非常干净的样式相比,项目样式很丑陋
因此,如果您能解释如何解决这些问题,以便从我的尝试中制作出可用的东西,那就太棒了。
或者,如果我的方法完全错误,无法使用并准备扔掉...您能否请解释一下实现我的目标的最佳方法?
提前感谢。
:hover
伪选择器更改其样式(第三个框中演示了这一点)。当您点击菜单外部时,您是指在框内还是框外进行单击?无论哪种方式,您都需要JS来实现。在SO上有很多回答涉及您的第二个问题。 - Richard<li>
元素的样式吗?你也可以使用CSS中的:hover
伪选择器来更改样式。至于Youtube设计,我在我的电脑上找不到溢出菜单。在我的手机上,根本无法悬停在<li>
元素上。因此,我不确定你想要什么样的效果。我想留下一条注释,提醒你,在涉及设计问题时,添加一个HTML + CSS实现所需设计的截图可能有助于消除任何困惑。 - Richard