Navigation

Aphex

New member
Hallo!

Zuerst einmal ein "HALLO" in die Runde. Ich bin neu hier.

Ich habe ein kleines Prob. Vor einiger Zeit habe ich eine Website mit einer waagerechten Navi gesehen, die ich in der Art noch nie gesehen hatte und von der ich sehr angetan war. Leider sind meine bookmarks samt seite verschwunden.

Ich weiß noch nicht einmal ob die navi wirklich mit js gemacht wurde (oder mit flash?).

Ich versuche es mal zu beschreiben auch wenns schwer ist.

Also die navi besteht aus zwei waagerechten "linien", dazwischen stehen die jeweiligen Stichworte (Home, bla, bla, Kontakt usw). Geht man mit der Mouse auf oder über die navi macht sich die markierte Stelle durch Änderung der Farbe und Größe bemerkbar. Okay das an sich ist noch kein Grund das hier zu schreiben :)

Sobald man aber mit der Mouse "rauf" geht, folgt der Mouse auf den beiden Linie - ich nenne sie mal Schienenstrang - eine Art rechteck. Es folgt immer der mouse und federt ihr auch nach (schwingt nach recht, dann nach links und federt aus). Farblich ist dieses Rechteck (eher eine Markierung) natürlich auch vom Rest abgehoben. Insbesamt ein verblüffenden und toller Effekt.

Hat jemand soetwas schon mal gesehen und wenn ja wo?
Mit welchen Programmiersprache lässt sich sowas umsetzen, js?

Bin für alle Ideen dankbar. Ich würde diese Art Navi gerne nachbauen.


Grüße Aphex
 
Danke. Gut hätten wir das geklärt, ist also Flash.

Nur blöd das ich keinen Plan von Flash habe....


PS: Ja sowas suche ich jetzt ;)
 
Hi!
Also, ich hatte da nen anderen Plan. Und das müßte auch mit javascript funktionieren!:
Bei mouseover über homesymbol wird ein Mausverfolger vom Typ eingeblendet:
http://www.hans-joachimfitting.de/Foto_ie.htm
Bei mouseover über dem nächsten Symbol wird der nächste Mausverfolger (identisch bis aufs Foto), eingeblendet usw. Beim Verlassen des Symbols werden die Mausverfolger ausgeblendet.

Folgendes habe ich nicht hinbekommen:
1. Ich weiß nicht, wie (ob?) man Mausverfolger ein - und ausblenden kann?
2. Die Mausverfolger Quelltexte müßten so modifiziert werden, daß nur eine horizontale Bewegung stattfindet, evtl noch nach links versetzt.
3. Ich weiß nicht, wie man (ob man überhaupt) mehrere Mausverfolger gleichzeitig auf einer Seite haben kann.

Ich denke aber, javascriptprofis können hier weiterhelfen!

lg joachim
 
mausepositionen kann man mit clientX oder clientY bestimmen, gibt aber noch einige mehr, ließt du am besten in self-html nach.
aber frag das mal in einem andern topic, bitte wenn du mehr wissen willst.
 
Hi,

das probier ich mal auszuflashen, ne schöne Übung.

(edit: warte nicht, bis ich das fertig hab, wenn du das woanders kriegen kannst. Bin erst am lernen. So'n Menü kann ich ja schon, aber das mit dem scroller auf der Linie noch nicht :)
 
Zuletzt bearbeitet:
Hi Zusammen,

hab fertig geübt.
Ist zwar zu groß und die Dynamik des sich bewegenden Quadrates gefällt mir noch nicht. Als Form wären wohl zwei dicht nebeneinander stehende Dreiecke <> besser gewesen. Aber ich bin froh, es wenigstens ohne abgucken soweit geschafft zu haben.
Bin mir auch nicht sicher, ob ich bei der Erstellung den einfachsten Weg gegangen bin.
Sicher hast du schon längst was runtergeladen. Trotzdem schau es dir mal an, ob es ungefähr deinen Vorstellungen entspricht.
Die Links sind nicht verlinkt. Ist ja nur mal ne Probe.

Kommentar erwünscht.

menue
 
naja wie du schon sagst die dynamik ist noch echt rah, aber nicht unbedingt schlecht, wenn der punkt noch wenn er zurück flipt etwas nach wackelt ist wer das doch ne super navi, den punkt (quadrat) noch als pfeil und supi da :)!!!

hab mir auch mal erlaubt schnell was zubasteln, mit na kleinen komponente, ne priese rewind effekt, und zwei abfragen der xpos, kann man in 10 min ein schicke navi zaubern, noch 10 min mehr zum verfeinern und die sieht noch schicker aus, für die hat ich aber keine zeit :).

slide
 
10 Minuten???????? Ich hab Stunden gebraucht. Na ja, aller Anfang ist schwer.

Deins sieht super aus :)
 
Hi!
Ist schon interessant! Eine Vorgabe! Und vier ganz unterschiedliche Vorstellungen dazu! Da hat wohl jeder seinen spezifischen Blickwinkel.
Mein js - Beispiel finde ich gut, für nicht private hp müßte man es allerdings ein klein wenig dezenter modifizieren. Aber hier geht es ja ums Anschauen.
Besser als mein Beispiel finde ich bines menue, das hat was!!! (Ich denke, das kann man auch mit js bauen, aber auf so ein Lösungsbild muß man erst mal kommen.) Gut gemacht!!!
Ja und noch besser finde ich womstars slide! Der ist halt ein Profi!

So, hier noch ne kleine Verbesserung meines Beispiels. Dazu bitte Vollbildmodus einschalten und ein bißchen rumspielen mit der Seitengröße. Ist noch nicht optimal, aber zur Veranschaulichung langts ja. (An der y- Position der Mausverfolger müßte man noch was tun, die Elastizität habe ich mir schöner vorgestellt. Sicher kann man diese Sachen auch noch verbessern.):
http://www.hans-joachimfitting.de/mausraus2_ie.htm

lg joachim
 
Moin,

@hjf: Find ich nicht schlecht, dein Menü. Allerdings sind die Farben nur mit schwarzweiß-Brille zu ertragen. Aber das sind wir ja von dir gewöhnt. :D

Vielleicht sollte man sich nur auf einen Effekt beschränken. Das Verfolgerbild ist viel zu groß und nur der untere Teil ist sichtbar.

Eben Geschmackssache und da gelten für mich folgende Kriterien (die ich gern mir selbst vorgebe, jedoch mangels Können nicht immer erfülle)
Von Dezent bis Edel, Qualitativ hochwertig, Funktion, Information, Klarheit, Sachlichkeit, Augenfreundlichkeit, Harmonie und Originell doch trotzdem im Trend.

Allerdings finde ich eine gute Portion von think-, look- und feelgeek auch klasse.
 
Witzig (oder doch eher schade?) zu sehen, wie Ihr Euch alle abmüht, ihm da schnell mal so etwas zu basteln (zu zeigen), er sich aber überhaupt nicht mehr gemeldet hat!

Hut ab vor Euch allen! :) Ich kann das alles nicht, weder in Stunden geschweige denn Minuten ... :D
 
Moin! Moin!

Zu meinem Beispiel:
... ... ... einen Mausverfolger zum ein- und ausblenden in meine hp eingebaut. Dazu hatte ich ein Bild, das ich ein- und ausblenden konnte, in meine hp eingebaut. Dann bin ich hingegangen und habe im Quelltext der Seite die Bildadresse durch den Quelltext des Mausverfolgers ersetzt (mußte allerdings noch bißchen rumspielen). Jetzt ist anstatt dem Bild der Mausverfolger auf meiner Seite. Dieser hat aber alle Ereignisse (aus - und einblenden) wie vorher das Bild ... ... ...

Hi Nonens!
Da hast Du recht, Aphex könnte sich ruhig mal melden!
Danke für´s Kompliment! Mit dem Abmühen ist es aber nicht so schlimm, hab dabei auch ´ne ganze Menge gelernt, was ich auch selbst wissen will. Vor `ner Woche konnte ich auch einiges noch nicht, aber wenn man sich mal an ein Thema dranmacht, merkt man oft, das es gar nicht so schwierig ist. Und dann kann man sich ja auch noch hier helfen lassen!

Hi Bine!
Erstmal danke für Lob und Kritik! Hab oft ´ne rosarote Brille auf, da sieht alles viel besser aus.
Das Verfolgerbild kannst Du ganz sehen, wenn Du oben die Explorerleiste? verkleinerst. Hab noch ein Problem mit derr y - Positionierung der Mausverfolger. Ich denke aber, das ist lösbar (Mein Problem ist folgendes: Ich kann kein html, javascript, ... ... ... und mein Programm kann keine Mausverfolger.)

lg joachim
 
Hi Nonsens,

egal ober er sich meldet. für mich war es eine gute Lernanregung, die ich durchaus nicht uneigennützig aufgegriffen habe, wie Vieles hier im Forum. Und es gibt auch immer Andere, die sich das Alles ansehen und ebenfalls von den Inhalten profitieren.
 
Zurück
Oben