纯 CSS 可点击下拉菜单? [英] Pure CSS clickable dropdown?

问题描述

本教程解释了如何使用:hover用于在悬停时设置 HTML 元素样式的伪类，以及如何在纯 CSS(不使用任何 JavaScript)中悬停在特定元素上时创建下拉列表.

是否可以在纯 CSS 中创建与下面示例中相同的下拉列表，但在单击元素时而不是悬停在元素上时?

我宁愿完全不使用 JavaScript，或者 - 如果没有 JavaScript 不可能的话 - 尽可能少使用 JavaScript.下拉列表的项目本身应该是可点击的.

示例:

.dropdown {位置:相对；显示:内联块；}.dropbtn {背景色:#4CAF50；白颜色;填充:16px；字体大小:16px；边界:无；光标:指针；}.下拉内容{显示:无；位置:绝对；右:0；背景色:#f9f9f9；最小宽度:160px；框阴影:0px 8px 16px 0px rgba(0,0,0,0.2);z-索引:1；}.dropdown-content a {颜色:黑色;填充:12px 16px；文字装饰:无；显示:块；}.dropdown-content a:hover {background-color: #f1f1f1}.dropdown:悬停 .dropdown-content {显示:块；}.dropdown:悬停 .dropbtn {背景颜色:#3e8e41；}

<button class="dropbtn">左</button><div class="dropdown-content" style="left:0;"><a href="#">链接 1</a><a href="#">链接 2</a><a href="#">链接 3</a>

解决方案

这里使用的是隐藏的复选框，并在选中"时显示菜单.

/*隐藏输入/复选标记和子菜单*/输入，ul.submenu {显示:无；}/*定位标签*/标签 {位置:相对；显示:块；光标:指针；}/*检查输入时显示子菜单*/输入:检查〜ul.submenu {显示:块；}

<label for="check01">菜单</label><ul class="子菜单"><li><a href="#">项目 1</a></li><li><a href="#">项目 2</a></li>

取自 this Codepen 并进行了简化.

This tutorial explains how to use the :hover pseudo-class to style HTML elements on hover and how to how create a dropdown when hovering over a particular element in pure CSS (without using any JavaScript).

Is it possible to create the same dropdown as the one in the example below, in pure CSS, but when clicking an element instead of when hovering over it?

I would prefer to use no JavaScript at all, or - if not possible without JavaScript - as little JavaScript as possible. The items of the drowndown should be clickable themselves.

Example:

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

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

解决方案

Here you are using a hidden checkbox, and showing the menu when it is "checked".

/*hide the inputs/checkmarks and submenu*/
input, ul.submenu {
  display: none;
}

/*position the label*/
label {
  position: relative;
  display: block;
  cursor: pointer;
}

/*show the submenu when input is checked*/
input:checked~ul.submenu {
  display: block;
}

<input id="check01" type="checkbox" name="menu" />
<label for="check01">Menu</label>
<ul class="submenu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

Taken from this Codepen and simplified.

这篇关于纯 CSS 可点击下拉菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！