집 > 기사 > 웹 프론트엔드 > jquery는 아래로 슬라이드되는 보조 탐색의 슬라이드다운 메뉴 효과를 구현합니다.

jquery는 아래로 슬라이드되는 보조 탐색의 슬라이드다운 메뉴 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:43:041359검색

이 문서의 예에서는 jquery가 보조 탐색의 슬라이드다운 메뉴 효과를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

jQuery와 JavaScript로 구현된 웹페이지의 슬라이드다운 메뉴 효과입니다. 색칠된 부분은 클릭하면 2단계 하위 메뉴로 확장됩니다. 다시 메인 메뉴를 클릭하면 하위 메뉴가 표시될 수 있으며, 해당 메뉴에서 표시할 수 있는 기능은 기업 웹사이트의 제품 분류, 뉴스 기사 열 탐색 등에 적합합니다. 현재 이 메뉴는 두 가지 수준을 지원합니다. 더 많은 수준의 메뉴를 직접 확장할 수 있습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-codes/

구체적인 코드는 다음과 같습니다.

<!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>

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：js로 구현된 간단한 웹페이지 슬라이딩 탭 메뉴 효과 코드다음 기사：js로 구현된 간단한 웹페이지 슬라이딩 탭 메뉴 효과 코드

jquery는 아래로 슬라이드되는 보조 탐색의 슬라이드다운 메뉴 효과를 구현합니다.

관련 기사