Maison > Article > interface Web > Exemple de code pour implémenter une barre de menus à plusieurs niveaux à l'aide de JS

Exemple de code pour implémenter une barre de menus à plusieurs niveaux à l'aide de JS

Y2Joriginal: 2017-05-24 11:32:424455parcourir

Récemment, il y a eu un projet pour implémenter des menus de niveau N. Tout d'abord, commencez par la mise en page, c'est-à-dire déterminez s'il existe des menus de niveau inférieur et le code d'implémentation spécifique.

Analyse des exigences

Une analyse simple, pour mettre en œuvre un menu à N niveaux, commencez par la mise en page, c'est-à-dire déterminez s'il existe un menu inférieur -menu de niveau

1. S'il n'y a pas de menu de niveau inférieur, organisez-le directement

2 Il existe un menu de niveau inférieur, qui est divisé en positions de placement de menu de niveau inférieur et. affiche des symboles '>' similaires dans le menu de niveau supérieur. L'effet est comme indiqué sur la figure :

Fig. >

Implémentation initiale

1. Si l'implémentation existe >

Remarque : toutes les préoccupations ci-dessous sont xxx=== yyy xxx : xxx utilisent tous le ternaire

expressions

pour exprimer des idées.

ＨＴＭＬLa structure est la suivante :

Figure : 2

• Pour obtenir l'effet de la figure 1, il suffit de déterminer la balise li children.length===2 ? 'span exist' : 'span remove'

2. L'emplacement où le menu de niveau inférieur apparaît

La structure HTML est la suivante :

•Pour répondre à cette exigence, vous devez également déterminer children.length===2 ? 'Le menu de niveau supérieur est positionné de manière relative, le haut est 0, la gauche est le offsetWidth de niveau supérieur, et le menu de niveau inférieur est positionné de manière absolue' : 'Aucun traitement'

Le code spécifique est le suivant :

【Recommandations associées】

Tutoriel vidéo gratuit Javascript

Exemple de code de production JS de l'affichage des messages de chat QQ. et fonction de soumission de commentaires

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    #box {
      margin: 200px 0 0 50px;
      text-align: center;
      color: #ccc;
    }
    ul {
      list-style: none;
      float: left;
    }
    li {
      width: 150px;
      height: 40px;
      line-height: 40px;
      background-color: #124520;
      border: 1px solid #eee;
      position: relative;
    }
    li span {
      position: absolute;
      top: 0;
      right: 10px;
    }
    li:hover {
      background-color: #666;
      transition: background-color .5s;
    }
    ul {
      display: none;
    }
    ul.first {
      display: block;
    }
    .relative {
      position:relative;
      top: 0;
      left: 0;
    }
    .absolute {
      position: absolute;
      left: 0;
      top: 0;
    }
    .show {
      display: block;
    }
    .hide {
      display: none;
    }
  </style>
</head>
<body>
  <p id="box">
    <ul class="first">
      <li>一级菜单
        <span>></span>
      </li>
      <li>一级菜单
        <span>></span>
        <ul>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二级菜单
            <span>></span>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>一级菜单
        <span>></span>
        <ul>
          <li>二级菜单
            <span>></span>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
          <li>二级菜单
            <span>></span>
            <ul>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
              <li>三级菜单
                <span>></span>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li>一级菜单
        <span>></span>
      </li>
    </ul>
  </p>
</body>
<script type="text/javascript">
let uls = document.querySelectorAll("ul"); //获取所有的ul
let lis = document.querySelectorAll("li"); //获取所有的li
let liWidth = document.querySelector("#box ul").offsetWidth-2 //li的宽度 -2是为了好看
/* 布局start */
/*
 * 
 * 通过下面布局中代码实现每个 li.children.length 要么为0 要么为2
 * 0 无下级菜单
 * 2 有下级菜单
 * 
 */
for (let i = uls.length - 1; i >= 0; i--) {
  if(uls[i].parentNode.nodeName === "LI") {
    uls[i].parentNode.classList.add("relative"); //相对定位
    uls[i].classList.add("absolute"); // 绝对定位
    uls[i].style.left = liWidth + "px"; 
  }
}
for (var i = 0; i < lis.length; i++) {
  if( lis[i].children.length === 1) { //没有下一级菜单直接删除
    lis[i].children[0].outerHTML = "";
  };
}
/* 布局end */
for (let i = 0; i < lis.length; i++) { // 控制每一个li
  lis[i].onmouseover = function() {
    if( lis[i].children.length === 2) {
      this.children[1].classList.remove("hide");
      this.children[1].classList.add("show");
    } 
  }
  lis[i].onmouseout = function() {
    if( lis[i].children.length === 2) {
      this.children[1].classList.remove("show");
      this.children[1].classList.add("hide");
    }
  }
}
</script>
</html>

Une seule ligne de JS pour implémenter la vérification du format de l'argent mobile

4.Compétences code_javascript de mise en œuvre de la validation du formulaire JavaScript

5. Exemples détaillés d'analyseurs de corps middleware couramment utilisés dans Nodejs

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée d'exemples d'analyseurs de corps middleware couramment utilisés dans NodejsArticle suivant：Explication détaillée d'exemples d'analyseurs de corps middleware couramment utilisés dans Nodejs

Articles Liés

Voir plus