*新闻详情页*/>
这是1个非常炫的作用,让网页页面看起来像桌面上程序流程,如window的刚开始菜单。完成基本原理基础和纯CSS相册类似,但要留意的事项较为多,让大家1步步来吧。
先来1个十分简易的1级菜单与悬停实际效果。
<ul id="menu"> <li> <a href="//www.jb51.net/rubylouvre/"> 菜单1<!--小图--><span><!--大图--></span> </a> </li> <li> <a href="//www.jb51.net/rubylouvre/"> 菜单2<!--小图--><span><!--大图--></span> </a> </li> <li> <a href="//www.jb51.net/rubylouvre/"> 菜单3<!--小图--><span><!--大图--></span> </a> </li> <li class="last"> <a href="//www.jb51.net/rubylouvre/"> 菜单4<!--小图--><span><!--大图--></span> </a> </li> </ul>
构造很熟习吧,便是把原先放照片的地区换为文本罢了。我还特地标明来了。接着下来的主要表现层编码十分简易。
* { 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 li span { display:none; position:absolute; left:0; top:32px; width:200px; height:150px; background:#B9D6FF; } .menu a:hover span { display:block; }
这里有两个值得留意的地区。大家先说第1个。子菜单(span元素)的top应当能使其顶部滞留在a元素的范畴内,假如包括块是li元素,同理。当span的top值超过32px,如40px,大家就没法把电脑鼠标移到span元素上。由于离去了a:hover的功效范畴,span元素又再次掩藏。
.menu li span { display:none; position:absolute; left:0; top:40px;/*★★改动这里★★*/ width:200px; height:150px; background:#B9D6FF; }
第2个难题是IE6独有的,便是子菜单在对应的包括块mouseout后仍未消失的难题。hover伪类非常于moverover与moverout。大家在能够在mouseover给它的子孙后代元素评定1种款式,mouseout时评定另外一种。换言之,display如今在IE6没法切换(img元素以外)。处理方式用visibility 替代display。
好了,如今大家真实做2级菜单,把相关span的CSS全删除,并在构造层原span的部位改成以下编码:
<ul> <li><a href="//www.jb51.net/rubylouvre/">2级菜单_11</a></li> <li><a href="//www.jb51.net/rubylouvre/">2级菜单_12</a></li> </ul>
大家在各游玩器看1下,觉得十分乏力。IE6与Opera10的2级菜单项是竖直的,但大家并沒有消除波动啊?firefox3.5与chrome与safari4的2级菜单项是水均分布了,但上面仿佛多出1个菜单项……IE8同学这次反而是主要表现得最好是的。我沒有装IE7,因此1向忽视它。
大家再次设定1下款式,如把包括块改设在li元素上,让2级菜单项呈竖直显示信息。
* { 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的第1个运作框在chrome中遇到的bug1样*/ height:32px; width:100px; line-height:32px; background:#a9ea00; color:#ff8040; text-decoration:none; text-align:center; } .menu a:hover { background:#369; color:#fff; } /*新增的2级菜单一部分*/ .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; }
发现2级菜单在firefox与safari与chrome中沒有反映,弹不出来(这3个访问器的CSS一部分相互之间抄袭比较严重啊)。opera10主要表现得最好是,IE8其次。但是,规范访问器的全部元素都适用hover伪类,不像IE6,非带href的a元素不能。大家改变一部分CSS编码:
.menu ul li:hover ul,/*非IE6*/ .menu ul a:hover ul{/*IE6*/ visibility:visible; }
2级菜单能弹出来了,但那个神密的li元素也现形了。我用双向波动的收拢包围着(shrink-wrapping)状况都没法清除这个神密的li元素。参照外国的编码,方式是,把全部子菜单放到a元素的外面,随后用li:hover操纵款式的切换。因而构造层改变以下:
<div class="menu"> <ul> <li> <a href="//www.jb51.net/rubylouvre/">菜单1 </a> <ul> <li><a href="//www.jb51.net/rubylouvre/">2级菜单_11</a></li> <li><a href="//www.jb51.net/rubylouvre/">2级菜单_12</a></li> </ul> </li> <li> <a href="//www.jb51.net/rubylouvre/">菜单2</a> <ul> <li><a href="//www.jb51.net/rubylouvre/">2级菜单_21</a></li> <li><a href="//www.jb51.net/rubylouvre/">2级菜单_22</a></li> </ul> </li> <li> //***************略************ </li> <li> //***************略************ </li> </ul> </div>
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 抠图换背景_免费的抠图软件_美图抠图_手机抠图软件哪个好_p图软件哪个好用 版权所有 (网站地图) 粤ICP备10235580号