（翻译）A hidden tab menu--完全采用CSS

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 71 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Steveson/archive/2006/12/25/603067.html

文章标签：

#javascript #xhtml #ViewUI

本文介绍了一个纯CSS实现的隐藏式菜单，该菜单初始状态仅显示一个菜单标签，鼠标悬停时展示完整菜单项。适用于多种浏览器，包括IE5.5及以上版本、Firefox、Opera等。

（翻译）A hidden tab menu--完全采用CSS

作者网站：http://www.cssplay.co.uk

一个简单、隐藏的菜单，初始时只有一个指示用的菜单标签，
当鼠标移动到菜单标签上时显示出完整的菜单。Javascript有许多版本,
但很少有CSS的版本，我认为到目前为止这个菜单是唯一的.

菜单工作在 IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 a
nd Mac Firefox 1.5 and Safari ，不能工作在 Mac IE5.x.

它也可以做成多级展开菜单.

级联样式表

加正常的样式表（非IE）

<link rel="stylesheet" media="all" type="text/css" href="css/hidden.css"   />

The hidden.css file

用条件判断语句为IE加入样式表

<!--[if lte IE 6]>
<link rel="stylesheet" media="all"   type="text/css" href="css/hidden_ie.css" /> 
<![endif]-->

The hidden_ie.css file

XHTML

<div class="menu">
<ul>
  <li><a class="drop" href="../menu/index.html">MENU
  <!--[if IE 7]><!-->
  </a>
  <!--<![endif]-->
<table><tr><td>
 <ul>
  <li><a href="../menu/zero_dollars.html">zero dollars advertising page</a></li>
  <li><a href="../menu/embed.html">wrapping text around images</a></li>
  <li><a href="../menu/form.html">styled form</a></li>
  <li><a href="../menu/nodots.html">active focus</a></li>
  <li><a href="../menu/shadow_boxing.html">shadow boxing</a></li>
  <li><a href="../menu/old_master.html">image map for detailed information</a></li>
  <li><a href="../menu/bodies.html">fun with background images</a></li>
  <li><a href="../menu/fade_scroll.html">fade scrolling</a></li>
  <li><a href="../menu/em_images.html">em image sizes compared</a></li>
  </ul>
</td></tr></table>
><!--[if lte IE 6]>
  </a>
  <![endif]-->
</li>
  </ul>
</div>

你可以在上面代码中看到使用条件注释，为IE的特定版本嵌套表格. 其他浏览器不会看到表格，
而将正常使用无序列表，请记住，须使用符合标准的文档类型（DOCTYPE）。

最终效果