[CrazyLexx]

Hallo zusammen,

möchte für meine Webseite ein neues Navigation Menü einbauen. Dabei möchte ich eine Horizontale Leiste mit den groben Menüpunkten haben, die beim berühren mit der Maus zu einem Roll-Out-Menü expandieren. Habe mich im Netz bereits nach entsprechendem Code umgesehen und dabei zwei Elemente gefunden:

Einmal die horizonatale Menüleiste mit schönem 3D Effekt:
Menüleiste

und dann das Roll-Out Menü:
Roll-Out Menü

Kann mir vielleicht jemand dabei helfen, das Roll-Out Menü mit dem Aussehen der ersten Menüleiste zu kombinieren? Wäre super :-)

Danke,
TOM

[dblay]

Hallo

An sich musst du doch nur die Hintergrundfarben des zweiten Menüs durch die Grafiken aus dem ersten Menü ersetzen, dann sollte das funktionieren. Wenn da bspw. steht, "background:#xxx", dann schreibst du halt "background:url(path/to/img)" rein.

Musst mal sehen, wie damit weiterkommst, sonst kannst du ja auch nochmal den Code posten, bei dem du nicht weiterkommst.

[CrazyLexx]

Danke soweit, werde das morgen direkt mal ausprobieren und mich bei Problemen dann nochmal melden

Habe aber noch eine allgemeine Frage zu diesen Navi-Menüs:
Wenn ich auf einen der Menüpunkte klicke, wird ja zu der entsprechende Seite gesprungen und der angeklickte Menüpunkt soll darauf hin auch farblich hervorgehoben werden. Wenn ich also z.B. in der Menüleiste auf "Menüpunkt X" klicke, bekomme ich "Seite X" angezeigt und der Menüpunkt bleibt dann farblich gekennzeichnet (weil man sich ja quasi in den entsprechenden Unterseiten aufhält).

Wie sieht es jetzt aber aus, wenn ich von irgendeiner Seite in eine anderen Subkategorie verlinke? Wie wird dann der entsprechende Menüpunkt farblich gekennzeichnet? Wenn ich mich also in den Unterseiten von "Menü X" befinde und von dort durch einen im Dokument eingebundenen Link auf eine Seite springe, die eigentlich in "Menü Y" wäre, wie bekomme ich dann den Menüpunkt Y im Navi-Menü hervorgehoben?

Da ich bei mir den jeweiligen Content durch php einfüge, kann ich ja nicht auf jeder entsprechenden Seite von Hand den Befehl setzen, um den passenden Menüpunkt im Menü hervorzuheben...

[dblay]

Na klar, wenn du php benutzt, kannst du doch auf jeder Seite eine Variable definieren, die bestimmt, zu welchem Menü-Punkt sie gehört. Dann lässt du php das entsprechend markieren, z.B. mit class="active" oder so. Musst du dir dann eben definieren.

[CrazyLexx]

Und noch eine Frage:
Möchte gerne auf das Blockmenü eine zusätzliche Grafik legen. Kann ich die Grafik irgendwie direkt über den CSS Teil vor die Menüeinträge einfügen?

[dblay]

Was meinst du jetzt genau mit "Blockmenü"? Also zwei Hintergrundbilder geht prinzipiell erstmal nicht, falls du das willst, aber wenn du sowas baust wie:

<ul id="menu">
   <li>Eintrag 1</li>
   <li>Eintrag 2</li>
   <!-- usw. -->
</ul>

Dann kannst du natürlich dem <ul> ein Hintergrundbild zuweisen, und den einzelnen <li>s auch. Wenn dir das nicht hilft, machst du am besten mal ne Skizze von dem, was du dir vorstellst.

[CrazyLexx]

Zitat (dblay: 02.08.2007, 14:22)

Was meinst du jetzt genau mit "Blockmenü"? Also zwei Hintergrundbilder geht prinzipiell erstmal nicht, falls du das willst, aber wenn du sowas baust wie:

<ul id="menu">
   <li>Eintrag 1</li>
   <li>Eintrag 2</li>
   <!-- usw. -->
</ul>

Dann kannst du natürlich dem <ul> ein Hintergrundbild zuweisen, und den einzelnen <li>s auch. Wenn dir das nicht hilft, machst du am besten mal ne Skizze von dem, was du dir vorstellst.

Sorry, wenn ich mich undeutlich ausgedrückt habe. Versuche es einfach nochmal:

Habe erfolgreich die beiden Menü aus dem ersten Posting zusammengefügt und habe nun eine schwarzes Menüleiste (mit einem gif Hintergrund) mit DropDown Menüs für die einzelnen Menüpunkte. Möchte nun links neben den ersten Menüpunkt auf die eigentliche Menüleiste noch eine Grafik einfügen (einen Pfeil, der auf die Menüpunkt zeigt).

In meiner CSS Datei habe ich dem Navigationsmenü ja bereits ein Hintergrundbild zugeordnet und in der eigentlichen HTML Datei erstelle ich dann die einzelnen Menüpunkte mit <ul> und <li>. Wenn ich dann dort einen zusätzlichen <li> Befehl einsetze, überschreibt der dann nicht die Hintergrunddatei aus dem CSS oder wird der dann nur für einen <li> Eintrag angezeigt?

Mit welchem Befehl kann ich denn genau einen zusätzlichen Hintergrund einbauen? Sonst habe ich ja in den <li> Zellen des Menüs immer einen Link eingebaut...

[CrazyLexx]

Du meinst also quasi so wie im folgenden Codebeispiel?

<img src="beispiel.gif" alt="Pfeillogo">
<ul id="menu">
   <li>Eintrag 1</li>
   <li>Eintrag 2</li>
   <!-- usw. -->
</ul>

Kann ich eigentlich die Grafik irgendwie so fixiern, dass sie sich auf alle Fälle bündig an die Hintergrundgrafik des Navigationsmenüs ansetzt?

EDIT: Wenn ich es so mache, wie oben in dem Codebeispiel zu lesen, wird die Grafik immer über die Navigationsleiste eingefügt und nicht daneben... Was habe ich da falsch gemacht?

Dieser Beitrag wurde von CrazyLexx bearbeitet: 03. August 2007 - 21:07

[dblay]

Spontan würde ich mal sagen müsste das so aussehen:

<ul id="menu">
   <li><img src="beispiel.gif" alt="Pfeillogo" />Eintrag 1</li>
   <li><img src="beispiel.gif" alt="Pfeillogo" />Eintrag 2</li>
   <!-- usw. -->
</ul>

[dblay]

@scy89: Stimmt, das hab ich falsch verstanden. Danke für den Hinweis!

@CrazyLexx: Wie scy89 schon sagt, musst du das per css-Eigenschaft "float" lösen. <ul> ist ein Blockelement und nimmt somit folglich eine neue Zeile ein.

Das Ganze muss dann so aussehen:

<img src="beispiel.gif" alt="Pfeillogo" style="float:left; margin:0;" />
<ul id="menu" style="float:right; margin:0;">
   <li>Eintrag 1</li>
   <li>Eintrag 2</li>
   <!-- usw. -->
</ul>

Ich denke mal, dass du beide Elemente floaten musst, weil ansonsten der Rahmen vom <ul> das Bild umschließt. Einfach mal ausprobieren, ansonsten nimmst du einfach die Style-Angabe aus den <ul>-Tag raus.

[CrazyLexx]

Danke für eure Antworten. Habe es in der Zwischenzeit mit folgendem Code probiert und zumindest auf dem IE7 das gewünschte Resultat bekommen:

<ul id="menu">
   <li><img src="beispiel.gif" hspace="0" align="left"></li>
   <li>Eintrag 1</li>
   <li>Eintrag 2</li>
   <!-- usw. -->
</ul>

[dblay]

Hi CrazyLexx!

Nachdem ich mir jetzt (wegen deiner anderen Frage) den Quelltext von dem Menü mal genauer angesehen hab ... also ich weiß echt nicht, ob das Teil so optimal ist ... musst du ja wissen, aber sonst - wenn du nichts gegen JavaScript hast - könnte ich dir auch das Script von dem Menü meiner HP geben, das ist meiner Meinung nach weitaus übersichtlicher (vom Quelltext her) und funktioniert auch ohne elendige Conditional Comments oder CSS-Hacks. Gut, ist nicht mit Listenelementen, sondern ne "div-Suppe", das geb ich ja zu, bloß die Dinger lassen sich zuverlässiger per CSS formatieren.

Also wenn du Lust hast, das mal auszuprobieren, sag einfach Bescheid.

Edit: Link zur HP

Dieser Beitrag wurde von dblay bearbeitet: 06. August 2007 - 08:00

[Witi]

Wobei hspace nur in den transitional doctype existiert.

@dblay

Zitat

sondern ne "div-Suppe"

Und genau so macht man eben keine Menüs, da die Verwendung von missbrauchten div-Tags einfach nicht semantisch ist.

Der Ansatz von Listen ist schon korrekt und sollte weiter verfolgt werden.