Exemple d'explication de code du menu CSS à plusieurs niveaux

Le contenu de cet article concerne l'exemple d'explication du code du menu CSS à plusieurs niveaux. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Il s'agit d'une fonctionnalité plutôt intéressante qui fait ressembler les pages Web à des programmes de bureau, comme le menu Démarrer de la fenêtre. Le principe de mise en œuvre est fondamentalement le même que celui d'un album photo CSS pur, mais il y a d'autres choses auxquelles il faut prêter attention, alors procédons étape par étape.

Commençons par un menu de premier niveau très simple et un effet de survol.

<ul id="menu">
  <li>
    <a href="http://www.php.cn/">
      菜单一<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.php.cn/">
      菜单二<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li>
    <a href="http://www.php.cn/">
      菜单三<!--小图--><span><!--大图--></span>
    </a>
  </li>
  <li class="last">
    <a href="http://www.php.cn/">
      菜单四<!--小图--><span><!--大图--></span>
    </a>
  </li>
</ul>

La structure est très familière, elle remplace simplement l'emplacement d'origine des images par du texte. Je l'ai également marqué spécialement. Le code de la couche de présentation suivante est très simple.

* {
  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;
}

Il y a deux choses à noter ici. Parlons d’abord du premier. Le haut du sous-menu (élément span) doit pouvoir faire en sorte que le haut reste dans la portée de l'élément a. Si le bloc conteneur est un élément li, la même chose s'applique. Lorsque la valeur supérieure de span est supérieure à 32 px, par exemple 40 px, nous ne pouvons pas déplacer la souris vers l'élément span. Parce qu'il a quitté la portée de a:hover, l'élément span est à nouveau masqué.

.menu li span {
  display:none;
  position:absolute;
  left:0;
  top:40px;/*★★修改这里★★*/
  width:200px;
  height:150px;
  background:#B9D6FF;
}

Le deuxième problème est propre à IE6, c'est-à-dire que le sous-menu ne disparaît pas après la sortie de la souris du bloc conteneur correspondant. La pseudo-classe hover est équivalente à moveover et moveout. Nous pouvons attribuer un style à ses éléments descendants lors du survol de la souris et un autre style lors du retrait de la souris. En d’autres termes, l’affichage ne peut pas être commuté dans IE6 (sauf pour les éléments img). La solution consiste à utiliser la visibilité au lieu de l'affichage.

D'accord, maintenant nous créons le menu secondaire, supprimons tous les CSS concernant le span et modifions la position du span d'origine dans la couche de structure par le code suivant :

<ul>
  <li><a href="http://www.php.cn/">二级菜单_11</a></li>
  <li><a href="http://www.php.cn/">二级菜单_12</a></li>
</ul>

Nous sont ici En regardant chaque navigateur, je me sens très faible. Les éléments du menu secondaire d'IE6 et Opera10 sont verticaux, mais nous n'avons pas effacé le flotteur ? Les éléments de menu secondaires de Firefox3.5, Chrome et Safari4 sont répartis horizontalement, mais il semble y avoir un élément de menu supplémentaire au-dessus... Les étudiants d'IE8 ont obtenu les meilleurs résultats cette fois-ci. Je n'ai pas installé IE7, donc je l'ignore toujours.

Réinitialisons le style, par exemple en changeant le bloc conteneur en élément li afin que les éléments du menu secondaire puissent être affichés verticalement.

* {
  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;
}

J'ai constaté que le menu secondaire ne répond pas dans Firefox, Safari et Chrome et ne peut pas apparaître (les parties CSS de ces trois navigateurs sont sérieusement plagiées les unes des autres). Opera10 a obtenu les meilleurs résultats, suivi de IE8. Cependant, tous les éléments des navigateurs standards prennent en charge la pseudo-classe hover, contrairement à IE6, qui nécessite un élément a avec href. On réécrit une partie du code CSS :

.menu ul li:hover ul,/*非IE6*/
.menu ul a:hover ul{/*IE6*/
  visibility:visible;
}

Le menu secondaire peut apparaître, mais le mystérieux élément li est également apparu. J'ai essayé le double emballage rétractable flottant, mais je n'ai pas pu me débarrasser de ce mystérieux élément Li. En ce qui concerne les codes étrangers, la méthode consiste à placer l'intégralité du sous-menu en dehors de l'élément a, puis à utiliser li:hover pour contrôler le changement de style. La couche de structure a donc été réécrite comme suit :

<div class="menu">
  <ul>
    <li>
      <a href="http://www.php.cn/">菜单一 </a>
      <ul>
        <li><a href="http://www.php.cn/">二级菜单_11</a></li>
        <li><a href="http://www.php.cn/">二级菜单_12</a></li>
      </ul>
    </li>
    <li>
      <a href="http://www.php.cn/">菜单二</a>
      <ul>
        <li><a href="http://www.php.cn/">二级菜单_21</a></li>
        <li><a href="http://www.php.cn/">二级菜单_22</a></li>
      </ul>
    </li>
    <li>
    //***************略************
    </li>
    <li>
    //***************略************
    </li>
  </ul>
</div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!