css下拉菜单的制作步骤用CSS实现下拉菜单css下拉菜单的制作方法




css下拉菜单的制作步骤用CSS实现下拉菜单css下拉菜单的制作方法

2022-07-21 2:25:16 网络知识 官方管理员

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

css下拉菜单的制作步骤(用CSS实现下拉菜单)(1)


一、逻辑分析


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

1、需求:

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

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

2、知识点:

1)弹性布局flex-box

2)相对定位中绝对定位

position:absolute;position:relative;

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

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


二、代码编写

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

css下拉菜单的制作步骤(用CSS实现下拉菜单)(2)


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

css下拉菜单的制作步骤(用CSS实现下拉菜单)(3)


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

css下拉菜单的制作步骤(用CSS实现下拉菜单)(4)


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

css下拉菜单的制作步骤(用CSS实现下拉菜单)(5)

三、结语


我们用纯CSS的方式,实现了原本应使用JS才能解决的下拉菜单功能。其实CSS功能很强大,而且越来越强大。



发表评论:

最近发表
网站分类
标签列表