精华内容
下载资源
问答
  • css如何设置下拉菜单
    2021-06-09 04:33:22

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

    639e717a59913807157704ac2593deb3.png

    使用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;

    }

    实例解析

    HTML 部分:

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

    使用容器元素 (如:

    ) 来创建下拉菜单的内容,并放在任何你想放的位置上。

    使用

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

    CSS 部分:

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

    .dropdown-content 类中是实际的下拉菜单。默认是隐藏的,在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。 注意: 如果你想设置下拉内容与下拉按钮的宽度一致,可设置 width 为 100% ( overflow:auto 设置可以在小尺寸屏幕上滚动)。

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

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

    下拉内容对齐方式

    float:left;

    float:right;

    如果你想设置右浮动的下拉菜单内容方向是从右到左,而不是从左到右,可以添加以下代码 right: 0;

    提示信息

    实例解析

    HTML) 使用容器元素 (like

    ) 并添加 "tooltip" 类。在鼠标移动到
    上时显示提示信息。

    提示文本放在内联函数上(如 ) 并使用class="tooltiptext"。

    CSS)tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。

    定位提示工具

    提示工具显示在指定元素的右侧(left:105%) 。

    注意 top:-5px 同于定位在容器元素的中间。使用数字 5 因为提示文本的顶部和底部的内边距(padding)是 5px。

    如果你修改 padding 的值,top 值也要对应修改,这样才可以确保它是居中对齐的。

    在提示框显示在左边的情况也是这个原理。

    显示在右侧:.tooltip .tooltiptext {

    top: -5px;

    left: 105%;

    }

    显示在左侧:.tooltip .tooltiptext {

    top: -5px;

    right: 105%;

    }

    显示在头部:.tooltip .tooltiptext {

    width: 120px;

    bottom: 100%;

    left: 50%;

    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */}

    显示在底部:.tooltip .tooltiptext {

    width: 120px;

    top: 100%;

    left: 50%;

    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */}

    添加箭头

    我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志,箭头是由边框组成的,但组合起来后提示工具像个语音信息框。

    1.顶部提示框/底部箭头:.tooltip .tooltiptext::after {

    content: " ";

    position: absolute;

    top: 100%; /* 提示工具底部 */

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: black transparent transparent transparent;

    }

    在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部。left: 50% 用于居中对齐箭头。

    注意:border-width 属性指定了箭头的大小。如果你修改它,也要修改 margin-left 值。这样箭头在能居中显示。

    border-color 用于将内容转换为箭头。设置顶部边框为黑色,其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。

    更多相关内容
  • jQuery下拉菜单分类搜索框代码JQuery drop-down menu category search box code
  • 主要介绍了vue下拉菜单组件(含搜索)的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本文实例讲述了Android编程实现二级下拉菜单及快速搜索的方法。分享给大家供大家参考,具体如下: 一、我们要做什么? 上面有个搜索框,下面是一个二级下拉菜单。 输入查询内容,下面列表将显示查询结果。 二、...
  • Jquery带搜索框的下拉菜单,需要的朋友可以参考一下
  • 当我们需要快速输入数据内容,或者防止数据录入错误,或者规范录入的格式时,我们常常使用【数据验证】制作下拉菜单来实现,比如如下数据,我们想根据人员姓名录入其性别,可以采用下拉框的方法来填充。那如果我们...
    中岁颇好道,晚家南山陲。兴来每独往,胜事空自知。行到水穷处,坐看云起时。偶然值林叟,谈笑无还期。 --[唐] 王维《终南别业》

    下拉菜单,相信大家一定不陌生。

    当我们需要快速输入数据内容,或者防止数据录入错误,或者规范录入的格式时,我们常常使用【数据验证】制作下拉菜单来实现,比如如下数据,我们想根据人员姓名录入其性别,可以采用下拉框的方法来填充。

    f9b825792551f3d3976216a5cf37c271.gif

    那如果我们涉及到的下拉选项的内容非常多,多到几十,那我们再进行使用下拉选择的时候,就会很困难。

    cc724bed63fe6181da67e0a3ef381981.png

    那有没有办法去改善呢,当然是有的,今天就给大家分享一个操作技巧,制作搜索式下拉菜单。

    可能大家听到会有疑问,什么是搜索式下拉菜单?

    当我们在使用搜索引擎的时候,搜索部分内容,下面就会出现一部分类似内容,供你选择,而搜索式下拉菜单可以实现相同的效果。

    4b125b69a3760f44d9e2fc48d4a84b0c.png

    先给大家看下演示图:

    a241c61b890fe605e7e0bc3d34e5bbb8.gif

    ​下面开始我们今天的Excel知识分享。

    操作步骤:

    1、首先我们需要对我们的数据源进行排序,不管是升序还是降序都是可以的

    37088bf279fab5c1c776c57b29273840.gif

    2、选择D2:D5数据区域,点击菜单栏中的【数据】-【数据验证】,在【设置】里的【允许】框,选择【序列】。

    1bb2999766ef744e1b9c17426b1f4db8.png

    3、在序列下的【来源】处,输入如下公式:

    =OFFSET($A$1,MATCH(D2&"*",$A$2:$A$20,0),0,COUNTIF($A$2:$A$20,D2&"*"),1)

    0e80f54fd5ddbb334540645eb69b642a.png

    公式讲解:

    这个公式的主要关键在于OFFSET函数的应用,首先我们先看下OFFSET函数的定义。

    OFFSET(起始位置,向下或向上移动几行,向右或向左移动几行,引用区域的高度,引用区域的宽度)

    拿个案例来讲下:

    比如我们在E2输入公式:

    =OFFSET(A1,3,3,1,1)

    起始位置是A1,向下移动3行,向右移动3行,引用区域的高度1,引用区域的宽度1,

    可以看到得到的值为9。

    29dc5245524a8b5a726298ec10c2b864.png

    再比如把E2公式改成,然后拖动公式

    =OFFSET(A1:B2,3,2,2,2)

    起始位置为A1:B2,向下移动3行,向右移动2行,引用区域的高度2,引用区域的宽度2,即得到了C4:D5区域。

    注意:公式输入完,因为引用的为数组,必须按Ctrl+Shift+Enter三键结束

    47898f8a80ec7c758696fa19c7be71a2.gif

    这时我们再看上面的公式:

    =OFFSET($A$1,MATCH(D2&"*",$A$2:$A$20,0),0,COUNTIF($A$2:$A$20,D2&"*"),1)

    1、A1:代表的起始位置

    2、MATCH(D2&"*",$A$2:$A$20,0)

    确定要向下移动几行,MATCH函数是查找函数,查找值D2&"*"$A$2:$A$17处于第几行,0代表精确查找。其中查找值是和"*",即通配符搭配使用的,可把包含D2关键字的所有内容显示,注意MATCH函数查找返回的是第一次出现的位置

    3、0:代表向右移动0行,即列不移动

    4、COUNTIF($A$2:$A$20,D2&"*")

    代表引用的区域高度,通过COUNTIF函数计算包含关键字D2的内容有几行,即下拉菜单显示的行内容数。

    5、1:代表引用的宽度,因为我们只有1列,所以为数字1.

    比如D2为"格力",我们拆解以上公式:

    MATCH函数返回的值为5

    fa3b968967c9f6a6adbebb1d05211d4a.png

    COUNTIF函数返回的是4

    5185c7bd4b1932db05b30a7f655fceeb.png

    最后公式变成了:

    =OFFSET(A1,5,0,4,1)

    即把A1单元格向下移动5行,向右移动0列,引用的高度为4,宽度为1,即返回了A6:A9区域,就是我们想要的结果了。

    4、点击确定,即设置完成了,但是当我们再输入内容准备搜索的时候,会提示如下错误。

    b82fb80c00f889fd4679aa1866470c71.png

    这是为什么呢?

    主要是是因为,我们设置的下拉选项里面没有单独存在TCL这个选项,导致下拉异常,此时我们需要把数据验证里面的内容修改下,只需要把【数据验证】-【出错警告】里面的选项勾选掉即可。

    当我们再输入内容进行选择的时候,就已经正确了。

    0f29c70b36abe0ce147ce8d40df5d4ba.gif

    最后针对销量内容,我们再使用VLOOKUP函数进行查找即完成了。

    E2公式:

    =IFERROR(VLOOKUP(D2,$A$2:$B$20,2,0),"")

    4cee100f23efdb4eda7b7de004347618.png

    VLOOKUP实现查找D2的内容,查找区域A2:B20,返回第2列,0实现精确查找。

    再使用IFERROR函数,当查找不到内容时,以空值显示。

    这样一整套下拉查询菜单就完成制作完成了,这个技巧的主要用到了OFFSET函数、MATCH函数、COUNTIF函数以及结合通配符"*"的使用,你学会了吗?不会的话赶紧去实际操作下吧。

    如果觉得文章对你有帮助的话,希望大家帮忙点赞加分享哦~,谢谢

    本文由彩虹Excel原创,欢迎关注,带你一起长知识!

    展开全文
  • 这是一款点击input文本框弹出下拉菜单,选中菜单,支持多选条件,进行搜索的jQuery搜索下拉菜单选择插件,功能很强大的下拉框搜索代码。 js代码 [removed] var Random = Mock.Random; var json1 =...
  • jQuery下拉菜单选中搜索框插件代码jQuery下拉菜单选中搜索框插件代码
  • 一款点击input文本框弹出下拉菜单,选中菜单,支持多选条件,进行搜索的jQuery搜索下拉菜单选择插件,功能很强大的下拉框搜索代码。
  • 主要介绍了react实现移动端下拉菜单的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 搜狗带下拉菜单搜索
  • 主要为大家详细介绍了微信小程序实现顶部下拉菜单栏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了基于bootstrap按钮式下拉菜单组件的搜索建议插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • dropdownmenu一个写好的微信小程序帅选条件框,多条件筛选,下拉菜单,直接引用组件就可以 读懂并灵活运用必须具有html,css ,js基础,除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档
  • jQuery搜索框插件下拉菜单选择代码是一款点击input框弹出下拉菜单,选中菜单,支持多选条件,进行搜索功能代码。
  • 主要介绍了微信小程序 下拉菜单简单实例的相关资料,需要的朋友可以参考下
  • iOS通过iOS进行下拉菜单下拉菜单这是一个支持iOS中的下拉菜单的Swift库在以下视频上观看视频:支持搜索和返回正确的索引自定义hideOp iOS通过iOS搜索下拉菜单在iOS中支持Swift下拉菜单观看视频:支持搜索并返回...
  • jQuery下拉搜索菜单选择插件是一款jQuery基于bootstrap制作dom面向对象点击下拉框弹出列表菜单搜索筛选框选择菜单插件。
  • 前端实现自定义select下拉框,带搜索功能,无需引入第三方资源
  • jQuery搜索框插件下拉菜单选择代码是一款点击input框弹出下拉菜单,选中菜单,支持多选条件,进行搜索功能代码。
  • 使用jq实现二级菜单效果,jq下拉菜单效果,这个下拉菜单,一般大多数人都选择使用ui框架,但是也有人还是需要jq实现的,写个demo分享给大家
  • 小程序下拉搜索框弹出菜单动画效果,外观美美哒的demo
  • 本文将为大家详细介绍下下拉菜单select样式如何设置才能够兼容IE6/IE7/IE8/火狐等主流浏览器,具体的实现代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
  • 支持下拉菜单 下拉树 模糊搜索,支持中间字段的匹配
  • 2.使用dd嵌套第二级菜单,初始隐藏、position为absolute,使用z-index浮出页面层 /*总菜单容器*/ .menu {  display: block;  height: 38px; }   /*一级菜单*/ .menu dt {  font-size: 15px;  float: left;  /*...
  • jQuery多功能搜索框插件下拉菜单选择代码.rar

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,117
精华内容 23,246
关键字:

如何设置下拉菜单可以搜索