CSS多级别菜单的完成编码

日期:2021-03-01 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

这是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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:css控制模块化计划方案 返回下一篇:没有了