recherche

Maison >interface Web >js tutoriel >jquery implémente l'effet de menu coulissant le plus simple code_jquery

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

WBOY
WBOYoriginal
2016-05-16 15:39:491212parcourir

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>

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

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：Code du menu de gestion de gauche du backend implémenté par les compétences js_javascriptArticle suivant：Code du menu de gestion de gauche du backend implémenté par les compétences js_javascript

Articles Liés

Voir plus