Funktionen in CSS Menü

Ihr lieben,
normalerweise kenne ich CSS Menüs nur mit einfachen Links,
also nicht mit Suchfunktion drin, evtl. Bildern oderso.

Ich habe hier mal ein paar Fragen zur Erweiterung eines gewöhnlichen CSS Menüs.

Ich habe hierzu mal in der Forensoftware vBulletin geschaut,
die teilweise Funktionen beinhaltet, die ich in mein Menü einbauen muss.

Nur verwendet vBulletin ein JavaScript Menü. JavaScript möchte ich wenn irgendwie möglich vermeiden, daher ist meine Frage, ob sich sowas mit CSS Menüs machen lässt.

Ich habe hierzu immer mal ein paar Screens vom vBulletin Menü gepostet.
Damit keine Verwunderungen auftreten:
Ich verwende für diese Tests die Legale Admin Demo von vBulletin-Germany:
vbulletin-germany.com/admindemo.php
(Nur damit das jedem klar ist :smiley: )

Suchfunktionen im CSS Menü
Meine erste Frage ist, wie ich eine Suchfunktion, wie z.B. die von phpBB3 in ein CSS Menü bekomme.
Die Suche ist so eine, wie ihr z.B. hier ganz unten beim Footer findet:
viewforum.php?f=9

Bei vBulletin sieht das so aus:
[attachment=1]vb_suche.png[/attachment]

Natürlich muss das nicht so ausgeschmückt sein,
ich will ja auch keine 1:1 kopie.
Ein einfacher Balken, wo man was eingeben kann und darunter ein Button “Suchen” reichen völlig aus.

Überschriften für Links
Hier ist der größte Teil im Screen beschrieben.

Ich möchte praktisch ein paar Überschriften für die Links in meinem CSS Menü,
um diese besser Ordnen zu können und um ein langes, großes CSS Menü dennoch
übersichtlich zu halten.

[attachment=0]berschriften.png[/attachment]

CSS Menü erst nach klick aufklappen
In meiner letzten Frage zu CSS Menüs möchte ich wissen,
ob es möglich ist CSS Menüs erst nach einem Klick aufzuklappen,
am Idealsten wäre es wie im vB, dass immer diese Pfeile hat,
wenn es Untermenüs gibt.
Das CSS Menü sollte nicht einfach aufklappen, wenn man mit der Maus drüber fährt,
sondern erst dann, wenn man einmal draufgeklickt hat.

Hoffe ihr versteht meine Fragen.
Würde mich über Antworten freuen, aber lasst euch ruhig Zeit,
ist ja einiges, was ich wissen möchte :wink: :wink:

Danke schonmal!

Liebe Grüße
Jan

also das ganze sollte mit css kein problem darstellen, außer dass es evtl. im IE nicht dargestellt wird :p (wie immer)
das mit den zwischenüberschriften sollte auch gehen
das mit dem klicken und öffnen denk ich geht allerdings nur mit der javascript methode onklick

[quote=„comjag“]also das ganze sollte mit css kein problem darstellen, außer dass es evtl. im IE nicht dargestellt wird :p (wie immer)
das mit den zwischenüberschriften sollte auch gehen
das mit dem klicken und öffnen denk ich geht allerdings nur mit der javascript methode onklick[/quote]

Ich denke eine „Mischung“ ist auch kein Problem, also praktisch ein Schalter.

Ich denke immer so (k.A. obs richtig gedacht oder falsch gedacht ist):
Solange JavaScript nicht die einzie Variante ist, isses ok.

Das bedeutet:
Wer JS aktiviert hat, der kann diese OnClick Funktion nutzen,
hat also noch ein paar bessere Möglichkeiten.
Wer kein JS aktiviert hat kann das Menü aber dennoch nutzen.

Das Menü darf halt eben nicht nur aus JS bestehen, sodass man ohne JS nicht navigieren könnte. Wenn JS aber noch ne Zusatzfunktion ist, auf die man verzichten kann,
dann isses sicher kein Problem.

Wie mach ich das mit dem Einbinden da?
Bisher hatte ich immer irgendwelche Darstellungsfehler.

Liebe Grüße
Jan

ich probier morgen mal etwas

In CSS täte man das eher beim Drüberfahren aufklappen, nicht
mit klickern. Das wäre dann eine typische Anwendung für das
Pseudoformat :hover.

Mischen von js und CSS ist immer dann besonders schlecht, wenn
die Funktion oder der Inhalt nicht mehr zugänglich ist, wenn
mindestens eines von beiden deaktiviert ist. Der Nutzer kann ja
auch einfach zu einer eigenen CSS-Stilvorlage wechseln.
Deswegen sollte man das immer so gestalten, daß der Kram
ohne CSS und js sinnvoll strukturiert ist, zugänglich und voll
funktionsfähig, was bei einem Menü sicherlich besonders wichtig
ist, weil man sonst das komplette Projekt in die Tonne treten kann.

Mit Anklickern wäre das eher eine PHP-Anwendung. Da übergibt
man dann mit einem Verweis einen GET-Parameter, der
ausgewertet wird. Die Seite wird dann komplett neu aufgebaut,
diesmal eben mit dem zusätzlichen Inhalt. Funktioniert auch
mit einer komplett ‘nackten’ (X)HTML-Ausgabe ohne Dekoration,
was diesen Ansatz sehr reizvoll macht. Habe ich so schon am
Anfang dieses Jahrtausends bei einem meiner Projekte erstmals
angewendet.

Man könnte aber problemlos einen Javascript-Work-Around machen. D.h. man programmiert alles so wie ohne JS und ändert dann mit JS die Werte so ab, dass sie für die JS-Version geeignet sind :wink:

Klar, das ist bei CSS und js immer die sinnvolle Strategie.
Nachdem ohne bereits alles funktioniert, kann man damit
dann die Dekoration ergänzen oder die Ergonomie für einige
Leute verbessern/verändern.
Leider fangen viele Leute falsch herum an und basteln etwas
zusammen, indem sie verschiedene Formate wild mischen,
wonach man dann nachher feststellt, daß der Kram gar nicht
funktioniert, wenn man eines davon nicht verfügbar hat.
Ich habe da auch schon Konstruktionen gesehen, wo mit CSS
etwas unsichtbar gemacht wurde und dann später gegebenenfalls
mit js vielleicht wieder sichtbar. Da stimmt einfach die Logik
nicht.

So ist es aber ja garnicht gedacht.

Das CSS Menü ist ja fertig,
da dieses aufklappen, wenn man drüberfährt aber sehr nervig werden kann sollte dieser JavaScript Zusatz noch mit rein.

Liebe Grüße
Jan