快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

亚万博体育app下载链接_酒文化网进入



这是一个相称炫的功能,让网页看起来像桌面法度榜样,如window的开始菜单。实现道理基础和纯CSS相册差不多,但要留意的事变对照多,亚万博体育app下载链接让我们一步步来吧。

先来一个异常简单的一级菜单与悬停效果。

菜单一

菜单二

菜单三

菜单四

布局很认识吧,便是把原本放图片的地方换成翰墨而已。我还特意标出来了。接着下来的体现层代码异常简单。

* {

margin:0;

padding:0;

}

.menu {

font-size:12px;

}

.menu li {/*水平菜单*/

float:left;

list-style:none;

}

.menu a {

display:block;

position:relative;

height:32px;

width:100px;

line-height:32px;

background:#a9ea00;

color:#ff8040;

text-decoration:none;

text-align:center;

}

.menu a:hover {

background:#369;

color:#fff;

}

.menu ul span {

display:none;

position:absolute;

left:0;

top:32px;

width:200px;

height:150px;

background:#B9D6FF;

}

.menu a:hover span {

display:block;

}

纯CSS相册 by 司徒正美

纯CSS多级菜单 by 司徒正美

菜单一

菜单二

菜单三

菜单四

运行代码

这里有两个值得留意的地方。我们先说第一个。子菜单(span元素)的top应该能使其顶部停顿在a元素的范围内,假如包孕块是li元素,同理。当 span的top值大年夜于32px,如40px,我们就无法把鼠标移到span元素上。由于脱离了a:hover的感化范围,span元素又从新暗藏。

.menu ul span {

display:none;

position:absolute;

left:0;

top:40px;/*★★改动这里★★*/

width:200px;

height:150px;

background:#B9D6FF;

}

纯CSS相册 by 司徒正美

纯CSS多级菜单 by 司徒正美

菜单一

菜单二

菜单三

菜单四亚万博体育app下载链接

运行代码

第二个问题是IE6特有的,便是子菜单在对应的包孕块mouseout后仍不消掉的问题。hover伪类相称于mov亚万博体育app下载链接erover与 moverout。我们在可以在mouseover给它的子孙元素认定一种样式,mouseout时认定另一种。换言之,display现在在IE6无法切换(img元素除外)。办理措施用visibility 代替display。

纯CSS相册 by 司徒正美

纯CSS多级菜单 by 司徒正美

菜单一

菜单二

菜单三

菜单四

运行代码

好了,现在我们真正做二级菜单,把有关span的CSS全删掉落,并在布局层原span的位置改为如下代码:

二级菜单_11

二级菜单_12

纯CSS相册 by 司徒正美

纯CSS多级菜单 by 司徒正美

菜单一

二级菜单_11

二级菜单_12

菜单二

    二级菜单_21

    二级菜单_22

    菜单三

      二级菜单_31

      二级菜单_32

      菜单四

        二级菜单_41

        二级菜单_42

        运行代码

        我们在各游览器看一下,感到异常乏力。IE6与Opera10的二级菜单项是垂直的,但我们并没有清除浮动啊?firefox3.5与chrome 与safari4的二级菜单项是水平散播了,但上面似乎多出一个菜单项……IE8同砚此次反而是体现得最好的。我没有装IE7,以是一贯轻忽它。

        我们从新设置一下样式,如把包孕块改设在li元素上,让二级菜单项呈垂直显示。

        * {

        margin:0;

        padding:0;

        }

        .menu {

        font-size:12px;

        }

        .menu li {/*水平菜单*/

        float:left;

        list-style:none;

        position:relative;/*把包孕块移动li元素*/

        }

        .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;

        }

        .menu a:hover {

        background:#369;

        color:#fff;

        }

        /*新增的二级菜单部分*/

        .menu ul ul {

        visibility:hidden;/*开始时是暗藏的*/

        position:absolute;

        left:0px;

        top:32px;

        }

        .menu ul a:hover ul{

        visibility:visible;

        }

        .menu ul ul li {

        clear:both;/*垂直显示*/

        text-align:left;

        }

        纯CSS相册 by 司徒正美

        纯CSS多亚万博体育app下载链接级菜单 by 司徒正美

        菜单一

        二级菜单_11

        二级菜单_12

        菜单二

          二级菜单_21

          二级菜单_22

          菜单三

            二级菜单_31

            二级菜单_32

            菜单四

              二级菜单_41

              二级菜单_42

              运行代码

              发明二级菜单在firefox与safari与chrome中没有反映,弹不出来(这三个浏览器的CSS部分相互抄袭严重啊)。opera10体现得最好,IE8其次。不过,标准浏览器的所有元素都支持hover伪类,不像IE6,非带href的a元素弗成。我们改写部分CSS代码:

              .menu ul li:hover ul,/*非IE6*/

              .menu ul a:hover ul{/*IE6*/

              visibility:visible;

              }

              纯CSS相册 by 司徒正美

              纯CSS多级菜单 by 司徒正美

              菜单一

              二级菜单_11

              二级菜单_12

              菜单二

                二级菜单_21

                二级菜单_22

                菜单三

                  二级菜单_31

                  二级菜单_32

                  菜单四

                    二级菜单_41

                    二级菜单_42

                    运行代码

                    二级菜单能弹出来了,但那个神秘的li元素也现形了。我用双重浮动的紧缩困绕(shrink-wrapping)征象都无法打消这个神秘的li元素。参考外国的代码,措施是,把全部子菜单放到a元素的外貌,然后用li:hover节制样式的切换。于是布局层改写如下:

                    菜单一

                    二级菜单_11

                    二级菜单_12

                    菜单二

                    二级菜单_21

                    二级菜单_22

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

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

                    纯CSS相册 by 司徒正美

                    纯CSS多级菜单 by 司徒正美

                    菜单一

                    二级菜单_11

                    二级菜单_12

                    菜单二

                    二级菜单_21

                    二级菜单_22

                    菜单三

                    二级菜单_31

                    二级菜单_32

                    菜单四

                    二级菜单_41

                    二级菜单_42

                    运行代码

                    好了,搞定非IE6的所有游览器了,下一部分我亚万博体育app下载链接们来处置惩罚IE6这个固执的孩子。

                    免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

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