これは、jquery アニメーション効果と CSS を使用して作成されたサイド ポップアップ垂直ナビゲーションです。ポップアップ プロセス全体は比較的スムーズで、コードは非常にシンプルです。アニメーションを使用した垂直ナビゲーションを探している場合は、これを試してみてください。以下はエフェクトのスクリーンショットです: HTML ソース コード: コードをコピー コードは次のとおりです: Jquery CSS サイド ポップアップ垂直ナビゲーション >html, body, ul , li { <br>マージン: 0; <br>ボーダー: 0; <br>垂直整列: ベースライン; -family: "Verdana" ,"lucida sans",Sans-serif; <br>font-size: 12px; <br>} <br>html, body { <br>min-height: 100%; : #FFFFFF; <br>背景の繰り返し: 繰り返し-x; <br>背景の色: <br>} <br>ul.side_nav: 200px; <br> フロート: 左; <br> パディング: 0; <br> 位置: 左; 🎜>マージン: 0; <br>パディング: 0; <br>表示: インライン; <br>ul.side_nav li a { <br>幅: 165px; <br>ボーダートップ: 1px 3373a9; <br>ボーダー: 1px ソリッド #003867; <br>表示: ブロック <br>テキスト装飾: なし; >背景: #005094 url (sidenav_arrow.gif) no-repeat 5px 10px; <br>位置: 相対; <br>z-index: 2; <br>ul.side_nav li a:hover { <br>背景色: # 2d353f; <br>ul.side_nav li div { <br>表示: 絶対; <br>上: 2px; 🎜>width: 225px; <br>background: url(bubble_top.gif) no-repeat right top; <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>} <br></スタイル><br><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js <BR>"></スクリプト> <br><script language="javascript"> <br>$(document).ready(function() { <br><br>$("ul.side_nav li").hover(function() { <br>$( this).find("div").stop() <br>.animate({ left: "210", opacity: 1 }, "fast") <br>.css("display" , "ブロック") <br>}, function() { <br>$(this).find("div").stop() <br>.animate({ left: "0", opacity: 0 }, "高速") <br>}) <br>}); <br></script> <br><body> > <br><li> <br><a href="www.corange.cn">Corange.cn</a> <br><br><div><p> <Br /></div> <br><li> <br><a href="#"> <br><div><p>私を知ってください。</p></div><br><li> href="#"> ;ポートフォリオ</a><br><div><p>注目の作品をチェックしてください!</p></li> 🎜><li> <br><a href="#">ブログ</a><br><div><p>チュートリアル、記事、リソース。</p></div> ; <br><br><li><br><div><p>お気軽にご連絡ください!</p></div> <br><li> ; <br><p>ニュース、ビデオなど。<br></ul> /body> <br> </html> <br><br> </div>