집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 가장 간단한 슬라이딩 메뉴 효과를 구현합니다.

jquery는 가장 간단한 슬라이딩 메뉴 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:39:491217검색

이 기사의 예에서는 jquery로 구현된 가장 간단한 슬라이딩 메뉴 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

이것은 가장 간단한 jQuery 드롭다운 메뉴, jQuery 코드 구현입니다. 메뉴를 수정할 것이 많지 않으며 몇 가지 기본 구현만 있습니다. 특히 jQuery를 학습하기 위한 좋은 참조 예입니다. 여기에는 jquery 패키지 라이브러리가 사용됩니다. jquery.tools.min.js 파일을 외부에서 가져옵니다. 테스트 중에 웹 페이지를 새로 고치면 효과가 나타나지 않을 수 있습니다.

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

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

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

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

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

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

성명：

이전 기사：js_javascript 기술로 구현된 백엔드 왼쪽 관리 메뉴 코드다음 기사：js_javascript 기술로 구현된 백엔드 왼쪽 관리 메뉴 코드

jquery는 가장 간단한 슬라이딩 메뉴 효과를 구현합니다.

관련 기사