纯css下拉菜单 无需js

下面是关于如何实现“纯CSS下拉菜单”的攻略以及两个示例。

什么是纯CSS下拉菜单？

“纯CSS下拉菜单”是指使用CSS技术实现的下拉菜单，不需要JavaScript或其他脚本语言的支持。这种下拉菜单主要基于CSS复选框（checkbox）的伪类选择器（:checked）来控制菜单的展开和收起。当用户点击复选框时，相应的菜单项就会展开或收起。

实现纯CSS下拉菜单的步骤

1. 使用HTML创建菜单结构

首先，需要使用HTML创建下拉菜单的结构。通常，一个下拉菜单包含一个抬头和多个菜单项。抬头可以是一个链接，点击链接我们可以执行一些操作。在本文中，我们将抬头包含在一个标签（label）中，点击抬头时将会切换菜单的状态。每个菜单项则可以是链接、按钮、复选框，或其他任何HTML元素。下面是菜单的基本结构示例：

<label for="menu-cb">菜单</label>
<input type="checkbox" id="menu-cb">
<ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
</ul>

1. 使用CSS样式设计菜单布局

接下来，使用CSS样式设计菜单布局。可以使用CSS中的绝对或相对定位来控制菜单的位置和展开方式。菜单展开时，菜单项应该出现在抬头下方或抬头旁边。菜单项的显示方式也可以根据个人喜好进行调整，例如可以使用悬停效果或子菜单等。

1. 定义复选框状态样式

由于纯CSS下拉菜单依赖于复选框的状态，需要在CSS中定义不同状态的样式，以显示和隐藏菜单项。通过为伪类选择器 :checked 设置样式，菜单可以在用户点击复选框时展开或收起。下面是关键的代码示例：

input[type="checkbox"] {
    display: none;
}

/* 定义未选中时的样式 */
label:before {
    content: ""; /* 添加一个空内容 */
    display: inline-block;
    background: gray; /* 抬头的背景颜色 */
    width: 30px; /* 抬头的宽度 */
    height: 20px; /* 抬头的高度 */
}

/* 定义选中时的样式 */
input:checked ~ ul {
    display: block;
}

/* 菜单项的样式 */
ul {
    display: none;
    position: absolute;
    top: 20px; /* 距离顶部的距离 */
    left: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    background: white;
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
}

ul li {
    padding: 5px 10px;
}

ul li:hover {
    background: #eee;
}

示例

示例1：基本的纯CSS下拉菜单

下面是一个基本的纯CSS下拉菜单示例。当用户点击菜单抬头时，菜单项将展开或隐藏。

<label for="menu-cb">菜单</label>
<input type="checkbox" id="menu-cb">
<ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
</ul>

CSS代码

input[type="checkbox"] {
    display: none;
}

label:before {
    content: "";
    display: inline-block;
    background: gray;
    width: 30px;
    height: 20px;
}

input:checked ~ ul {
    display: block;
}

ul {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    background: white;
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
}

ul li {
    padding: 5px 10px;
}

ul li:hover {
    background: #eee;
}

示例2：带有子菜单的纯CSS下拉菜单

下面是一个带有子菜单的纯CSS下拉菜单示例。当用户鼠标悬停在菜单项上时，子菜单将展开或隐藏。这个示例还演示了如何添加箭头符号提示子菜单的展开方向。

<label for="menu-cb">菜单</label>
<input type="checkbox" id="menu-cb">
<ul>
    <li><a href="#">菜单项1</a></li>
    <li>
        <a href="#">菜单项2</a>
        <ul>
            <li><a href="#">子菜单项1</a></li>
            <li><a href="#">子菜单项2</a></li>
            <li><a href="#">子菜单项3</a></li>
        </ul>
        <span class="arrow-down"></span>
    </li>
    <li><a href="#">菜单项3</a></li>
</ul>

CSS代码

input[type="checkbox"] {
    display: none;
}

label:before {
    content: "";
    display: inline-block;
    background: gray;
    width: 30px;
    height: 20px;
}

input:checked ~ ul {
    display: block;
}

ul {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    background: white;
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
}

ul li {
    padding: 5px 10px;
    position: relative;
}

ul li:hover {
    background: #eee;
}

/* 子菜单和箭头样式 */
ul ul {
    top: 0;
    left: 100%;
}

li > .arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 4px 0 4px;
    border-color: #000 transparent transparent transparent;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -2px;
}

li:hover > .arrow-down {
    border-color: transparent transparent #000 transparent;
    margin-top: -6px;
}

通过上面的两个示例，我们可以看出如何通过纯CSS技术实现下拉菜单，并添加常见的效果，如子菜单和箭头提示。在实际开发中，还可以结合CSS动画和过渡效果，让菜单更加美观和动态。