Hallo ich hätte mal eine Frage,
und zwar wie kann man so ein Menü machen http://www.marvinworld.de?
Bedanke mich jetzt schon mal für jede Hilfe.
Was davon meinst du jetzt genau?
Das Aufklappen unter ‘Verschiedenes’?
Das erreicht man z.B. indem man verschachtelte Listen nimmt
und die Unterlisten erst ausblendet (display:none) und beim
rüberfahren über den übergeordneten Menüpunkt wieder
anzeigen läßt (:hover und display:block).
Zudem kann es bei der Anordnung auch noch förderlich sein,
den übergeordneten Menüpunkt relativ zu positionieren und die
Unterliste darin absolut.
Bei dem Teil darunter hat man wohl einer Liste eine feste
Breite gegeben und dem übergeordneten Element ebenso und
dort overflow:auto angegeben. Dann hat man offenbar die
Listenpunkte nebeneinander angeordnet. Das hat dann zur Folge,
daß ein horizontaler Rollbalken erscheint.
Details kann man aber auch einfach dem Quelltext entnehmen.
Letzteres wird da offenbar Fragmentidentifizierern oder Klassen
wie ‘carousel’, ‘carousel-inside’ und ‘infinite’ zugeordnet.
Ersteres hat was mit ‘navigation’, ‘sf-menu’ und ‘children’ zu tun.
ne das habe ich schon lange rausgefunden. Ich würde gerne wissen wie man das so langsam ein und ausbleneden kann.
Bei mir blendet sich da nichts langsam ein oder aus.
Wenn sich da langsam was von einem zum anderen Zustand
verändert, ist das im Fachjargon ein Übergangseffekt
(englisch: transition).
Dafür gibt es einen Arbeitsentwurf für ein CSS3-Modul.
Kann man z.B. mit WebKit (Safari etc) nachvollziehen, ist aber
noch nicht für den normalen Einsatz gedacht, nur zum
ausprobieren, weil es sich nur um einen Arbeitsentwurf handelt.
Ein anderes CSS-Modul ist das zu Animation, ebenfalls erst ein
Arbeitsentwurf. Je nachdem, was da wann passieren soll, kann sich
das auch eignen. Dann gibt es auch noch Animation mit SMIL,
ist aber eher nur bei SVG-Dokumenten verfügbar, dort aber sehr
effektiv und einfach.
Eine andere Möglichkeit, einen ähnlichen Effekt zu simulieren,
ist eine diskrete Änderung in vielen Schritten per Skript
(java/ecma-script, kann den Prozessor schwer belasten),
sieht man dann aber allenfalls, wenn Skriptinterpretation aktiviert
ist.
Bei mir ist Skriptinterpretation nicht aktiviert.
hier guck dir das mal an.
http://baflugvideos.bplaced.net/demo.avi
sorry videos ist gelb was weiss ich wesshalb.
Einige von meinen Video-Abspielprogrammen mochten das
Video oder das codec darin nicht, bei einem ging es dann
schließlich.
Also das läßt sich mit allen von mir geschilderten Varianten
umsetzen.
Am einfachsten sicherlich wohl mit dem CSS-transitions.
Aber geraten würde ich aber mal tippen, daß dies hier java-script
ist, mit dem werden über das DOM CSS-Eigenschaften
manipuliert. Mit Ereignissen wie mouseover und mouseout etc
bekommt man da Anfang und Ende geliefert und ändert dann
die Eigenschaften schrittweise über das DOM.
Teiltransparenz war da glaube ich auch zu sehen, das spräche
auch für CSS3-Eigenschaften, aber das sehen viele Autoren nicht
so eng und basteln das auch in ihre normalen Stilvorlagen rein ;o)
Wenn du jetzt nicht gerade einen WebKit-browser verwendest,
sondern z.B. einen MSIE oder Opera oder Gecko (mag sein, daß
der das in den neuesten Versionen aber schon testweise drin hat),
so schließt deine Beobachtung CSS-transitions aus, wenn diese
bei deinem browser gar nicht implementiert sind.
Wenn du keinen MSIE verwendest, schließt sich auch die
Möglichkeit SMIL+HTML aus, weil das die anderen nicht
interpretieren. SVG ist es nicht, insofern entfällt das beim
konkreten Beispiel auch.
Ohne jetz unhöflich zu werden, darf ich um ein bsp. Fragen? Ich versteh das noch nicht ganz.
aber damit sie wissen worum es geht ich würde diese effekt gerne auf das menü anwenden.
http://baflugvideos.tk/ ich finde den anbieter den ich nutze nur suboptimal da er alles nur in einem frame anzeigt, weswegen ich bald zu bplaced umziehen werde. Aber das ist eine andere geschichte.
Also zu java-script kann ich nicht viel mehr sagen, weil ich das
selber nicht verwende, schon weil es bei meinen Voreinstellungen
am browser nicht funktioniert.
Könnte sich aber auch was finden lassen mit
Stichwortkombinationen von ‘javascript’, ‘fade’, ‘blur’ etc.
Der CSS-Arbeitsentwurf zu transitions ist hier zu finden:
w3.org/TR/css3-transitions/
Wenn man da von einem div der Klasse ‘Beispiel’ was
ändern will, kann man das etwa so machen:
div.Beispiel
{
background: blue;
color:red;
transition: all 2s;
}
div.Beispiel:hover
{
background: white;
color:#80a
}Entsprechend gibt man dann Anfangs- und Endzustand aller
Eigenschaften an, die sich ändern sollen.
Der Vorteil liegt eben darin, daß bei browsern, die das nicht
interpretieren, immer noch die diskrete Änderung per :hover
funktioniert.
Wenn man das jetzt mit einem bestimmten browser testen
will, der das bereits testweise (!) implementiert hat, muß man
vor die transition-Eigenschaft einen Präfix setzen, der für den
jeweiligen Anbieter sepzifisch ist. Für WebKit dann -webkit-, also:
-webkit-transition: all 2s;
Für Mozillas/Geckos wie Firefox ist das Präfix -moz-, für Opera ist
es -opera-
Und dann kann man das mit einer hinreichend aktuellen Version
testen (Apple-Safari, Arora, Google-Chrome für -webkit-).
Solche Effekte werden aktuell noch meistens mit JS umgesetzt. Die bessere Methode ist zwar CSS, allerdings ist das in der aktuellen Version noch nicht möglich.
Eine JS-Lösung lässt sich mit JQuery relativ leicht umsetzen. Schau dir dazu einfach die Beispiele auf der Webseite an.
