只用CSS做的下拉式菜单--A Drop-Down Menu With Only CSS

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:36 我要评论(0)

最近在网上发现了一个只用CSS实现的下拉式菜单(Drop-Down Menu),感觉很新鲜也很酷。于是仔细看了作者的介绍以及源代码,发现核心就是一个":hover"伪类的使用。在CSS1中此伪类仅可用于a对象。且 对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。但IE6及其以下版本都不能很好的支持CSS2,因此 IE6及其以下版本就不能很好的运行这个程序了。所幸Firefox,Netscape,Opera,Safari等浏览器的最新版本均能很好的运行该 程序(其他版本我没试过)。

我在网上找了一下解决该BUG的方法,最终找到一个不是很理想的方法,使用插件---IE7。这个插件能弥补很多IE6在CSS,透明PNG图像显示等方面的缺陷。使用也很简单,下载(44KB)解压后参见里面的README就能搞定。

下面说说我做的一个示例吧,你可以先看一下最终效果。

下面说几个关键的地方:

1、这段代码是为了使该菜单能在IE6及其以下版本的IE浏览器中都能正常工作而写的。导入了IE7这个插件中的ie7-standard-p.js这个 文件。如果你能确保所有看到你的这个菜单的人都使用IE7或者Firefox,Opera,Netscape等浏览器的最新版本的话,那么大可以去掉该行 代码

<script src="IE7_0_9/ie7-standard-p.js"></script>

2、该行代码是定义子菜单默认状态为隐藏。

#menu ul .item {...}{display:none;}

3、这行是关键代码。它的意思是当ul为hover状态时,显示子菜单。

#menu ul:hover .item{...}{display:block;}

4、这几行代码创建了一个菜单(菜单一),它有三个子菜单。

<DIV id="menu">

<ul id="item1">

<li class="top">菜单一</li>

<li class="item"><a href="#">子菜单一</a></li>

<li class="item"><a href="#">子菜单二</a></li>

<li class="item"><a href="#">子菜单三</a></li>

</ul></div>

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...