Kann ein CSS-Menü dies tun?

Question

Ist es möglich, eine Drop-Down-Typ Menü-Navigation ohne Javascript zu machen mit und um ein Bild zu zeigen, jedes Einzelteil neben?

Auch würde Ich mag diese Arbeit mit einem Tisch machen, so dass, wenn Sie über eine Tabellenzelle bewegen, wäre es eine Liste von Links mit einem Symbol neben jedem einer Dropdown-Menü. Ich bin mir nicht sicher, ob dies auch ohne Javascript möglich ist.

Es ist etwas Ähnliches, was ich versuche, auf photobucket-Menü zu tun alt text http://img2.pict.com/f9/72/7f/1437912/0/640/screenshot2b9.png

Answer 1

Ist es möglich? Ja

empfiehlt es sich? Keine

Sie haben noch IE6 zu unterstützen und unter dem unterstützt nur den :hover Pseudo-Selektor auf <a>-Tags mit einem href Attribute. Bei jedem anderen Tag wird der Pseudo-Selektor :hover ignoriert. Für jeden anderen Browser haben Sie diese Einschränkung nicht.

Durch die Verwendung des <a> Tag, Sie geben sich selbst die folgenden Einschränkungen:

• keine Unter <a> Tags, was bedeutet, dass das Menü wird grundsätzlich zu einem Ort führen.
• keine Block-Level-Elemente innerhalb des <a>-Tag (die sich leicht um Elemente unter Verwendung display: block auf Inline gearbeitet werden kann. Dies bedeutet, dass keine <div> keine <table> noch eine andere block level elements.

In einer Welt ohne Internet Explorer 6 und unten, würde dies eher trivial zu tun. Aber wenn man bedenkt, dass ab Juli 2009 there is still 27.21% of the web using IE6, könnte man sie nicht aus schreiben wollen.

Answer 2

Sie ein Menü entwerfen können nur HTML und CSS. Aber zu behandeln alle Ereignisse [Tastatur und Maus] Sie haben JavaScript zu verwenden.

Answer 3

natürlich können Sie das. Listen nichts mehr als <li> Tags. Innerhalb eines <li> Tag, das Sie Kann was auch immer y setzen ou wollen:

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

und dann w/CSS

EDIT ah Ihre Menü-Effekt machen, ich sehe Sie nur Tabellen verwenden möchten. hätte besser nachlesen sollen. Wenn Sie nicht JavaScript (warum, ich weiß nicht) verwenden möchten, nein, nicht w/CSS und HTML, zumindest nicht Cross-Browser. Sie können es mit der Pseudoklasse :hover tun, die für jedes Element in modernen Browsern funktioniert, aber < IE6 wird nicht wissen, was damit zu tun ist. Sie sollten jedoch aufhören, IE6 sowieso zu unterstützen, also vielleicht bist du ok :)

Answer 4

Nun, ja. Wenn Sie sich die Quelle für die Seite ansehen, sehen Sie eine <ul>, die es funktioniert. Sie verwenden sicherlich JS - ich habe JS in Firefox deaktiviert und dann die Seite neu geladen, zu diesem Zeitpunkt funktionierte das Menü nicht mehr - aber ich bin nicht sicher, wie wichtig das für das Menü selbst ist.

Sie können ein Bild neben jedem Menüelement anzeigen, indem Sie entweder ein <img />-Tag im (x) html verwenden oder ein Hintergrundbild im CSS verwenden.

CSS-basierten Ansatz:

<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-basierte Ansatz:

<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> 

Wenn Sie die Menüpunkte wollen eindeutige Symbole haben/Bilder mit ihnen verbunden sind, dann würden Sie müssen spezifische id s in der (x) html verwenden, so ist es nicht besonders weniger oder mehr bequem, einen Ansatz zugunsten des anderen zu verwenden.

Answer 5

In Bezug auf die Unterstützung für IE6: Werfen Sie einen Blick auf ie7-js es hilft bei vielen Problemen mit der Abwärtskompatibilität, einschließlich der Verwendung von: Hover auf andere Elemente als a. Ich habe bestätigt, dass es mit der CSS-Lösung von reibowl funktioniert.

EDIT: Das gute an diesem Skript ist, dass es nur von IE5.5 und IE6 (und IE7, wenn Sie die neueste Version verwenden) verwendet wird. Die neueste Version macht IE7 beim Rendern einer Seite mehr wie IE8, was es einfacher macht, einfaches und gutes HTML/CSS zu schreiben.