[GastForen Web allgemein HTML und CSS / Stylesheets Menü mit Untermenü, vertikal direkt untereinander

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Menü mit Untermenü, vertikal direkt untereinander

matmax
Beiträge gesamt: 626

30. Jan 2007, 18:28
Beitrag # 1 von 6
Bewertung:
(19041 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo!
Ich habe eine Website erstellt mit CSS und habe ein Menü auf der linken Seite, eine Liste die rechtsbündig ist. Jetzt will ich einigen Menüpunkten ein Untermenü zuweisen, welches direkt unter dem Hauptmenü erscheint, mit der halben Zeilenhöhe wie das Hauptmenü und evtl. kleinerer Schriftgröße. Die anderen Hauptmenüpunkte, sollen dann entsprechend nach unten rutschen (müssen im Grundlinienraster bleiben!). Alles ohne Klimbim. Jedoch schon bei Mouseover.

Kann ich das irgendwie mit CSS machen oder brauche ich JavaScript? (davor habe ich Angst …). Oder löse ich es durch ein div das ich an der entsprechenden Stelle platziere, aber rutscht dann der Text auch runter?

Vielleicht kann mir jemand helfen, ich weiß nicht wie ich das anpacken soll, dass es möglichst simpel ist. JavaScript ist so kompliziert und nicht barrierefrei.

Danke und viele Grüße,
matmax
X

Menü mit Untermenü, vertikal direkt untereinander

SabineP
Beiträge gesamt: 7586

30. Jan 2007, 19:27
Beitrag # 2 von 6
Beitrag ID: #273433
Bewertung:
(19035 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallomatmax,

ohne Javascript geht es nicht.

Schau Dir mal dieses Menü an:
http://tutorials.alsacreations.com/modelesmenus/vd1.htm

onclick durch onmouseover ersetzen,
und schon öffnet sich das Menü bei Mausberührung anstatt bei Mausklick.

Es ist auch barrierefrei, da ohne Javascript alle Menüs geöffnet sind.

Gruß Sabine


als Antwort auf: [#273429]

Menü mit Untermenü, vertikal direkt untereinander

matmax
Beiträge gesamt: 626

31. Jan 2007, 13:30
Beitrag # 3 von 6
Beitrag ID: #273568
Bewertung:
(19013 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Dankeschön!
Ich habe jetzt auch noch etwas herausgefunden:
Man könnte es mit einer verschachtelten Liste machen und dann li ul {display: none;} und li:hover ul {display: block}
Allerdings versteht das der IE nicht und deshalb muss man für den ein JavaScript anbieten oder es immer sichtbar lassen.


als Antwort auf: [#273433]

Menü mit Untermenü, vertikal direkt untereinander

Bernhard Werner
Beiträge gesamt: 5107

31. Jan 2007, 13:48
Beitrag # 4 von 6
Beitrag ID: #273577
Bewertung:
(19006 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

habe kürzlich in einer anderen Sache folgendes gelesen:

"Im Internet Explorer erfordert dies zusätzlich die Änderung einer Linkeigenschaft. Für den IE 5.5 und 6 würde bereits ein Wechsel der Hintergrundfarbe, sogar von white auf #fff, oder die hier verwendete (unsinnige) Angabe a:hover {border:0;} ausreichen. Der IE 5.01 benötigt leider eine theoretisch sichtbare Änderung, wie sie oben zusätzlich notiert ist (Ausgleich evtl. auch über background-position:top 1px)." (Quelle: http://www.1ngo.de/web/bildwechsel.html)

Vielleicht hilft das ja.

Gruß
Bernhard


als Antwort auf: [#273568]

Menü mit Untermenü, vertikal direkt untereinander

FSt
  
Beiträge gesamt: 1961

31. Jan 2007, 13:55
Beitrag # 5 von 6
Beitrag ID: #273580
Bewertung:
(19002 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo matmax

Schau Dir mal die Navigation unter http://www.juliana-nufer.ch http://www.qs-engineering.ch/ an.
Habs noch nicht probiert, aber kann man da nicht einfach etwas abändern?

Vorsicht bei CSS, das per hover neue Zeilen einblendet. Es kann passieren, dass sich ein Flipper-Effekt einstellt!

Gruss
Martin


als Antwort auf: [#273568]
(Dieser Beitrag wurde von FSt am 30. Okt 2009, 09:14 geändert)

Menü mit Untermenü, vertikal direkt untereinander

minou
Beiträge gesamt: 135

31. Jan 2007, 17:16
Beitrag # 6 von 6
Beitrag ID: #273658
Bewertung:
(18991 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hallo matmax,

ich habe mir mal ein Menü aus dem Buch XHTML und CSS abgeschrieben, das speziell für den Hoover Effekt im IE auch geht. Aber auch dieses Menü braucht ein wenig javascript...

Sieh dir das Menü doch mal an unter (ist aber nicht untereinander, sondern die Childs erscheinen beim hoovern auf einen Partent Eintrag leicht rechts darunter. Siehs dir einfach an... :-) )

http://spaltstaetten.ch

Du kannst dir ja im Menübereich den Quellcode ausgeben lassen und mal für dich kopieren.
Wenn du möchtest kannst du von diesem ausgehend ein eigenes Menü mit anderen Abständen und Daten schreiben.

Hoffentlich nutzt es dir etwas, schöne Grüsse

Minou


als Antwort auf: [#273429]
X

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/