リンクをポイントすると、Web ページ内の小さなボールが自動的にリンクに向かって走ります

著者：Eve Cole 更新時間：2009-06-20 15:46:10

Web ページの特殊効果コード: 純粋な CSS で作成された Web ページのドロップダウンメニュー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/ DTD/xhtml11.dtd " [ <!ELEMENT a (#PCDATA | table)* > ]> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" > <head > <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title>純粋な CSS ドロップダウンメニュー、IE および FF と互換性があります</title> <style type="text/css"> body {color:#fff;} #wrapper {color:#000;} .red {color:#c00;} #info {margin-top:20px;} #info h1 {font-サイズ: 3em; テキスト整列: センター; フォントファミリー: ジョージア、「タイムズニューローマン」、セリフ;} #head {高さ: 145px; 境界: 0;} #positioner {クリア: 相対; 1px; z-index:100; } #ads {position:relative; z-index:10;} .menu {position:absolute;} #noniemenu ul {padding:0; :0;} #noniemenu .holder ul li {リストスタイルタイプ: none;} #noniemenu .holder li {} #noniemenu .holder li ul {表示: none;} #noniemenu .holder li:hover > ul#a3 {表示:ブロック; 位置: 左: 105px; マージン:-20px; 境界: 1px ソリッド #000;} #noniemenu .bold {font-weight:bold;} #noniemenu .holder { color:# fff; 幅: 104px; 高さ: 18px; フロート: 左; フォントサイズ: 10px; :auto; } #noniemenu a.outer:visited { color:#fff; 行の高さ:18px; text-align:center;装飾:なし; フォントファミリー: verdana、arial、sans-serif; } #noniemenu a.outer:hover {background:#697210; } #noniemenu div.open {display:none;} #noniemenu内部、#noniemenu a.inner: 訪問済み { 表示: ブロック; 幅: 18px; 境界線: 装飾: #000; #eee; text-align:center ; } #noniemenu a.second {font-weight:bold;} #noniemenu a.inner:hover { background:#add; </style>  <!--[if lte IE 6]> <style> #ads {display:none;} #adsie {clear:both; margin-top:10px;} </style> <![endif]- -> </head> <body > <div id="wrapper"> <div id="head"> <div id="positioner"> <div class="menu"> <a class="outer" href= "../menu/index. html">デモ <table class="first"><tr><td> <a class="inner" href="../menu/zero_dollars.html" title="ゼロドル広告ページ">ゼロドル</a> <a class="inner" href="../menu/embed.html" title="画像の周りにテキストを折り返す">テキストを折り返す</a> <a class=" inner" href="../menu/form.html" title="フォームのスタイリング">スタイル付きフォーム</a> <a class="inner" href="../menu/nodots.html" title="削除アクティブ/フォーカスの境界線">アクティブフォーカス </a> <a class="inner Second" href="../menu/hover_click.html" title="アクティブ/フォーカスの境界線なしでホバー/クリック">ホバー/クリック > <table><tr><td > <a class="inner" href="../menu/form.html" title="フォームのスタイリング">スタイル付きフォーム</a> <a class="inner" href= "../menu/nodots.html" title="アクティブ/フォーカスの境界線の削除">アクティブフォーカス</a> <a class="inner" href="../menu/hover_click.html" title="Hover/アクティブ/フォーカス境界なしでクリック" >ホバー/クリック</a> </td></tr></table> </a> <a class="inner" href="../menu/shadow_boxing.html " title="マルチポジションドロップシャドウ">シャドウボックス</a> <a class="inner" href="../menu/old_master.html" title="詳細情報のイメージマップ">イメージマップ</a> a> <a class="inner " href="../menu/bodies.html" title="楽しい背景画像">楽しい背景</a> <a class="inner" href="../menu /fade_scroll.html" title="フェードアウトスクロール">フェードスクロール</a> <a class="inner" href="../menu/em_images.html" title="全サイズの画像の比較">全サイズ画像</a> </td ></tr></table> </a> <a class="outer" href="index.html">メニュー <table class="first"><tr><td > <a class="inner" href="spies.html" title="スパイのコード化されたリスト">スパイメニュー</a> <a class="inner" href="vertical.html" title="水平方向垂直メニュー">垂直メニュー</ a> <a class="inner" href="expand.html" title="順序なしリストの拡大">リストの拡大</a> <a class="inner" href="enlarge .html" title="リンク画像を含む順序なしリスト">リンク画像</a> <a class="inner" href="cross.html" title="非長方形リンク">非長方形</a> <a class="inner" href="jigsaw.html" title="ジグソーリンク">ジグソーリンク</a> <a class="inner" href="circles.html" title="循環リンク">循環リンク</a> </td> </tr></table> </a> <a class="outer" href="../layouts/index.html">レイアウト <table class="first">< tr><td> <a class ="inner" href="../layouts/bodyfix.html" title="クロスブラウザ固定レイアウト">修正 1</a> <a class="inner" href="。 ./layouts/body2.html" title="クロスブラウザ固定レイアウト">固定 2</a> <a class="inner" href="../layouts/body4.html" title="クロスブラウザ固定レイアウト" >修正 3</a> <a class="inner" href="../layouts/body5.html" title="クロスブラウザ固定レイアウト">修正 4</a> <a class="inner" href= "../layouts/minimum.html" title="単純な最小幅レイアウト">最小幅</a> </td></tr></table> </a> <a class="outer" href ="../boxes/index .html">ボックス <table class="first"><tr><td> <a class="inner" href="../boxes/scrollbars.html" title="左スクロールバー">左スクロール</ a> <a class="inner" href="../boxes/floatfix.html" title="IE6 3px float fix">IE6 3px fix</a> <a class=" inner" href="../boxes/snazzy.html" title="おしゃれなボーダー">おしゃれなボーダー</a> <a class="inner" href="../boxes/krazy.html" title="Krazyコーナーズ">クレイジーコーナーズ</a> <a class="inner" href="../boxes/outside.html" title="Percentage PLUS ピクセル">% PLUS ピクセル</a> <a class="inner" href="../boxes/ minwidth.html" title="IE の最小幅">IE の最小幅</a> <a class="inner" href="../boxes/minheight.html" title ="IE の最小高さ" >IE 最小高さ</a> </td></tr></table> </a> <a class="outer" href="../mozilla/index. html">MOZILLA <table class= "first"><tr><td> <a class="inner" href="../mozilla/dropdown.html" title="ドロップダウンメニュー">ドロップダウンメニュー< /a> <a class=" inner" href="../mozilla/cascade.html" title="カスケードメニュー">カスケードメニュー</a> <a class="inner" href="../mozilla /content.html" title=" content の使用:">content:</a> <a class="inner" href="../mozilla/moxbox.html" title=":div に適用された hover">mozzieボックス</a> <a class ="inner" href="../mozilla/rainbow.html" title="虹を作ることができます">虹ボックス</a> <a class="inner" href=" ../mozilla/snooker.html " title="スヌーカーキュー">スヌーカーキュー</a> <a class="inner" href="../mozilla/target.html" title="ターゲット練習">ターゲット練習</a> <a class= "inner" href="../mozilla/splittext.html" title="2 トーンの見出し">2 トーンの見出し</a> <a class="inner" href=".. /mozilla/shadow_text.html" title ="シャドウテキスト">シャドウテキスト</a> </td></tr></table> </a> <a class="outer" href="../ie /index.html">EXPLORER < table class="first"><tr><td> <a class="inner" href="../ie/exampleone.html" title="例 1">例 1< /a> <a class=" inner" href="../ie/weft.html" title="Weft フォント">Weft フォント</a> <a class="inner" href="../ie/ exampletwo.html" title="垂直配置">垂直配置</a> </td></tr></table> </a> <a class="outer" href="../opacty/index. html">不透明度 <table class= "first"><tr><td> <a class="inner" href="../opacty/colours.html" title="カラーホイール">不透明色</a> <a class="inner" href="../opacty/picturemenu.html" title="不透明度を使用したメニュー">不透明なメニュー</a> <a class="inner" href="../opacty/png .html" title="部分不透明度">部分不透明度</a> <a class="inner" href="../opacty/png2.html" title="部分不透明度 II">部分不透明度 II</a> </td></tr> </table> </a> </div> <div id="noniemenu"> <div class="holder"> <ul> <li><a class="outer" href ="../menu/index .html">デモ</a></li> <li><a class="inner" href="../menu/zero_dollars.html" title="ゼロドル広告page">0 ドル</a ></li> <li><a class="inner" href="../menu/embed.html" title="画像の周囲にテキストを折り返す">テキストを折り返す</a> </li> <li>< a class="inner" href="../menu/form.html" title="フォームのスタイリング">スタイル付きフォーム</a></li> <li><a class= "inner" href=".. /menu/nodots.html" title="アクティブ/フォーカス境界線の削除">アクティブフォーカス</a></li> <li><a class="inner Second" href=". ./menu/hover_click.html" title="アクティブ/フォーカス境界線なしでホバー/クリック">ホバー/クリック ></a> <ul id="a3"> <li><a class="inner" href= "../menu/form.html" title="フォームのスタイリング">スタイル付きフォーム</a></li> <li><a class="inner" href="../menu/nodots.html" タイトル="アクティブ/フォーカスの境界線を削除する" >アクティブフォーカス</a></li> <li><a class="inner" href="../menu/hover_click.html" title="アクティブな境界線がない状態でホバー/クリック/focus borders">ホバー/クリック </a></li> </ul> </li> <li><a class="inner" href="../menu/shadow_boxing.html" title="マルチ-position ドロップシャドウ">シャドウボックス </a></li> <li><a class="inner" href="../menu/old_master.html" title="詳細情報のイメージマップ">イメージマップ</a></li> <li><a class="inner" href="../menu/bodies.html" title="楽しい背景画像">楽しい背景</a></li> < li><a class="inner " href="../menu/fade_scroll.html" title="フェードアウトスクロール">フェードスクロール</a></li> <li><a class="inner" href="../menu/ em_images.html" title="全サイズの画像の比較">全サイズの画像</a></li> </ul> </div> <div class="holder"> <ul > <li><a class= "outer" href="index.html">メニュー</a></li> <li><a class="inner" href="spies.html" title="コード化されたコードスパイのリスト">スパイメニュー</a></li> <li><a class="inner" href="vertical.html" title="水平垂直メニュー">垂直メニュー</a></li> > <li><a class= "inner" href="expand.html" title="順序なしリストの拡大">リストの拡大</a></li> <li><a class="inner" href=" Expand.html" title="リンク画像を含む順序なしリスト">リンク画像</a></li> <li><a class="inner" href="cross.html" title="非長方形リンク" >非長方形</a> </li> <li><a class="inner" href="jigsaw.html" title="ジグソーリンク">ジグソーリンク</a></li> <li>< a class="inner" href= "circles.html" title="circular links">circular links</a></li> </ul> </div> <div class="holder"> <ul> < li><a class="outer " href="../layouts/index.html">レイアウト</a></li> <li><a class="inner" href="../layouts/bodyfix .html" title="クロスブラウザの固定レイアウト">修正 1</a></li> <li><a class="inner" href="../layouts/body2.html" title="クロスブラウザの固定レイアウトlayout">固定 2</a ></li> <li><a class="inner" href="../layouts/body4.html" title="クロスブラウザ固定レイアウト">固定 3</a> </li> <li>< a class="inner" href="../layouts/body5.html" title="クロスブラウザ固定レイアウト">固定 4</a></li> <li><a class="inner" href=" ../layouts/minimum.html" title="単純な最小幅レイアウト">最小幅</a></li> </ul> </div> <div class="ホルダー"> <ul> <li ><a class="outer" href="../boxes/index.html">ボックス</a></li> <li><a class="inner" href= "../boxes/scrollbars.html" title="左スクロールバー">左スクロール</a></li> <li><a class="inner" href="../boxes/floatfix.html" title="IE6 3px float 修正" >IE6 3px 修正</a></li> <li><a class="inner" href="../boxes/snazzy.html" title="Snazzy borders">snazzy borders</a></li > <li><a class="inner" href="../boxes/krazy.html" title="クレイジーコーナーズ">クレイジーコーナーズ</a></li> <li> ><a class="inner" href="../boxes/outside.html" title="Percentage PLUS ピクセル">% PLUS ピクセル</a></li> <li><a class="inner" href ="../boxes/minwidth .html" title="IE の最小幅">IE の最小幅</a></li> <li><a class="inner" href="../boxes /minheight.html" title="IE の最小高さ">IE の最小高さ</a></li> </ul> </div> <div class="holder"> <ul> <li>< a class="outer" href= "../mozilla/index.html">MOZILLA</a></li> <li><a class="inner" href="../mozilla/dropdown.html" title="ドロップダウンメニュー" >ドロップダウンメニュー</a></li> <li><a class="inner" href="../mozilla/cascade.html" title="カスケードメニュー">カスケードメニュー</a></ li> <li><a class="inner" href="../mozilla/content.html" title="コンテンツの使用:">コンテンツ:</a></li> <li><a class=" inner" href="../mozilla/moxbox.html" title=":hover を div">mozzie ボックスに適用</a></li> <li><a class= "inner" href=".. /mozilla/rainbow.html" title="虹">虹のボックスを作ることができます</a></li> <li><a class="inner" href=".. /mozilla/snooker.html" title ="スヌーカーキュー">スヌーカーキュー</a></li> <li><a class="inner" href="../mozilla/target.html" title="ターゲット練習">ターゲットの練習</a ></li> <li><a class="inner" href="../mozilla/splittext.html" title="2 つのトーンの見出し">2 つのトーンの見出し</a> </li> <li>< a class="inner" href="../mozilla/shadow_text.html" title="シャドウテキスト">シャドウテキスト</a></li> </ul> </div > <div class="holder" > <ul> <li><a class="outer" href="../ie/index.html">エクスプローラー</a></li> <li><a クラス="inner" href=". ./ie/exampleone.html" title="例 1">例 1</a></li> <li><a class="inner" href="../ie /weft.html" title="横糸フォント">横糸フォント</a></li> <li><a class="inner" href="../ie/exampletwo.html" title="垂直配置" >垂直配置</a></li> </ul> </div> <div class="holder"> <ul> <li><a class="outer" href="../opacty/index. html">不透明度</a> </li> <li><a class="inner" href="../opacty/colours.html" title="カラーホイール">不透明色</a></li > <li><a class= "inner" href="../opacty/picturemenu.html" title="不透明度を使用したメニュー">不透明なメニュー</a></li> <li><a class=" inner" href="../opacty/png.html" title="部分不透明">部分不透明</a></li> <li><a class="inner" href="../opacty/png2 .html" title="部分不透明度 II">部分不透明度 II</a></li> </ul> </div> </div> </div> </div> <!-- 頭の終わり - -> <div id="info "> <h2>楽しいドロップダウン</h2> <h1>JAVASCRIPT なし</h1> <h1>CSS だけ!!!</h1> <h1 class="red">今すぐカスケード付き</h1> </h1> div> </div> </body> </html>