网赚妈妈

 找回密码
 立即注册
搜索
查看: 446|回复: 7

[网赚之家] 前端新手教程 CSS丨css 下拉菜单教程

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-10-2 23:54:30 | 显示全部楼层 |阅读模式

    今天教大家学习如何制作网页的下拉菜单~

    MQ272K4Q3qDqMcq2.jpg

    CSS 下拉菜单

    首先,我们要使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

    1.下拉菜单样式

    RoCQ00IeHPLOdqc5.jpg

    (样式一)

    a5OiVdivpC5PmEIi.jpg

    (样式二)

    2.基本下拉菜单

    当鼠标移动到指定元素上时,会出现下拉菜单。

    aU7aExJs7L6sMOl4.jpg

    (效果图)

    相关代码如下

    <style>

    .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;

    }

    </style>

    <div class="dropdown">

    <span>Mouse over me</span>

    <div class="dropdown-content">

    <p>Hello World!</p>

    </div>

    </div>

    实例解析

    HTML 部分:

    我们可以使用任何的 HTML 元素来打开下拉菜单,如:<span>, 或 a <button> 元素。

    使用容器元素 (如: <div>) 来创建下拉菜单的内容,并放在任何你想放的位置上。

    使用 <div> 元素来包裹这些元素,并使用 CSS 来设置下拉内容的样式。

    CSS 部分:

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

    .dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。

    UrVQc3Tnu0AQoRuY.jpg

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

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

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

    Nif2F2rz784hTATi.jpg

    3.下拉菜单

    首先需要创建下拉菜单,并允许用户选取列表中的某一项。这个实例类似前面的实例,当我们在下拉列表中添加了链接,并设置了样式:

    E23ZU62YmmuJhuYB.jpg

    (效果图)

    相关代码如下

    <style>

    /* 下拉按钮样式 */

    .dropbtn {

    background-color: #4CAF50;

    color: white;

    padding: 16px;

    font-size: 16px;

    border: none;

    cursor: pointer;

    }

    /* 容器 <div> - 需要定位下拉内容 */

    .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">

    <button class="dropbtn">下拉菜单</button>

    <div class="dropdown-content">

    <a href="#">百度 1</a>

    <a href="#">百度 2</a>

    <a href="#">百度 3</a>

    </div>

    </div>

    小伙伴们有没有学会呢?没有学会记的私信小编"web"

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-2 23:54:59 | 显示全部楼层
    bs里不是有下拉菜单的吗?
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:05:02 | 显示全部楼层
    刚好这个贼不熟练[捂脸][握手]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:15:40 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:25:14 | 显示全部楼层
    现在CSS3做下拉已经很简单了,以前还需要借助js
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:35:28 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:45:10 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-10-3 00:54:55 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-24 08:15 , Processed in 0.159205 second(s), 14 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表