CSSメニューでこれを行うことはできますか？

Question

javascriptを使わずにドロップダウンメニューのナビゲーションを行い、各項目の横に画像を表示することはできますか？

また、私はテーブルでこの作業をしたいので、テーブルセルの上にマウスを置くと、それぞれの横にアイコン付きのリンクのリストがドロップダウン表示されます。私はこれがjavascriptの使用なしでも可能であるかどうかわからないのですか？

私はあなたが唯一のHTMLとCSSを使用してメニューを設計することができますPhotobucketののメニュー alt text http://img2.pict.com/f9/72/7f/1437912/0/640/screenshot2b9.png

Answer 1

可能でしょうか？ はい

お勧めですか？ ません

あなたはまだIE6をサポートしなければならないとだけhref属性で<a>タグの:hover擬似セレクタをサポートしてこれを下回ります。他のタグでは、:hover疑似セレクタは無視されます。他のブラウザでは、その制限はありません。 <a>タグを使用することにより

、あなた自身に次のような制限を与えることはありません：

• んが、サブ<a>タグが、メニューは基本的に一つの場所につながることを意味しています。
• 容易インライン要素にdisplay: blockを使用することによって回避することができる<a>タグ（内部にはブロックレベル要素は、これは<div>ない<table>も他block level elementsないことを意味しない。世界で

のInternet Explorer 6無しと以下、これはかなり行うには些細なこと。しかし、2009年7月there is still 27.21% of the web using IE6のように、あなたがそれらを書きたくないかもしれないことを考慮う。

Answer 2

にやろうとしていたものと似たものがあります。しかし、のイベント [キーボードとマウス]をすべて処理するには、JavaScriptを使用する必要があります。

Answer 3

もちろん、あなたは。リストは<li>タグ以外の何物でもないことができます。<li>タグ内のあなた何でも入れてもいいOUがしたい：その後、

<ul> 
    <li> 
     <img src="someimage.jpg" alt="alttext" /> 
     <p><a href="yourlink.html">Your link</a></p> 
    </li> 
</ul> 

とあなたのCSS/

EDITああwは、メニューの効果を作り、私はあなたがテーブルのみを使用したい参照してください。もっと慎重に読むべきだった。 JavaScriptを使用したくない場合（なぜ、わからないのですか？）、いいえ、wss/cssとhtmlではなく、少なくともクロスブラウザではありません。あなたは現代のブラウザのどの要素にも使える疑似クラス:hoverでそれを行うことができますが、< IE6はそれをどうしたらいいのか分かりません。しかし、とにかくIE6のサポートを停止する必要がありますので、おそらくあなたは大丈夫です:)

Answer 4

まあ、はい。ページのソースを見ると、<ul>が表示されます。彼らは確かに私はFirefoxでJSを無効にして、その後、ページをリロードして、メニューが機能しなくなったという点でJSを使用しますが、それはメニュー自体にどれだけ必要なのか分かりません。

（x）htmlの<img />タグを使用するか、CSSの背景画像を使用して、各メニュー項目の横に画像を表示できます。

CSSベースのアプローチ：

<style type="text/css" media="all"> 
ul li {display: inline; position: relative;} 

ul li ul {display: none; } 

ul li:hover ul {display: block; position: absolute; top: 0; left: 0; } 

ul li ul li {padding-left: 10px; background: #fff url(path-to-image.png) top left no-repeat; } 
</style> 

<ul> 
<li>First item</li> 
<li>Second item 
    <ul> 
     <li>Sub-level one</li> 
     <li>Sub-level two</li> 
    </ul></li> 
<li>Third item</li> 
</ul> 

（X）HTMLベースのアプローチ：

<style>... /* will still need to be styled according to your theme */ ...</style> 

<ul> 
<li><img src="menu-icon-1.png" alt="menu-icon" />First item</li> 
<li><img src="menu-icon-2.png" alt="menu-icon" />Second item 
    <ul> 
     <li><img src="menu-icon-2-1.png" alt="menu-icon" />Sub-level one</li> 
     <li><img src="menu-icon-2-2.png" alt="menu-icon" />Sub-level two</li> 
    </ul></li> 
<li><img src="menu-icon-3.png" alt="menu-icon" />Third item</li> 
</ul> 

あなたがそれらに関連付けられた一意のアイコン/画像を持っているメニュー項目をしたい場合は、あなたがしたいです（x）htmlに特定のidを使用する必要があります。したがって、他の方法を優先して1つの方法を使用すると特に便利ではありません。

Answer 5

IE6のサポートについて： ie7-jsをご覧ください。これは、以下を使用するなど、後方互換性に関する多くの問題に役立ちます。私はそれがイネボンによって提示されたCSSソリューションで動作することを確認しました。

編集：このスクリプトの良い点は、IE5.5とIE6（そして最新バージョンを使用している場合はIE7）によってのみ使用されることです。最新のバージョンでは、ページをレンダリングするときにIE7がIE8のように動作し、シンプルで優れたHTML/CSSを簡単に作成できます。