(翻译)A hidden tab menu--完全采用CSS
2006-09-12 20:53
274 查看
(翻译)A hidden tab menu--完全采用CSS
作者简介:
Stu Nicholls 59岁,已婚,有两个孩子,日常工作为电子设计,热爱计算机、摄影。
作者网站:http://www.cssplay.co.uk
一个简单、隐藏的菜单,初始时只有一个指示用的菜单标签,当鼠标移动到菜单标签上时显示出完整的菜单。Javascript有许多版本,但很少有CSS的版本,我认为到目前为止这个菜单是唯一的.
菜单工作在 IE5.5, IE6, IE7, Firefox, Opera, Netscape 8 and 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)。
最终效果
相关文章推荐
- (翻译)A hidden tab menu--完全采用CSS
- 一个隐藏的菜单完全采用CSS
- 完全采用CSS的CROSS BROWSER TABBED PAGES
- CSS 的overflow:hidden 属性详细解释
- 【CSS】absolute 元素完全居中的两种方法
- CSS TreeMenu 二级树形菜单
- MFC完全自绘Tab控件,支持图片背景
- 最简单的js css Tab 演示
- 【html&css】overflow :hidden详细解释
- CSS Dock Menu:JS+CSS 仿苹果MAC机桌面导航菜单
- 122-对CSS Tab Designer 2中Tab Menu5的改进
- 采用Singleton模式实现Android应用的完全退出
- 翻译-高效的CSS
- 翻译:盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- Tab 导航 css 样式 应用备份
- FLEX3中应用CSS完全详解
- 采用ADM2582E/ADM2587E实现完全半/全双工的RS-485/RS-422接口隔离
- Qt之Tab键实现(自由切换焦点)—— 采用事件过滤器处理
- 基于HTML+CSS+JS实现增加删除修改tab导航特效代码
- Menu、MultiView和View 合作做的tab效果