집 >웹 프론트엔드 >JS 튜토리얼 >jQuery_jquery로 구현된 웹페이지 세로 메뉴 효과 코드

jQuery_jquery로 구현된 웹페이지 세로 메뉴 효과 코드

WBOY원래의: 2016-05-16 15:42:311135검색

이 글의 예시에서는 jQuery로 구현한 웹페이지 세로 메뉴 효과 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

접고 확장 가능한 보조 웹페이지 메뉴인 jQuery를 기반으로 한 세로형 웹페이지 메뉴 코드입니다. 백그라운드 관리에서 사용할 수 있는 관리 메뉴가 왼쪽에 표시되도록 수정합니다. jquery를 추가한 후에는 메뉴 확장 및 축소 기능을 구현하는 것이 편리하고 애니메이션 효과도 추가하여 호환성이 좋습니다.

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

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

http://demo.jb51.net/js/2015/jquery-v-web-menu-style-codes/

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 function initMenu() {
 $('#menu ul').hide();
 $('#menu ul:first').show();
 $('#menu li a').click(
 function() {
 var checkElement = $(this).next();
 if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
 return false;
 }
 if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
 $('#menu ul:visible').slideUp('normal');
 checkElement.slideDown('normal');
 return false;
 }
 }
 );
 }
$(document).ready(function() {initMenu();});
</script>
<style>
body{font-family: Helvetica, Arial, sans-serif; font-size: 0.9em;}
p{line-height: 1.5em;}
ul#menu, ul#menu ul{list-style-type:none; margin: 0; padding: 0; width: 15em;}
ul#menu a{display: block; text-decoration: none;}
ul#menu li{margin-top: 1px;}
ul#menu li a{background: #333; color: #fff; padding: 0.5em;}
ul#menu li a:hover{background: #000;}
ul#menu li ul li a{background: #ccc; color: #000; padding-left: 20px;}
ul#menu li ul li a:hover{background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}
.code{border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0;}
.code code{display: block; padding: 3px; margin-bottom: 0;}
.code li{background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em;}
.indent1{padding-left: 1em;}
.indent2{padding-left: 2em;}
</style>
<title>网页竖排菜单jQuery版</title>
<!--[if lt IE 8]>
 <style type="text/css">
 li a {display:inline-block;}
 li a {display:block;}
 </style>
 <![endif]-->
</head>
<body>
<ul id="menu">
<li>
   <a href="#">Weblog工具</a>
   <ul>
    <li><a href="#">PivotX</a></li>
    <li><a href="#">WordPress</a></li>
   </ul>
  </li>
  <li>
   <a href="#">程序语言</a>
   <ul>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Ruby</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">PERL</a></li>
    <li><a href="#">Java</a></li>
    <li><a href="#">C#</a></li>
   </ul>
  </li>
  <li>
   <a href="#">Cool Stuff</a>
   <ul>
    <li><a href="#">Apple</a></li>
    <li><a href="#">Maitianquan</a></li>
    <li><a href="#">XBOX360</a></li>
    <li><a href="#">Nifengla</a></li>
    <li><a href="#">Nintendo</a></li>
   </ul>
  </li>
 </ul>
</body>
</html>

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

성명：

이전 기사：jquery는 LED 광고판 회전 시스템 이미지 전환 효과 코드를 구현합니다.다음 기사：jquery는 LED 광고판 회전 시스템 이미지 전환 효과 코드를 구현합니다.

jQuery_jquery로 구현된 웹페이지 세로 메뉴 효과 코드

관련 기사