如何实现导航菜单栏中的二级下拉菜单?
我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片。
但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考。
1.仅使用html和css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
*{margin:0;padding: 0;list-style: none;text-decoration: none;} #nav{width: 500px;height: 40px;background: #ccc;margin: 0 auto;} ul{background: #aaa} ul li{float:left; display:block; height: 40px; line-height: 40px; padding: 0 20px; position: relative;} ul li:hover{background: #cea;} ul li ul li{float: none;} /*关键一:将二级菜单设置为display:none;*/ ul li ul{position: absolute;top:40px;left: 0; display: none;} ul li ul li:hover{background: red;} /*关键二:在划过二级菜单从属的一级菜单时,设置为display:block;*/ ul li:hover ul{display: block;}
|
我们可以看到,这种方法是比较好的,它保证了结构与表现的完全分离。
2.使用javascript实现二级下拉菜单
3.用jQuery实现二级下拉菜单
显然,使用jQuery是非常方便的。
最终的实现效果如下;
即当鼠标划过一级菜单时,会出现相应的二级菜单。
本文手机访问二维码
☉首先声明,只要是我们的vip会员所有源码均可以免费下载,不做任何限制
☉本站的源码不会像其它下载站一样植入大量的广告。
☉本站只提供精品织梦源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站织梦程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(971977809)进行交流
☉本站的源码不会像其它下载站一样植入大量的广告。
☉本站只提供精品织梦源码,源码在于可用,不在多!!希望在这里找到你合适的。
☉本站提供的整站织梦程序,均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源(包括源码、模板、素材、特效等)仅供学习与参考,请勿用于商业用途。
☉如有其他问题,请加网站客服QQ(971977809)进行交流
相关站长手记内容: