网站建设询价公告,个人博客系统wordpress,企业网站如何建设,廉洁文化手册页面设计模板这是一个相当炫的功能#xff0c;让网页看起来像桌面程序#xff0c;如window的开始菜单。实现原理基本和纯CSS相册差不多#xff0c;但要注意的事项比较多#xff0c;让我们一步步来吧。先来一个非常简单的一级菜单与悬停效果。菜单一菜单二菜单三菜单四结构很熟悉吧…这是一个相当炫的功能让网页看起来像桌面程序如window的开始菜单。实现原理基本和纯CSS相册差不多但要注意的事项比较多让我们一步步来吧。先来一个非常简单的一级菜单与悬停效果。菜单一菜单二菜单三菜单四结构很熟悉吧就是把原来放图片的地方换成文字而已。我还特意标出来了。接着下来的表现层代码非常简单。*{margin:0;padding:0;}.menu{font-size:12px;}.menuli{/*水平菜单*/float:left;list-style:none;}.menua{display:block;position:relative;height:32px;width:100px;line-height:32px;background:#a9ea00;color:#ff8040;text-decoration:none;text-align:center;}.menua:hover{background:#369;color:#fff;}.menulispan{display:none;position:absolute;left:0;top:32px;width:200px;height:150px;background:#B9D6FF;}.menua:hoverspan{display:block;}这里有两个值得注意的地方。我们先说第一个。子菜单(span元素)的top应该能使其顶部停留在a元素的范围内如果包含块是li元素同理。当span的top值大于32px如40px我们就无法把鼠标移到span元素上。因为离开了a:hover的作用范围span元素又重新隐藏。.menulispan{display:none;position:absolute;left:0;top:40px;/*★★修改这里★★*/width:200px;height:150px;background:#B9D6FF;}第二个问题是IE6特有的就是子菜单在对应的包含块mouseout后仍不消失的问题。hover伪类相当于moverover与moverout。我们在可以在mouseover给它的子孙元素认定一种样式mouseout时认定另一种。换言之display现在在IE6无法切换(img元素除外)。解决方法用visibility代替display。好了现在我们真正做二级菜单把有关span的CSS全删掉并在结构层原span的位置改为如下代码二级菜单_11二级菜单_12我们在各游览器看一下感觉非常乏力。IE6与Opera10的二级菜单项是垂直的但我们并没有清除浮动啊firefox3.5与chrome与safari4的二级菜单项是水平分布了但上面好像多出一个菜单项……IE8同学这次反而是表现得最好的。我没有装IE7所以一向忽略它。我们重新设置一下样式如把包含块改设在li元素上让二级菜单项呈垂直显示。*{margin:0;padding:0;}.menu{font-size:12px;}.menuli{/*水平菜单*/float:left;list-style:none;position:relative;/*把包含块移动li元素*/}.menua{display:block;/*position:relative;发现放在a元素中在标准游览器中惨不忍睹和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/height:32px;width:100px;line-height:32px;background:#a9ea00;color:#ff8040;text-decoration:none;text-align:center;}.menua:hover{background:#369;color:#fff;}/*新增的二级菜单部分*/.menuulul{visibility:hidden;/*开始时是隐藏的*/position:absolute;left:0px;top:32px;}.menuula:hoverul{visibility:visible;}.menuululli{clear:both;/*垂直显示*/text-align:left;}发现二级菜单在firefox与safari与chrome中没有反应弹不出来(这三个浏览器的CSS部分互相抄袭严重啊)。opera10表现得最好IE8其次。不过标准浏览器的所有元素都支持hover伪类不像IE6非带href的a元素不可。我们改写部分CSS代码.menuulli:hoverul,/*非IE6*/.menuula:hoverul{/*IE6*/visibility:visible;}二级菜单能弹出来了但那个神秘的li元素也现形了。我用双重浮动的收缩包围(shrink-wrapping)现象都无法消除这个神秘的li元素。参考外国的代码方法是把整个子菜单放到a元素的外面然后用li:hover控制样式的切换。于是结构层改写如下菜单一二级菜单_11二级菜单_12菜单二二级菜单_21二级菜单_22//***************略************//***************略************
