jquery implémente le menu déroulant de navigation secondaire effect

jquery implémente le menu déroulant de navigation secondaire effect_jquery

WBOY

Libérer： 2016-05-16 15:24:57

original

1744 Les gens l'ont consulté

L'implémentation du menu déroulant est très simple, et elle peut également être implémentée avec du CSS pur, mais je ne suis pas doué pour cela. Il ne faut que deux lignes de code pour utiliser jquery, j'utilise donc jquery css pour. implémentez une simple navigation dans un menu déroulant secondaire. Je le partagerai avec vous pour votre référence. Le contenu spécifique comme suit

Opération de rendu :

Code spécifique :
Première étape : Déterminer le format html de la navigation

<ul id="nav"> 
        <li><a href="#">首页</a> 
          <ul> 
            <li><a href="#">PHP编程</a></li> 
            <li><a href="#">JAVA编程</a></li> 
            <li><a href="#">RGB对照表</a></li> 
            <li><a href="#">颜色搭配技巧</a></li> 
          </ul> 
        </li> 
        <li><a href="#">栏目一</a> 
          <ul> 
            <li><a href="#">PHP编程</a></li> 
            <li><a href="#">JAVA编程</a></li> 
            <li><a href="#">RGB对照表</a></li> 
            <li><a href="#">颜色搭配技巧</a></li> 
          </ul> 
        </li> 
<ul>

Copier après la connexion

Étape 2 : CSS pour obtenir un effet de navigation

 #nav { 
        line-height: 24px; list-style-type: none; background:#666; 
      } 
      #nav a { 
        display: block; width: 100px; text-align:center; 
      } 
      #nav a:link { 
        color:#666; text-decoration:none; 
      } 
      #nav a:visited { 
        color:#666;text-decoration:none; 
      } 
      #nav a:hover { 
        color:#FFF;text-decoration:none;font-weight:bold; 
      } 
      #nav li { 
        float: left; width: 100px; background:#CCC; 
      } 
      #nav li a:hover{ 
        background:#999; 
      } 
      #nav li ul { 
        line-height: 27px; list-style-type: none;text-align:left; width: 180px; position: absolute;display: none;
      } 
      #nav li ul li{ 
        float: left; width: 180px; 
        background: #F6F6F6; 
      } 
      #nav li ul a{ 
        display: block; width: 156px;text-align:left;padding-left:24px; 
      } 
      #nav li ul a:link { 
        color:#666; text-decoration:none; 
      } 
      #nav li ul a:visited { 
        color:#666;text-decoration:none; 
      } 
      #nav li ul a:hover { 
        color:#F3F3F3;text-decoration:none;font-weight:normal; 
      }

Copier après la connexion

Étape 3 : JQuery implémente l'effet de masquage de la liste déroulante

  $(function() {
        $("#nav li").hover(
            function() {
              $(this).find("ul").show(100);
            },
            function() {
              $(this).find("ul").hide(300);
            }
        );
      });

Copier après la connexion

J'espère que cet article vous aidera à apprendre la programmation JavaScript et vous apprendra comment obtenir l'effet de menu déroulant de navigation secondaire via jquery.