jquery implémente l'effet de menu coulissant le plus simple code

jquery implémente l'effet de menu coulissant le plus simple code_jquery

WBOY

Libérer： 2016-05-16 15:39:49

original

1221 Les gens l'ont consulté

L'exemple de cet article décrit le code d'effet de menu coulissant le plus simple implémenté par jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit du menu déroulant jQuery le plus simple, implémentation du code jQuery, il n'y a pas grand chose à modifier le menu, juste quelques implémentations de base, en particulier c'est un bon exemple de référence pour apprendre jQuery, ici est utilisé Une bibliothèque de packages jquery Le fichier jquery.tools.min.js est importé de l'extérieur. Pendant les tests, l'effet peut ne pas être visible en raison d'un chargement infructueux. L'actualisation de la page Web peut résoudre ce problème.

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

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-simple-nav-cha-menu-style-codes/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下拉滑出的菜单</title>
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
 $("#list li").hover(function() {
 $(this).children("ul").slideDown();
 }, function() {
 $(this).children("ul").slideUp();
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
#list{font-size:14px;width:500px;margin:55px auto}
#list ul{font-size:12px;display:none}
#list .li{float:left;width:100px;margin-right:1px;background:orange}
</style>
</head>
<body>
<ul id="list">
 <li class="li">
  <a href="#">游戏</a>
  <ul>
   <li><a href="#">单机游戏</a></li>
   <li><a href="#">网络游戏</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">音乐</a>
  <ul>
   <li><a href="#">流行歌曲</a></li>
   <li><a href="#">摇滚</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">编程语言</a>
  <ul>
   <li><a href="#">Javascript</a></li>
   <li><a href="#">PHP</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la programmation jQuery de chacun.