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> <BR> <BR><ul class="side_nav" > <BR>< ;li> <BR><a href="www.corange.cn">Corange.cn <BR><br><div><p>집에 가세요! <Br /> ASP 내 소개 나에 대해 알아보세요. 내 추천 작품을 확인해 보세요! 🎜> 블로그 자습서, 기사 및 리소스> ; 연락처 주저하지 마시고 연락주세요! Rss ; 뉴스, 동영상 등. /본문>