css高度自适应和不错的下拉菜单(自己研究)
刚弄完已经发现很晚了，马上洗澡睡觉了，现在把演示地址贴上:
demo:
http://www.izmax.com/xiaoshan/090227/default.html
今天继续。。(2009-02-27 21:12)
昨天只用css实现效果，不能兼容IE6，今天用jquery完全兼容各种浏览器，代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type” />
<title>自适应高度和很有意思的下拉菜单</title>
<link href=”css/global2.css” rel=”stylesheet” media=”all”/>
< script type=”text/java script ” src=”css/jquery.js”></ script >
< script type=”text/java script “>
$(document).ready(function(){
$(“li”).hover(function(){
// $(this).css({height:”auto”,overflow:”visible”})
$(this).addClass(“hov”)
},function(){
// $(this).css({height:”20px”,overflow:”hidden”})
$(this).removeClass(“hov”)
})
$(“.libox”).hover(function(){
$(this).addClass(“lightbox”);
},function(){
$(this).removeClass(“lightbox”);
})
})
</ script >
</head>
<body>
<div class=”box”>
<div class=”header”>知道这里是干啥的不？<span style=”font-size:30px;color:white;”>答:</span><span>傻乎乎的& lt;/span></div>
<div class=”content”>
<div class=”sidebar”><ul class=”menu”><li>菜单<div class=”libox”>dddd<br/>dddd<br/>dddd<br/></div& amp; gt;</li><li>菜单<div class=”libox”>dddd<br/>dddd<br/>dddd<br/>dddd<br /></div></li><li>菜单<div class=”libox”>dddd<br/>dddd<br/>dddd<br/>dddd<br/></div></li></ul>cscscs</div>
<div class=”container”><p>一.首先，左右两栏可以自适应高度.道理很简单，用的margin和padding的互补原理，关于值，是大家通用的32767px和-32767px，(貌似我有点啰嗦- -!!)<br/>二.其次，那个下拉菜单纯CSS写成，不过目前应该不能接受IE6，因为IE6不认识伪类:hover，关于让ie6识别他也可以用jquery来实现，鼠标移上去的时候下面的div显示，移出的时候隐藏就ok了。和我上次做的那个宽度固定的菜单大同小异，只是这次用到了绝对，目的是切换的时候不影响其他元素的正常显示定位</p><p>p</p><p>p< /p><p>p</p><p>p</p><p>p</p><p>p</p></div>
</div>
<div class=”footer”><span style=”font-size:30px”>C</span><span style=”clear:left;”>opyRight</span></div>
</div>
</body>
</html>
让我很不爽的是，明明两次写的代码完全一样，可是在浏览器显示就是不一样，清缓存也没用 真烦，不是一次了。。
同样 演示地址为:
http://www.izmax.com/xiaoshan/090227/default2.html
-
最新文章
-
随机文章
