jquery 애니메이션 효과와 CSS를 사용하여 만든 측면 팝업 세로 탐색입니다. 전체 팝업 프로세스가 비교적 매끄럽고 코드도 매우 간단합니다. 애니메이션이 포함된 세로 탐색을 찾고 있다면 시도해 볼 수 있습니다. 다음은 효과 스크린샷입니다. HTML 소스 코드: 코드 복사 코드는 다음과 같습니다. Jquery CSS 측면 팝업 수직 탐색 >html, body, ul , li { <br> 여백: 0; <br> 테두리: 0; <br> 수직 정렬: 기준선; -family: "Verdana","lucida sans",Sans-serif; <br>글꼴 크기: 12px; <br>} <br>html, body { <br>최소 높이: <br>색상 : #FFFFFF; <br>배경 반복: 반복-x; <br>배경 색상: #161f2a <br>} <br>ul.side_nav: 200px; <br>float: 왼쪽; <br>padding: 0; <br>} <br>ul.side_nav li { <br>float: 왼쪽; 🎜>여백: 0; <br>패딩: 0; <br>디스플레이: 인라인; <br>} <br>ul.side_nav li a { <br>너비: 165px <br>테두리 상단: 1px 3373a9; <br>테두리 -하단: 1px 솔리드 #003867; <br>패딩: 10px 10px 10px 25px; <br>디스플레이: <br>색상: <br>텍스트 장식: 없음; >배경: #005094 url (sidenav_arrow.gif) 반복 없음 5px 10px; <br>위치: 상대; <br>z-index: 2 <br>} <br>ul.side_nav li a:hover { <br> background-color: # 2d353f; <br>} <br>ul.side_nav li div { <br>display: none; <br>위치: 절대값: <br>왼쪽: 0; 🎜>너비: 225px; <br>배경: url(bubble_top.gif) no-repeat right top; <br>} <br>ul.side_nav li div p { <br>margin: 7px 0; 높이: 1.3em; <br>패딩: 0 5px 10px 30px; <br>색상: #444; <br>배경: url(bubble_btm.gif) 오른쪽 하단; 스타일> <br>< ;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js <br>"></ script> <br>< ;script 언어="javascript"> <br>$(document).ready(function() { <br><br>$("ul.side_nav li").hover(function() { <br>$( this).find("div").stop() <br>.animate({ 왼쪽: "210", 불투명도: 1 }, "빠름") <br>.css("display" , "블록") <br>}, function() { <br>$(this).find("div").stop() <br>.animate({ 왼쪽: "0", 불투명도: 0 }, "빠름") <br>}) <br></script> <br></head> <br><ul class="side_nav" > <br>< ;li> <br><a href="www.corange.cn">Corange.cn</a> <br><br><div><p>집에 가세요! <Br /> ASP</p></div> <br><li> <br><a href="#"> <br><div> ;<p>나에 대해 알아보세요.</p></div> <br></li> <br><br><br><a href="#"> ;포트폴리오</a> <br><div><p>내 추천 작품을 확인해 보세요!</p></div> 🎜><li> <br><a href="#">블로그</a> <br><div><p>자습서, 기사 및 리소스</p></div> ; <BR>< /li> <br><br><li> <br><a href="#">연락처</a> 주저하지 마시고 연락주세요!</p></div> <br></li> <br><li><br><a href="#">Rss</a> ; <br><div><p>뉴스, 동영상 등.</p></div> <br></ul> /본문> <br> </html> <br><br></a> </div>