zweizeiliges Menü - wie (am besten)

orgonaut

orgonaut

Aktives Mitglied
Thread Starter
Dabei seit
09.08.2004
Beiträge
10.256
Reaktionspunkte
771
Hallo Profis!


Ich stehe gerade vor der Entscheidung wie ich ein 2-zeiliges Menü einer Homepage anlegen soll. Da ich noch nicht sooo viel Erfahrung im Webdesign habe will ich dazu erste Euren Rat einholen, bevor ich das Menü mehrfach "programmieren" muss.

In der 1. Zeile steht Hauptkategorien wie z. B.:

Code: 
Home  |  Äpfel  |  Birnen  |  usw…
Klickt man jetzt einen Überbegriff z. B. Äpfel an, dann soll die zweite Zeile mit den Unterkategorien erscheinen:

Code: 
Home  |  [b]Äpfel[/b]  |  Birnen  |  usw…
Rote  |  Gelbe  |  Grüne
Meine Frage ist nun soll ich nach dem Klicken auf den Überbegriff z. B. Äpfel eine neue Seite mit dem Untermenü laden, oder zeige ich nur die Unterkategorien als zweite klickbare Zeile an.

Ich würde am liebsten bei einem Klick auf eine Hauptkategorie wie z. B. Äpfel darunter die zweite Zeile mit den Unterkategorien wie z. B. rot einblenden, ohne eine neu Seite dafür zu laden.

Geht das mit CSS? (IE6 sollte damit auch zurecht kommen.)
Geht das auch ganz ohne JavaScript? (Das wäre schon recht wichtig.)

Noch was: (So leid es mir auch tut,) ich muss auf dieser Website die unterschiedlich langen Menüpunkte mit Grafiken (GIF) realisieren, da es eine spezielle Schrift sein muss.

Vielen Dank im Voraus für Eure Hilfe!!! :cool:
 
hallöchen :)

ich hab auch mal sowas mit PHP gemacht, so wie es auf der Apple-Seite ist. Also je nach dem welche Seite gerade aktiv ist das dazugehörige Menü anzeigen lassen. Mit CSS und PHP recht einfach, Javascript wird nicht benötigt. Im IE sollte es mit ein wenig Aufwand zu machen sein :)
Quelltext: http://macfuzzys.kilu.net/navi.inc

gruß vom Standard
 
Danke erstmal, aber PHP ist für mich ein spanisches Dorf und ich habe auch keine Ahnung ob und wie ich das erst einmal testen und dann auf den Server spielen kann. :(

Mir würde schon so etwas reichen wie hier im Forum die Submenüs (Aktive Themen etc.) eingeblendet werden. :D
 
Das ist dann aber Javascript. Nur mit CSS geht das nicht.

Matt
 
Was ich inzwischen herausgefunden habe, geht das schon. (Sorry, sollte ich mich irren.) Aber dann gibt's wieder massive Probleme mit IE und anderen veralteten Browsern.

So werde ich wohl doch für jeden Untermenüpunkt eine neue Seite laden müssen. :(

(Ausser natürlich, es gibt hier noch den einen oder anderen besonders schlauen Tipp!)
 
Damit hast du nur einen hover-Effekt für den eigentlichen Navigationspunkt. Danach hast du nicht gefragt. Du wolltest bei der Gelegenheit ja auch noch ein Zusatzmenü haben. Und das geht mit einem CSS nicht.

Matt
 
Das mit dem Zusatzmenue geht auch mit css. Hab grad leider keine Zeit es zu erklären, aber kuck mal auf www.hvb-bkk.de, dort ist es ohne Javascript (bzw. nur für IE) gelöst
 
Wieder was gelernt. Die fehlende Browserunterstützung dürfte dem ganzen aber derzeit noch einen Riegel vorschieben.

Matt
 
Danke. Das sieht ja alles schon ganz gut aus! Jetzt muss ich es nur noch verstehen. ;)

Wie gesagt, wichtig ist, dass es ohne JavaScript mit IE, FireFox, (Opera), und Safari funktioniert.
 
ohne js gehts im IE nicht, da er leider mit :hover für andere elemente als <a> nix anfangen kann.
 
pichfl schrieb:
ohne js gehts im IE nicht, da er leider mit :hover für andere elemente als <a> nix anfangen kann.
Zum Vergrößern anklicken....
Wie muss denn das JS für den IE aussehen, damit das CSS-Menü z. B. in FireFox und Safari auch ohne JS voll funktionsfähig ist?
 
ich hab vorhin einen link gepostet.

wenn du dir das zu gemüte führst, dürften alle Fragen geklärt sein.
 
Theoretisch müsste es auch ohne JS gehen, indem man A-Tags unglücklich ineinander verschachtelt. Würde ich aber nicht machen.

Neben der JS-Variante kann man dem IE auch per htc :hover für andere Elemente beibringen. Schön ist keine der Lösungen.
 
Danke nochmals an alle. Bei dem Link war ich mir einfach nicht sicher ob er auch genau das macht, sorry!
 
Hallo! Ich wieder… :)

Ich habe jetzt diese tolle Beschreibung gefunden, wie man mit CSS ein Menü mit Rollover-Grafiken macht.

Jetzt stehe ich allerdings vor einen neuen Herausforderung bei der ich eure Hilfe benötige!

Wie bringe ich mittels CSS einer Image-Map diesen Rollover-Effekt bei. Natürlich ohne JS. Es geht um ein Bild, das bei überfahren unterschiedlicher Koordinaten gegen immer andere Bilder getauscht werden soll.
 
pichfl schrieb:
ich hab sowas ähnliches vor ner ganzen weile auch in deutsch erklärt.
http://einserver.de/9-tutorial-css-hover-ohne-nachladen
Zum Vergrößern anklicken....
Danke für den Link, ist ein tolles Tutorial. :)

Im Augenblick löst es aber mein Problem vermutlich nicht.

Was ich bisher geschafft habe.
Wie bekomme ich die (rot markierten) Abstände zwischen den Grafik-Buttons weg? Und wie kann ich einen anderen festen Abstand zuweisen? (Auch der Abstand nach unten sollte nicht sein.)

Was die Image-Map betrifft, so habe ich mir gedacht, dass man statt
Code: 
a#link1 img …
einen Tag der Image-Map
Code: 
area#link1 (???)
nimmt. Bin ich da auf der richtigen Spur und wie kann ich da das Bild beim überfahren der Link-Area wechseln? kopfkratz
 
das problem sind die images.
wenn du die nimmst kannst du eigentlich problemlos bei tabellen bleiben.
hilfe trotzdem:
img{ margin:0; padding:0; vertical-align:bottom; }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten