css 实现 dropdown 的方式

最新推荐文章于 2023-07-01 11:02:15 发布
最新推荐文章于 2023-07-01 11:02:15 发布
阅读量3.6k 收藏 1
点赞数 1
分类专栏： internet resource javaweb

第一种:display:none和display:block切换

复制代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         ul{
 8             list-style: none;
 9         }
10         .nav>li{
11             float: left;
12         }
13         ul a{
14             display: block;
15             text-decoration: none;
16             width: 100px;
17             height: 50px;
18             text-align: center;
19             line-height: 50px;
20             color: white;
21             background-color: #2f3e45;
22         }
23         .nav>li:first-child a{
24             border-radius: 10px 0 0 10px;
25         }
26         .nav>li:last-child a{
27             border-radius: 0 10px 10px 0;
28         }
29         .drop-down{
30             /*position: relative;*/
31         }
32         .drop-down-content{
33             padding: 0;
34             display: none;
35             /*position: absolute;*/
36         }
37         
38         h3{
39             font-size: 30px;
40             clear: both;
41         }
42         .drop-down-content li:hover a{
43             background-color:red;
44         }
45         .nav .drop-down:hover .drop-down-content{
46             display: block;
47         }
48 </style>
49 </head>
50 <body>
51     <ul class="nav">
52         <li><a href="#">下拉菜单</a></li>
53         <li class="drop-down"><a href="#">下拉菜单</a>
54             <ul class="drop-down-content">
55                 <li><a href="#">我是1</a></li>
56                 <li><a href="#">我是2</a></li>
57                 <li><a href="#">我是3</a></li>
58             </ul>
59             </li>
60         <li><a href="#">下拉菜单</a></li>
61         <li><a href="#">下拉菜单</a></li>
62         <li><a href="#">下拉菜单</a></li>
63     </ul>
64     <h3>我是测试文字</h3>
65 </body>
66 </html>

复制代码

这是首先考虑到的实现方法，给 .drop-down-content 添加display:none，当悬浮在.drop-down上时 .drop-down-content的display变成block，缺点是不能添加过渡属性，慢慢弹出下来菜单。当.drop-down-content显示时会把后面的盒子往下挤，因为.drop-down-content 显示时是存在于文档流中的，给.drop-down设置position:relative，.drop-down-content设置position:absolute，使下拉菜单脱离了文档流来解决，上面注释的地方改过来即可

 

第二种方法:给悬浮的这个li设置一个固定高度，然后设置超出部分隐藏，悬浮时显示。

复制代码

 1 <style>
 2         ul{
 3             list-style: none;
 4         }
 5         .nav>li{
 6             float: left;
 7         }
 8         ul a{
 9             display: block;
10             text-decoration: none;
11             width: 100px;
12             height: 50px;
13             text-align: center;
14             line-height: 50px;
15             color: white;
16             background-color: #2f3e45;
17         }
18         .nav>li:first-child a{
19             border-radius: 10px 0 0 10px;
20         }
21         .nav>li:last-child a{
22             border-radius: 0 10px 10px 0;
23         }
24         .drop-down{
25             /*position: relative;*/
26             height: 50px;
27             overflow: hidden;
28         }
29         .drop-down-content{
30             padding: 0;
31             /*position: absolute;*/
32         }
33         
34         h3{
35             font-size: 30px;
36             clear: both;
37 /*            position: relative;
38             z-index: -1;*/
39         }
40         .drop-down-content li:hover a{
41             background-color:red;
42         }
43         .nav .drop-down:hover{
44             overflow: visible;
45         }
46 </style>

复制代码

有个问题：h3段落里面的文字会从下拉菜单中透过来，并且鼠标放在字上面的时候下拉菜单会缩回。

解决方式有两种：1.给.drop-down设置position:relative，.drop-down-content设置position:absolute。

　　　　　　　　2.给h3设置position:relative;z-index:-1。

 

第三种方法：给下拉菜单设置固定的高度，下拉菜单的内容设置透明opacity: 0;，悬浮在下拉菜单时opacity: 1;来实现

复制代码

 1     <style>
 2         ul{
 3             list-style: none;
 4         }
 5         .nav>li{
 6             float: left;
 7         }
 8         ul a{
 9             display: block;
10             text-decoration: none;
11             width: 100px;
12             height: 50px;
13             text-align: center;
14             line-height: 50px;
15             color: white;
16             background-color: #2f3e45;
17         }
18         .nav>li:first-child a{
19             border-radius: 10px 0 0 10px;
20         }
21         .nav>li:last-child a{
22             border-radius: 0 10px 10px 0;
23         }
24         .drop-down{
25             /*position: relative;*/
26             height: 50px;
27         }
28         .drop-down-content{
29             padding: 0;
30             opacity: 0;
31             /*position: absolute;*/
32         }
33         
34         h3{
35             font-size: 30px;
36             clear: both;
37 /*            position: relative;
38             z-index: -1;*/
39         }
40         .drop-down-content li:hover a{
41             background-color:red;
42         }
43         .nav .drop-down:hover .drop-down-content{
44             opacity: 1;
45         }
46 </style>

复制代码

效果同上。

上面的几种方法都是不能添加过渡效果的，鼠标滑过时下拉菜单就马上弹出来了，用户体验不是很好，下面这种方法可以添加过渡的效果来实现一定时间内来弹出

方法四：将下拉菜单的ul高度设置为0，并且超出部分隐藏掉。

复制代码

 1     <style>
 2         ul{
 3             list-style: none;
 4         }
 5         .nav>li{
 6             float: left;
 7         }
 8         ul a{
 9             display: block;
10             text-decoration: none;
11             width: 100px;
12             height: 50px;
13             text-align: center;
14             line-height: 50px;
15             color: white;
16             background-color: #2f3e45;
17         }
18         .nav>li:first-child a{
19             border-radius: 10px 0 0 10px;
20         }
21         .nav>li:last-child a{
22             border-radius: 0 10px 10px 0;
23         }
24         .drop-down{
25             /*position: relative;*/
26             height: 50px;
27         }
28         .drop-down-content{
29             padding: 0;
30             opacity: 0.3;
31             height: 0;
32             overflow: hidden;
33             transition: all 1s ease;
34             /*position: absolute;*/
35         }
36         
37         h3{
38             font-size: 30px;
39             clear: both;
40 /*            position: relative;
41             z-index: -1;*/
42         }
43         .drop-down-content li:hover a{
44             background-color:red;
45         }
46         .nav .drop-down:hover .drop-down-content{
47             opacity: 1;
48             height: 150px;
49         }

复制代码

也会出现上面同样的问题，两种解决方式，把上面代码中注释的地方改过来即可。

做这个demo时我碰到误区，以为把下拉菜单ul值设置为0，下拉菜单整体会隐藏掉，实际上是ul的高度变为了0，但是里面的内容并没有变化，觉得跟做导航时浮动li，ul的高度变成了0，li还能显示一样。一定要给ul设置overflow:hidden，整个下拉菜单才会隐藏。顺带提一句：我们做导航条的时候一般都是左浮动li标签，ul的高度就变成了0，然后给ul设置overflow:hidden，ul就会有高度了，包裹了li标签，后面的盒子会正常布局。

 

方法五：设置包裹下拉菜单的li元素position:relation;下拉菜单绝对定位，left：-999px;使下拉菜单跑到左边浏览器外面看不到的地方，悬浮时，left:0;使其出现在浏览器中显示。

复制代码

 1     <style>
 2         ul{
 3             list-style: none;
 4         }
 5         .nav>li{
 6             float: left;
 7         }
 8         ul a{
 9             display: block;
10             text-decoration: none;
11             width: 100px;
12             height: 50px;
13             text-align: center;
14             line-height: 50px;
15             color: white;
16             background-color: #2f3e45;
17         }
18         .nav>li:first-child a{
19             border-radius: 10px 0 0 10px;
20         }
21         .nav>li:last-child a{
22             border-radius: 0 10px 10px 0;
23         }
24         .drop-down{
25             position: relative;
26         }
27         .drop-down-content{
28             padding: 0;
29             position: absolute;
30             left: -999px;
31         }
32         h3{
33             font-size: 30px;
34             clear: both;
35         }
36         .drop-down-content li:hover a{
37             background-color:red;
38         }
39         .nav .drop-down:hover .drop-down-content{
40             left: 0;
41         }
42 </style>

复制代码

 

后来又意淫了一种方法，把下拉菜单的背景色和字体色改为透明色，然后后悬浮在li上时，颜色变回来。然而发现并没有什么卵用，虽然眼睛看不到，但是鼠标已过去时变成了小手，就暴露啦，哈哈。

 

syaka007
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3制作Dropdown下拉菜单的方法
01-19
:target 是CSS3 中新增的一个伪类，用以匹配当前页面的URI中某个标志符的目标元素（比如说当前页面URL下添加#comment就会定位到id=“comment”的位置，俗称锚）。CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义。先上效果图 正如标题所说，本文是教你如何巧用CSS3:target伪类制作Dropdown下拉菜单，原生HTML+CSS，无JavaScript。为了吸引各位往下看，先上实际例子，再进行剖析。 Duang~ 实际例子其实就是DeveMobile 主题的右上角那个按钮，你点一下就会有一个Dropdown下拉菜单出现，在其他区
用纯css实现下拉菜单的几种方式
weixin_30333885的博客
11-15 678
第一种:display:none和display:block切换 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <st...
【CSS 14】dropdowns 下拉菜单 下拉式图像 下拉式导航
Zane Boy's blogs
07-01 543
【CSS 14】dropdowns 下拉菜单 下拉式图像 下拉式导航 z-index属性是用来设置元素的堆叠顺序或者叫做元素层级，z-index的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。1. auto(默认值)：与父元素的层级相等，如各级祖先元素均未设置该属性，则类似于0。/*不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失*/
css实现下拉菜单
ybh756784818的博客
04-12 8994
css实现下拉菜单的具体步骤，前端小白的个人理解
CSS之dropdown
晨识草的博客
07-15 3830
dropdown下拉菜单中的选项可以是文本，图片的放大或者是链接，在这里使用的是链接，但是链接是打不开的，因为仅仅是测试 index.html<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"/> <meta charset="utf-8"> </head> <body>
css实现列表下拉菜单_逐行：点击打开下拉列表和菜单的高级CSS技巧
cumi6497的博客
07-28 9320
css实现列表下拉菜单by David Piepgrass 由David Piepgrass 逐行：点击打开下拉列表和菜单的高级CSS技巧 (Line-by-line: advanced CSS tricks for click-to-open drop-down lists and menus) For as long as I can remember, there were always...
使用bootstrap实现多选下拉框
04-23
使用bootstrap实现多选下拉框
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-dropdown-menu/dist/style.css " ;...
纯CSS实现的三级下拉菜单实现代码
12-09
<!DOCTYPE ... <head> <... charset=utf-8" /> <...三级dropdown弹出菜单</title> <style type="text/css"> /*
CSS下拉菜单简单制作教程
01-21
本文实例为大家分享了CSS下拉菜单的具体实现代码，供大家参考，具体内容如下 XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html>  <head>  <title>下拉菜单实例|软件开发网(mscto...
CSS 如何制作下拉菜单
CyberPlayer的博客
02-23 3491
下拉菜单 .dropdown类使用position:relative，当我们希望将下拉内容放置在下拉按钮的正下方（使用position:absolute）时，需要使用该类。 .dropdown-content类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示（请看下文）。请注意，min-width设置为 160px。可随时更改此设置。提示：如果您希望下拉内容的宽度与下拉按钮的宽度一样，请将宽度设置为 100％（设置overflow:auto可实现在小屏幕上滚动...
Element 中的 Dropdown 下拉菜单定位偏移问题
qq_43815571的博客
11-28 6394
Element 中的 Dropdown 下拉菜单定位偏移问题解决方案
CSS基础学习--19 下拉菜单
yyxhzdm的博客
06-18 1906
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。
css定位
github_38186390的博客
07-12 227
一。css的定位。        CSS 有三种基本的定位机制：普通流、浮动和绝对定位。       普通流：就是一般的元素的位置。           浮动：就是通过 float 这个属性进行设置。    绝对定位： 主要就是 position 这个属性。 二。float 属性的说明。        float属性主要是 left / right / none / inherit
纯CSS下拉Dropdown菜单
a307025971的专栏
05-29 30
Drop.css是一个css库来创建一个可定制的,动画与纯HTML下拉或dropup组件。
HTML5 CSS3 专题 : 拖放 （Drag and Drop）
weixin_30852419的博客
06-16 263
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子，但是为了更好的理解，先介绍一下HTML5的拖放。 拖放（Drag 和 drop）是 HTML5 标准的组成部分。 浏览器支持 Internet Explorer 9、Firefox、Opera 12、Chro...
纯CSS实现下拉框
six6de6的博客
07-12 4628
css简单下拉框的实现！
前端学习之路css(06)-基础知识
戚继光的博客
04-19 589
CSS 导航栏在CSS中我们利用链接列表来表示导航栏，给出一些常见简易的导航栏。CSS 下拉菜单下拉菜单我们需要在style中定义以下属性； .dropdown，包含下拉按钮的块样式； .dropbtn，下拉按钮的默认样式； .dropdown-content，下拉菜单样式，默认隐藏； .dropdown:hover .dropdown-content，鼠标移动到下拉按钮时，显示下拉菜单； .dro
CSS实现下拉列表
热门推荐
因为我是ZR 的博客
04-21 1万+
方法一： 1.首先写好结构，常用 ul 和 li 结合 <ul class="content"> <a >服装</a> <ul class="plat"> <li><a>外套</a></li> <li><a>棉袄</a></li> <li><a>裤衩</a></
js+css实现下拉框
最新发布
07-14
要实现一个下拉框，你可以使用JavaScript和CSS来完成。下面是一种常见的实现方法： HTML结构： ```html <div class="dropdown"> <button class="dropdown-toggle" onclick="toggleDropdown()">下拉框</button> <ul class="dropdown-menu"> <li>选项1</li> <li>选项2</li> <li>选项3</li> </ul> </div> ``` CSS样式： ```css .dropdown { position: relative; display: inline-block; } .dropdown-toggle { background-color: #f1f1f1; border: none; color: black; padding: 10px; cursor: pointer; } .dropdown-menu { position: absolute; top: 100%; left: 0; background-color: #f1f1f1; list-style: none; padding: 0; margin: 0; display: none; } .dropdown-menu li { padding: 10px; } .dropdown-menu li:hover { background-color: #ddd; } ``` JavaScript代码： ```javascript function toggleDropdown() { var dropdownMenu = document.querySelector('.dropdown-menu'); if (dropdownMenu.style.display === 'none') { dropdownMenu.style.display = 'block'; } else { dropdownMenu.style.display = 'none'; } } ``` 上面的代码实现了一个简单的下拉框。当点击下拉框按钮时，通过JavaScript的`toggleDropdown`函数切换下拉菜单的显示隐藏状态。 在CSS中，`.dropdown`类定义了下拉框的容器样式，`.dropdown-toggle`类定义了下拉框按钮的样式，`.dropdown-menu`类定义了下拉菜单的样式，包括其位置、背景颜色和列表项样式。 通过这种方式，你可以实现一个基本的下拉框。你可以根据需要进一步自定义样式和功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值