快捷搜索:

纯CSS多级菜单2

这部分着末给出的成品效果对照惊人,也便是传说中的纯CSS六级菜单。这个器械最厉害的地方是兼容所有主流浏览器(IE6,IE8,Maxthon2.5,firefox3.5,opera10,safari4与chrome2),而一点CSS hack也没有用。终究CSS hack只是权宜之计,治标不治本,谁知它会对未来新版本的浏览器有什么副感化,是以能不用就不要用了。因为布局异常有规律,读者卖力进修后,可以自行扩展为十级菜单。

司徒正美 纯CSS多级菜单

因为IE6能支持的伪类少得可怜,仅支持a元素的hover与visited与active。为了显示暗藏的二级菜单,我们必须把二级菜单的那个无序列表放到a元素下,但这样一来firefox那边又起事了。这时我们就要请出IE的前提注释,让页面在IE6下出现一套布局层,在其他浏览器下出现另一套。

菜单三

二级菜单_11

二级菜单_12

菜单二

二级菜单_11

二级菜单_12

//奸淫奸淫奸淫奸淫略奸淫奸淫奸淫**

//奸淫奸淫奸淫奸淫略奸淫奸淫奸淫**

纯CSS多级菜单by 司徒正美

纯CSS多级菜单 by 司徒正美

菜单

二级菜单_11

菜单

二级菜单_11

菜单

二级菜单_31

菜单

二级菜单_41

运行代码

然则这样做不能使IE6的二级菜单弹出来,这情形我在纯CSS相册碰到许多次。查一下国外的资料,说是IE用hover切换绝对定位子元素时存在问题,但详细情形又分许多种,解法也不一。但针对多级菜单的这种多层子元素,最常用的措施是把它们套在table中,这相称于table结构。由于 table的容错能力是最强的,这多得人们不停用它来结构,于是浏览器不停在增强它在这方面的上风。谢谢table,我们终于料理IE6这个怪胎了。

菜单

二级菜单_11

二级菜单_12

菜单

二级菜单_11

二级菜单_12

//奸淫奸淫奸淫奸淫*略奸淫奸淫奸淫奸淫**

//奸淫奸淫奸淫奸淫*略奸淫奸淫奸淫奸淫**

纯CSS多级菜单by 司徒正美

纯CSS多级菜单 by 司徒正美

菜单

二级菜单_11

菜单

二级菜单_11

菜单

二级菜单_31

菜单

二级菜单_41

运行代码

但这样一来对firefox等浏览器添加了许多多余的布局层代码,它们基础不必要table这器械就能运作优越。是以,我们把table整到IE前提注释中。如:

菜单

二级菜单_11

二级菜单_12

//奸淫奸淫奸淫奸淫*略奸淫奸淫奸淫奸淫

//奸淫奸淫奸淫奸淫*略奸淫奸淫奸淫奸淫

//奸淫奸淫奸淫奸淫*略奸淫奸淫奸淫奸淫

纯CSS多级菜单by 司徒正美

纯CSS多级菜单 by 司徒正美

菜单一

二级菜单_11

二级菜单_12

菜单二

二级菜单_21

二级菜单_22

菜单三

二级菜单_31

二级菜单_32

菜单四

二级菜单_41

二级菜单_42

运行代码

然而,这布局层还能进一步精简。同时我们应该把稳到IE6水平菜单的非常高度,这是IE6的li元素在包孕块级显示元素时会多出5px闲暇。因为 li元素包孕的布局对照繁杂,曩昔用对于img元素的几种措施行不通了。我们可以显式设置a元素的高度,让多余的部分暗藏掉落便是。这就独一不用CSS hack的措施。

更精简的布局层:

菜单一

二级菜单_11

二级菜单_12

//奸淫奸淫奸淫**略奸淫奸淫奸淫

//奸淫奸淫奸淫**略奸淫奸淫奸淫

//奸淫奸淫奸淫**略奸淫奸淫奸淫

.menu a {

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;

overflow:hidden;/*★★★★*/

}

纯CSS多级菜单by 司徒正美

纯CSS多级菜单 by 司徒正美

菜单一

二级菜单_11

二级菜单_12

菜单二

二级菜单_21

二级菜单_22

菜单三

二级菜单_31

二级菜单_32

菜单四

二级菜单_41

二级菜单_42

运行代码

基于上面的布局我们就可以开拓多级子菜单了。

纯CSS多级菜单by 司徒正美

这是可是四级菜单哦!

菜单一

二级菜单_11

三级菜单_11

三级菜单_12

三级菜单_13

三级菜单_14

二级菜单_12

三级菜单_21

四级菜单_31

四级菜单_32

三级菜单_22

三级菜单_23

三级菜单_24

菜单二

二级菜单_21

二级菜单_22

菜单三

二级菜单_31

二级菜单_32

菜单四

二级菜单_41

二级菜单_42

运行代码

这时我们又发明在IE6下,当我们的鼠标移到二级菜单的上面时,一级菜单项会呈现一个边框,颜色为hover时的背景致。在IE6,table与单元格之间(cellspacing),单元格与单元格的内容之间(cellspadding)是存在闲暇,背景致为transparent,也便是说永世显示下一层的背景致。因为我们设置a的display:block,它会占满td的所有空间,是以那个神秘的边框应该是cellspacing。我们可以用以下的要领证明我的猜想。

.menu table {

border:1px solid aqua;

}

.menu table td{

border:1px solid aqua;

}

纯CSS多级菜单by 司徒正美

这是可是四级菜单哦!

菜单一

二级菜单_11

三级菜单_11

三级菜单_12

三级菜单_13

三级菜单_14

二级菜单_12

三级菜单_21

四级菜单_31

四级菜单_32

三级菜单_22

三级菜单_23

三级菜单_24

菜单二

二级菜单_21

二级菜单_22

菜单三

二级菜单_31

二级菜单_32

菜单四

二级菜单_41

二级菜单_42

运行代码

知道问题的所在,我们就可以有的放矢了。办理措施有二。一是设置cellspacing即是零。因为cellspacing为DOM属性,非CSS 属性,换言之,有若干个table我们就要写若干次。二是设置border-collapse 为collapse,由于这样会把table与它里面的td的border合而为一,这样它们之间的闲暇也不复存在。我们当然选择第二种啦。

.menu table {

border-collapse: collapse;

}

纯CSS多级菜单by 司徒正美

纯CSS多级菜单 by 司徒正美

这是六级菜单,只要页面够长,十级也能弄出来!

菜单一

二级菜单_11

三级菜单_11

四级菜单_11

五级菜单_11

六级菜单_11

六级菜单_12

六级菜单_13

五级菜单_11

六级菜单_11

六级菜单_12

六级菜单_13

五级菜单_11

六级菜单_11

六级菜单_12

六级菜单_13

五级菜单_12

六级菜单_11

六级菜单_12

六级菜单_13

三级菜单_12

三级菜单_13

三级菜单_14

二级菜单_12

三级菜单_21

四级菜单_21

四级菜单_22

三级菜单_22

三级菜单_23

三级菜单_24

菜单二

二级菜单_21

二级菜单_22

三级菜单_21

三级菜单_22

三级菜单_23

四级菜单_21

四级菜单_22

四级菜单_23

五级菜单_21

五级菜单_22

五级菜单_23

六级菜单_21

六级菜单_22

六级菜单_23

六级菜单_24

六级菜单_25

六级菜单_26

菜单三

二级菜单_31

二级菜单_32

菜单四

二级菜单_41

三级菜单_41

三级菜单_42

三级菜单_43

三级菜单_44

二级菜单_42

运行代码

着末总结一下:

包管hover时,对应的子菜单的top与left在包孕块的范围内。

平日我们是用hover来调用display实现子元素的隐现,但在IE6中,mouseout后它不会乖乖消掉,得换visibility上阵。

某些浏览器在用a:hover来切换绝对定位子元素存在bug,统一用li:hover实现。

在IE6中,激活父级元素的a:hover后再调用其子孙元素的a:hover时,会没有反映,换言之,不继承向下衬着。这时我们必要table这个容错能力最强的标签出马。

为了跨平台的必要,我们必要用到IE前提注释来切换响应的布局层代码。

在IE6中,当li元素包孕display为block的元素时(如a)会多出5px,我们可以用overflow:hidden料理之。

在IE6中,table与td是存在闲暇,当我们移动某个子菜单项时,其父菜单项就会由于这些透明的空间而染上两条边。办理措施:设置table的border-collapse为collapse。

您可能还会对下面的文章感兴趣: