标题: 利用条件注释制作下拉菜单
lonjew
元帅
Rank: 1



UID 73191
精华 1
积分 30615
帖子 14941
威望 3
金币 14931
热心 12
阅读权限 100
注册 2008-1-28
状态 离线
利用条件注释制作下拉菜单

上篇文章里提到了条件注释,就是判断浏览器类型,然后定义什么浏览器下显示什么内容。
这个dropmenu(下拉菜单)模型来自cssplay,使经过作者多次的研究和反复的测试才做出来的。我想那这个模型来实践一下条件注释的原理。
先看一个最简单的模型
下面是xhtm  


DEMOS





   
  zero dollars advertising page
  wrapping text around images
  styled form
  active focus
  hover/click with no borders
  shadow boxing
  image map for detailed information
  fun with background images
  fade scrolling
  em image sizes compared
   








CSS  




采用双样式,给ie和非ie分别定义样式,如果IE时候,在final_drop.css基础上补充一个final_drop_ie.css
先看看非ie下的css是怎样定义的  
.menu ul li ul {
display: none;
}
/* specific to non IE browsers */
.menu ul li:hover a {
color:#fff;  
background:#bd8d5e;
}
/*定义鼠标滑过样式*/
.menu ul li:hover ul {
display:block;  
position:absolute;  
top:3em;
margin-top:1px;
left:0;  
width:150px;
}
在非IE下,看到鼠标滑过时候li包含的ul显示了,因为这些浏览器支持li:hover用法
IE下的css  
.menu ul li a:hover {
color:#fff;  
background:#bd8d5e;
}
/*当鼠标滑过时li包含的ul显示*/
.menu ul li a:hover ul {
display:block;  
position:absolute;  
top:3em;  
left:0;
background:#fff;
margin-top:0;
margin-top:1px;
}
继承上面的final_drop.css样式,无鼠标时间时候li包含的ul不显示
因为  



所以在IE6下鼠标滑过时候在通过a:hover来显示那个ul内容
而IE7下通过li:hover显示的效果一样
下面是作者的原模型(三级菜单纵向和相结合的)
就是在简单模型的基础上复杂化

网友 lonjew 签名 - 网友社区 ==
顶部
[广告] 免费域名(Free Subdomain) 免费空间(Free hosting) PR查询(Google Pagerank)



当前时区 GMT+8, 现在时间是 2008-10-11 13:59
信产部ICP备案:京ICP备05066424号 北京市公安局网监备案:1101050648号

Powered by Discuz! 5.5.0
清除 Cookies - 联系我们 - 网友俱乐部 - Archiver - WAP