以下は、haseユーザーの写真がプロファイルにリンクしているイメージですが、画像上に+記号が表示されます。この部分はリンクして友達を追加します。このようなメニューを実行する最善の方法
私は同様のことをしたいと思っていますが、プラス記号部分をリンクにする代わりに、プラス記号をクリックして、ドロップダウンリストのようないくつかのリンクを表示したいと思います。
これはCSSだけで可能なのでしょうか、JavaScriptが必要になるのでしょうか？
alt text http://img2.pict.com/e6/20/e8/1544808/0/screenshot2b28.png
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style type="text/css" media="all">
ul li ul {display: none; }
ul li {position: relative;
display: block;
height: 91px; /* the size of the image */
width: 91px;
}
ul li span
{display: block;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid #f90;
background-color: #fff;
color: #000;
z-index: 1000;
width: 1em;
height: 1em;
}
ul li:hover ul
{display: block; /* and style as you require */
position: absolute;
left: 91px; /* moving left by the width of the image for a 'flyout' effect. for drop down, use the height instead */
top: 0;
background-color: #fff;
}
ul li ul li
{display: block;
height: 1.2em;
width: 8em;
}
#xx {background: #fff url(img/xx.jpeg) top left no-repeat;
} /* I figure that it'd make sense to use the id of the user/person represented, you may disagree; amend as you require */
#joanne {background: #fff url(img/joanne.jpeg) top left no-repeat;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li id="xx"><span>?</span>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul></li>
<li id="joanne"><span>?</span>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
</ul></li>
</ul>
</div>
</body>
</html>
これは、画像のリストがすべて同じリストの一部であり、プレーンなCSSを気にしないことを前提にしています。また、これは純粋なCSSであり、:hoverに依存しており、どのような形式のonClickイベントでもありません。 onClickにはjsが必要です。
私はまだテストケースを行っていませんが、これはうまくいくと思います。
テストケース：my site。
代わりに：ホバー、何について：フォーカス？第二に、これはIE6では機能しません（問題がある場合）。アンカーだけがそのクラップブラウザでホバーをサポートするためです。 IE 7の場合は、おそらくこのメソッドを使用して安全です。 – Zoidberg
うん、 '：focus'はうまくいくだろう。もちろん、IE6を除いて... –
はい、私はJavascriptが必要とされるであろうと考えていますが、jqueryのの助けを借りて、それは非常に難しいことではないでしょう。通常はドロップダウンリストを作成し（そこには多くのチュートリアルがあります）、望む場所に配置します。興味深い部分は、画像の+記号の部分をクリックしたときにリストを開くことです。 +記号を最初の画像の上に置かれた別の画像にすることができます。これはクリックを簡単に登録することができます。そうしないと、相対位置にある目に見えない要素のように、特定の場所にクリックを登録する他の方法を使用する必要があります。 ：D
プラス記号をクリックして別のページに移動する以外に何かをしたいという事実に基づいて、はいJavaScriptが必要です。 – jimyi