jquery 애니메이션 효과와 CSS를 사용하여 만든 측면 팝업 세로 탐색입니다. 전체 팝업 프로세스가 비교적 매끄럽고 코드도 매우 간단합니다. 이것을 시도하십시오. HTML 소스 코드: 코드 복사 코드는 다음과 같습니다. Jquery+CSS侧边弹出垂直导航 <br> html, body, ul, li {<br> margin: 0;<br> padding: 0;<br> border: 0;<br> outline: 0;<br> vertical-align: baseline;<br> font-family: "Verdana","lucida sans",Sans-serif;<br> font-size: 12px;<br> }<br> html, body {<br> min-height: 100%;<br> color: #FFFFFF;<br> background-repeat: repeat-x;<br> background-position: top;<br> background-color: #161f2a;<br> }<br> ul.side_nav {<br> width: 200px;<br> float: left;<br> margin: 0;<br> padding: 0;<br> }<br> ul.side_nav li {<br> position: relative;<br> float: left;<br> margin: 0;<br> padding: 0;<br> display: inline;<br> }<br> ul.side_nav li a {<br> width: 165px;<br> border-top: 1px solid #3373a9;<br> border-bottom: 1px solid #003867;<br> padding: 10px 10px 10px 25px;<br> display: block;<br> color: #fff;<br> text-decoration: none;<br> background: #005094 url(sidenav_arrow.gif) no-repeat 5px 10px;<br> position: relative;<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> position: absolute;<br> top: 2px;<br> left: 0;<br> width: 225px;<br> background: url(bubble_top.gif) no-repeat right top;<br> }<br> ul.side_nav li div p {<br> margin: 7px 0;<br> line-height: 1.3em;<br> padding: 0 5px 10px 30px;<br> color: #444;<br> background: url(bubble_btm.gif) no-repeat right bottom;<br> }<br> http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js</a><br /> "> <br> $(document).ready(function() {<br> $("ul.side_nav li").hover(function() {<br> $(this).find("div").stop()<br> .animate({ left: "210", opacity: 1 }, "fast")<br> .css("display", "block")<br> }, function() {<br> $(this).find("div").stop()<br> .animate({ left: "0", opacity: 0 }, "fast")<br> });<br> });<br> Corange.cnwww.corange.cn">Corange.cn> Go home!ASP About Me Get to know me. Portfolio Get to check out my featured work! ~ ~ ~ ~ ~ 홀로
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
