首 页 行业资讯 新车 试驾评测 养车用车 车型库

网页设计,网页下拉条 怎么做?

发布网友 发布时间:2022-04-21 08:11

我来回答

1个回答

热心网友 时间:2023-10-16 23:03

很多小可爱自学了HTML网页之后,也想做一些交互特效,比如二级下拉菜单,鼠标经过下滑菜单等,今天小编我就来分享一下HTML网页二级下拉菜单,小编我用jQuery来写的二级下拉菜单,挺简单的。
如图所示,二级下拉菜单一般都是这样来制作的,就是在li标签里面再放一个ul标签。

然后就会有这样的效果了,不过距离二级菜单有点差距。

接着我们先把二级下拉菜单之间的margin和padding值去掉。

然后设置divulli,需要注意的是,是子代选择器。因为我们不需要全部的li左浮动。

如图,浮动后就成了,距离二级菜单不远了。

接着在设置去掉所有li的圆点符号,并且给宽高,居中以及背景色。

如图,这个二级菜单还算过得去,如果不喜欢可以换颜色。

接着我们把下面部分的菜单隐藏起来,如图,用到空格隔开,注意,空格表示后代选择器。

这样,下面的下拉菜单就看不见了,哈哈。

然后用jq来操作鼠标经过的时候,显示菜单即可。

如图,我用到了滑动效果,具体可以自己查找一下slideToggle的用法哦。

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com