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

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

WBOY

Libérer： 2016-05-16 15:43:04

original

1444 Les gens l'ont consulté

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>

Copier après la connexion

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