Suche konkrete Menüeffekte

[simon1101]

Hallo,

ich bin auf der Suche nach einem Tutorial bzw. einer jQuery Funktion(en), mit der ich nachfolgende Menüeffekte erzielen kann. Ich arbeite gerade an einer HP die nur aus einer vertikalen Seite besteht und benötige deshalb die nun vorgestellten Funktionen:
1. Wenn ich im Menü einen Menüpunkt anklicke und die Seite zu einem Anker scrollt (smooth scroll), soll der dann aktive Menüpunkt andersfarbig angezeigt werden. Wenn möglich nicht schlagartig, sondern die Farbe soll mit Übergang wechseln.
2. Der Effekt soll erst kurz bevor der Anker erreicht wird eingeleitet werden.
3. Ich habe ein Menü, das bei Aufruf der Seite in einem Fließtext hervorgehoben ist. Wenn man nun einen Menüpunkt anklickt oder nach unten scrollt, soll von oben ein neues Menü eingeblendet werden, dass dann immer fix stehen bleibt. In diesem sollen 1. & 2. eingebaut werden.

So wie in diesem Beispiel: http://fivethirtybrew.com.

Gibt es für diese Effekte konkrete Tutorials etc?

Gruß
Simon

 

[simon1101]

AW: Suche konkrete Menüeffekte

Hat den niemand eine Idee? Oder kann mir jemand einen Tipp geben wo/wie ich suchen könnte?

Habe schon nach vielen Stichworten gesucht, bis jetzt leider ohne Erfolg...

 

[mindraper]

AW: Suche konkrete Menüeffekte

hi.

hm... ich wage doch arg zu bezweifeln, dass du eine function / ein plugin / sonstiges finden wirst, dass alle deine ansprüche erfüllen kann.

selber coden ist angesagt.

 

[simon1101]

AW: Suche konkrete Menüeffekte

Ich brauche ja kein Plugin, dass alles kann. Wenn jemand eine Idee hat, wo ich Tutorials für die einzelnen Funktionen finde, kann ich mir etwas basteln.

Am wichtigsten ist mir zur Zeit ein Tutorial zu finden, wie ich es anstellen kann, dass der angeklickte Menüpunkt aktiv bleibt, also in einer anderen Farbe als die anderen angezeigt wird.
Wenn ich dann noch einen Hinweis auf das langsame Ändern der Farbe beim Hover bekomme, bin ich schon super zufrieden

 

[mindraper]

AW: Suche konkrete Menüeffekte

hi.

weis' dem punkt nach dem klick eine neue klasse o.ä. zu:

var menuLinks = $( '.deineLinkKlasse' );

function addNewClassIfClicked( e ){
   var target = $( e.target || e.srcElement );
   menuLinks.removeClass( 'klasseVonAktivenLinks' );
   target.addClass( 'klasseVonAktivenLinks' );
};

menuLinks.bind( 'click', addNewClassIfClicked );

du notierst im css einmal die 'deineLinkKlasse' und gibst ihr alle notwendigen formatierungen für die normale darstellung. dann notierst du eine 'klasseVonAktivenLinks', denen du formatierungen gibst für die – wer hätte es gedacht – aktiven links.

in diesem fall wohl ca. so:

.normalLinks {
color: #000000;
}

.activeLinks {
color: #cc0000 !important;
}

hoffe das hilft.