これは、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! 一人で
