CSS实现常用菜单(一)

在写网站的时候,每个网页的导航菜单都是必不可少的,下面我们就把实际开发经常会遇到的菜单总结一下。

1、普通菜单

把鼠标移到菜单内容上,出现二级菜单而且菜单的背景颜色变成深灰色。

(1)使用HTM+CSS来实现

HTML代码如下:

最外层是ul包含5个li,分别是首页,课程大厅,学习中心,经典案例,关于我们。二级菜单也是在当前li下的ul。每个li里面都包含链接a。

CSS代码如下:

(2)使用javaScript代码实现

在鼠标移入和移出时绑定onmouseover和onmouseout事件。鼠标移入时,显示二级菜单,鼠标移出时,隐藏二级菜单

(3)使用jquery代码实现

在鼠标移入和移出时绑定onmouseover和onmouseout事件。鼠标移入时,使用show方法显示二级菜单,鼠标移出时,使用hide方法隐藏二级菜单。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,258评论 0 8
  • 今天面试回来,稍微整理下今天被问到的题目,呀,回答的是乱七八糟,最后百度整理下,以供以后学习。 1,vue 中事件...
    AlisaMfz阅读 3,318评论 0 0
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 5,557评论 2 10
  • 写作时间:2017年3月31日 22点36分文章的主题:从迷茫中认识一个崭新的自己! 深夜中,你是否也有过抱着枕头...
    30065阅读 2,507评论 0 0
  • 曾经看过这么一句话: 这年头,大部分人还是上班混饭吃的,打工为生。所以,职场上,99%的人会被一个上司管着,又有近...
    羨鱼阅读 9,880评论 0 4

友情链接更多精彩内容