recherche

Maison >interface Web >js tutoriel >jquery implémente l'effet de menu déroulant de la navigation secondaire qui glisse vers le bas_jquery

jquery implémente l'effet de menu déroulant de la navigation secondaire qui glisse vers le bas_jquery

WBOY
WBOYoriginal
2016-05-16 15:43:041436parcourir

L'exemple de cet article décrit comment jquery implémente l'effet de menu déroulant de la navigation secondaire. 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 déroulant sur une page Web implémenté par jQuery et JavaScript. Le menu coloré est le menu principal de premier niveau. Après avoir cliqué, il se développera et glissera vers le sous-menu de deuxième niveau. le menu principal, et le sous-menu sera réduit, en termes de fonctions que le menu peut afficher, convient à la classification des produits du site Web d'entreprise, à la navigation dans les colonnes d'articles d'actualité, etc. Actuellement, ce menu prend en charge deux niveaux. Si vous êtes intéressé, vous. Vous pouvez étendre vous-même davantage de niveaux de menus.

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-down-show-nav-menu-codes/

Le code spécifique est le suivant : 

<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
 <ul id="sidemenu">
  <li><a href="#" >+ 网页菜单类素材一</a>       
   <ul>
     <li><a href="#">下滑菜单</a></li>
     <li><a href="#">折叠菜单</a></li>
     <li><a href="#">垂直菜单</a></li>
    </ul>
  </li>
  <li><a href="#" >+ 编程源码类资源</a>
   <ul>
    <li><a href="#">ASP源码</a></li>
    <li><a href="#">Delphi源码</a></li>
    <li><a href="#">vc++源码</a></li>
    <li><a href="#">VB源码</a></li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
 $('#sidemenu ul').hide();
 $('#sidemenu ul:first').hide();
 $('#sidemenu li a').click(
 function() {
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  return false;
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  $('#sidemenu ul:visible').slideUp('normal');
  checkElement.slideDown('normal');
  return false;
  }
  }
 );
 }
$(document).ready(function() {initMenu();});
</script>
</body>
</html>

J'espère que cet article sera utile à la conception de 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 d'effet de menu à onglets coulissants de page Web simple implémenté dans jsArticle suivant：Code d'effet de menu à onglets coulissants de page Web simple implémenté dans js

Articles Liés

Voir plus