Beau code d'effet de menu déroulant secondaire fluide implémenté par jQuery

Beau code d'effet de menu déroulant secondaire fluide implémenté par jQuery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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

original

1602 Les gens l'ont consulté

L'exemple de cet article décrit l'effet de menu déroulant secondaire fluide et exquis implémenté par jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Il s'agit d'un effet de menu de navigation secondaire descendant implémenté par jQurey. L'effet est très bon, s'étendant en douceur de haut en bas, donnant aux gens une sensation coordonnée et belle ! La structure du code js et html est simple et claire, facile à utiliser et à modifier !

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现精美二级菜单——js特效大全</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:12px/normal Arial, Helvetica, sans-serif; }
ul, ol { list-style:none; }
a img { border:none; }
#content { width:800px; margin:30px auto; }
.main_nav { width:100%; height:30px; }
.main_nav ul li { float:left; width:190px; height:30px; border-right:1px solid #666; position:relative; }
.main_nav ul li a { display:block; height:30px; line-height:30px; text-align:center; background:#333; color:#ccc; text-decoration:none; }
.main_nav ul li dl { position:absolute; left:0; top:30px; width:190px; display:none; }
.main_nav ul li dl dd { height:31px; }
.main_nav ul li dl dd a { display:block; height:30px; line-height:30px; text-align:center; color:white; background:#555; border-bottom:1px solid #666; }
.main_nav ul li dl dd a:hover { background:#333; color:#ccc; }
.click { margin-top:200px; }
</style>
</head>
<body>
<div id="content">
 <div class="main_nav hover">
  <ul>
   <li><a href="#" title="js特效大全">网页特效</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
     <dd><a href="#" title="js特效大全">网页特效 </a></dd>
     <dd><a href="#" title="js特效大全">网页特效</a></dd>
    </dl>
   </li>
   <li><a href="#" title="js特效大全">网页设计</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
     <dd><a href="#" title="js特效大全">网页设计</a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
     <dd><a href="#" title="js特效大全">网页设计 </a></dd>
    </dl>
   </li>
   <li><a href="#" title="">网页制作</a>
    <dl>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
     <dd><a href="#" title="js特效大全">网页制作 </a></dd>
     <dd><a href="#" title="js特效大全">网页制作</a></dd>
    </dl>
   </li>
   <li><a href="#" title="">网站优化</a>
    <dl>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
     <dd><a href="#" title="js特效大全">网站优化 </a></dd>
     <dd><a href="#" title="js特效大全">网站优化</a></dd>
    </dl>
   </li>
  </ul>
 </div>
</div>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(".hover ul li").hover(function(){
  $(this).children("dl").slideDown(300)
}, function(){
  $(this).children("dl").slideUp(100)
});
</script>
</body>
</html>

Copier après la connexion

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", "Résumé de l'utilisation du sélecteur jquery" et "jQuery plug-ins courants et résumé d'utilisation》

J'espère que cet article sera utile à tous ceux qui programment jQuery.