欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

下拉菜单效果_html/css_WEB-ITnose

程序员文章站 2022-03-25 16:36:26
...
  之前为大家介绍过有关HTML中的一些比较炫的效果,本篇为大家介绍一些,大家在网站中经常可以见到的一种下拉菜单效果,这种菜单效果一般分为两层,当我们的鼠标经过一级菜单时,隐藏的二级菜单就会显示出来,这样即保证了页面的美观,同时又不会使页面的模块减少,甚至可以增加模块数目。

  一、废话不多说,下面我们来通过HTML+CSS为大家实现一下上面的效果,首先请大家先欣赏一下效果图:

  

 1、界面布局代码:

           

 2、css代码:

  对于CSS代码都是最基本的,我想大家都能的看懂吧,可能有一些看上去有些吃力,下面我就带大家一起分析一下,这段代码:list-style:none;表示去掉样式,也就是去除每个li前的小黑点;对于a下的text-decoration: none;表示去除超链接下的下划线;a:hover表示鼠标经过超链接是的效果;display: block;表示把ul转化为块级元素。其他的都是一些常规属性,就不再赘述,只要理解了盒子模型的理念,这都不是事。

  二、html+css+javascript实现上述效果: 

 3、界面代码:

      

 4、css代码:

 5、JavaScript实现上述效果:

    

  三、变化菜单的实现,界面欣赏:

  

 6、界面代码:

      

 7、css代码:

  

  讲到这里关于本篇的菜单栏设计,我相信大家都已经学会了,有没有感觉到CSS的强大,反正我算是服了,作为一个网站开发工程师,如果你说你不懂SCC估计有可能会被笑掉大牙。以上内容,如有异议,请留言。

相关标签: 下拉菜单效果