CSS 下拉菜单

下拉菜单,一般情况下都使用 HTML <select> 元素来创建,但是 <select> 默认的样式太简陋了

如果如果要创建一个下拉菜单,我们一般都是自己定制

本章节,我们就来学习如何定制一个下拉菜单效果

最终效果

我们先来看看最终效果,当鼠标移动到元素上时会显示下拉菜单

文本下拉菜单

简单教程

简单教程,简单编程







简单教程,简单编程

下拉菜单 HTML 结构

使用 CSS 创建一个下拉菜单,需要创建下面的 HTML 结构

<div class="dropdown">
  <span class="dropspan">文本下拉菜单</span>
  <div class="dropdown-content">
    <p>简单教程</p>
    <p>简单教程,简单编程</p>
  </div>
</div>
  1. class='dropdown' 先定义一个下拉菜单容器
  2. <span class="dropspan"> 定义下拉菜单按钮
  3. <div class="dropdown-content"> 定义下拉菜单要显示的内容

基本的原理就是:

  1. 默认情况下,设置隐藏 CSS display:none 隐藏 .dropdown-content

  2. 当鼠标移动到 .dropdown 上时,去掉 .dropdown-content 的隐藏 CSS

注意: 因为要显示的内容默认大小和 .dropdown 一样,所以可能需要特意为 dropdown-content 添加宽度 CSS

基本下拉菜单

了解了下拉菜单的 HTML 结构和原理,我们就可以为它们添加 CSS 属性了

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

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

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

运行范例 »

  1. .dropdown 使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用position:absolute) 的右下角位置

  2. .dropdown-content 类中是实际的下拉菜单

    默认是隐藏的,在鼠标移动到指定元素后会显示

    min-width 的值设置为 160px

    注意: 如果想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)

  3. 使用 box-shadow 属性让下拉菜单看起来像一个"卡片"

  4. :hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单

下拉按钮

创建下拉按钮,并允许用户选取列表中的某一项


可以在下拉的内容中添加 <a> 标签来创建下拉按钮

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

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

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

.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;
}
</style>

<div class="dropdown dropdown2">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content" style="min-width: 250px">
    <a href="void(0)">CSS 基础教程</a>
    <a href="void(0)">Python 基础教程</a>
    <a href="void(0)">Ruby  基础教程</a>
  </div>
</div>

运行范例 »

下拉内容对齐方式

左 ( float:left )

右 ( float:right )


如果你想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右

则需要给 .dropdown-content 添加 CSS 样式 right: 0;

.dropdown-content {right: 0;}

运行范例 »

更多范例

  1. 图片下拉 演示了如何如何在下拉菜单中添加图片

  2. 导航条下拉 演示了如何在导航条上添加下拉菜单

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.