投稿
  1. 苟探长首页
  2. 综合其他

用CSS实现下拉菜单（怎样用纯css实现下拉菜单）

adminone • • 综合其他 • 阅读 1463

在页面中导航的内容如果很多，为了划分清晰我们会做成下拉菜单的方式。那么我们经常都会使用JQ来操作、配合下拉动画完成对下拉菜单功能的编写，其实下拉菜单的效果，我们只用CSS就可以解决，代码简单、效果流畅。

卓象科技：用CSS实现下拉菜单

 一、逻辑分析

首先我们将分析这个功能的实现方法。我们需要用到悬停伪类配合定位、变形来模仿JQ中的hover();方法。

1、 需求：

1) 当鼠标移入first 时，弹出二级菜单。

2) 当鼠标移出 first 时，遣散二级菜单。

2、知识点：

1) 弹性布局 flex-box

2) 相对定位中绝对定位

position:absolute;position:relative;

3) 变形中的放大 transform:scale();

4) 动画中的过渡属性 transition:;

 

二、代码编写

 

1、创建空白页，建立HTML基础结构。

卓象科技：用CSS实现下拉菜单

2、写入CSS样式。我们先重置样式，保障测试内容在浏览器中央方便查看。

卓象科技：用CSS实现下拉菜单

3、使用flex布局时经常会遇到元素个数不够导致最后一行错位的问题。如果使用创建伪元素的方式解决可能又会遇到其他问题，特别是当justify-content设置为space-evenly时。这时可以用另外一种方式，在最后一行增加几个假元素，数量为每一行最大数量减一，并设置height为0。这种方式比较简单，不需要考虑margin的计算等问题。虽然本次内容没涉及到，但是还是提出问题及解决方式，方便大家使用时进行借鉴。

卓象科技：用CSS实现下拉菜单

4、我们需要将二级菜单用定位的方式，定到合适的位置之上。而且需要注意，在没有鼠标悬停时，二级菜单需要不可见。这里我们用变形中的缩小，缩小至0不可见。在悬停后放大为1进行显示。这样可以对变形的过程进行展示，所以我们不适用display:none;

卓象科技：用CSS实现下拉菜单

三、结语

我们用纯CSS的方式，实现了原本应使用JS才能解决的下拉菜单功能。其实CSS功能很强大，而且越来越强大。那么喜欢CSS3的朋友们，我们可以展开想象，用CSS创建丰富的代码世界，欢迎大家交流。

本文来自投稿，不代表苟探长立场，如若转载，请注明出处：https://www.tongtimes.com/9832.html

赞 (0)
adminoneadminone
0
上一篇 2021年10月25日 12:27
下一篇 2021年10月25日 12:39

相关推荐