Frage Mitgehendes Menü & erhellte Bilder...

[kristalljunge]

Hallo allerseits,
ich habe zwei Fragen, und um nicht sinnlos Themen zu spamen, mache ich einen Post.
Zu aller erst: Ich bin was die ganze HTML, CSS, Java, PHP & Co Geschichten noch relativ neu, also wär nett, wenn es "einfach" erklärt werden kann Danke schonmal.

Und zwar hätte ich gerne einerseits ein mitlaufendes Menü. Wie das Menü stehen bleibt, habe ich schon herausgefunden, aber ich würde gerne, dass eine verkleinerte Version beim Scrollen mitläuft, wie beispielsweise auf www.top.de. Kann mir da jemand helfen?

Und ich suche ne gute Möglichkeit wie ich Hintergrundbilder "erhellen" lassen kann. Ich hätte das gerne möglichst genau so wie bei www.intro.de. Da ist ein Bild wie mit einem halbtransparenten Verlauf versehen, und wenn ich drauf gehe mit der Maus wird es heller bzw. kriegt die Originalfarbe. Wie kann ich sowas umsetzen? Danke schonmal.

 

[Nitamud]

Bei zweiterem kannst du den Alpha-Kanal des Bildes(opacity) anfangs auf einen Wert zwischen 0-1 legen.

Dann per Css beim hovern diese wieder auf 1 setzen(entspricht der vollen Farbe , ohne Transparenz)

Mfg

 

[nookie]

Und zwar hätte ich gerne einerseits ein mitlaufendes Menü. Wie das Menü stehen bleibt, habe ich schon herausgefunden, aber ich würde gerne, dass eine verkleinerte Version beim Scrollen mitläuft, wie beispielsweise auf www.top.de. Kann mir da jemand helfen?

Schau dir "position: fixed" mal in CSS an. Ansonsten rate ich dir sowieso am besten dierekt mit Bootstrap zu arbeiten, klint vielleicht doof aber besser von Anfang an, anstatt nachher ins kalte Wasser geworfen zu werden.

 

[kristalljunge]

Mit "position:fixed" kann ich doch nur das bestehende Menü fixieren, oder nicht? Ich würde gerne, dass das Menü in verkleinerter Version fixiert wird...

 

[nookie]

Was hält dich davon ab? Es gibt verschiedene Anstäze wie du es lösen kannst. Du kannst das bestehende Menü auch beim scrollen, verkleinern und Ihm position: fixed geben. Alles möglich mit CSS und JS. Natürlich musst du dich schon ein bisschen einlesen.

 

[bodo92]

Du kannst dir mit JavaScript oder mit JQuery einen EventListener auf das Scroll-Event packen.

Hier im Beispiel wird beim Scrollen die Scrollpositon von oben abgefragt, liegt diese über 25px werden die Klassen der Navigation ersetzt! Du musst natürlich auch wieder die Orginalklassen zuweisen wenn wieder nach oben gescrollt wurde, das solltest du aber selbst schaffen.

//Javascript

window.addEventListener("scroll", function () {
    var position = window.pageYOffset || document.documentElement.scrollTop;
    if (position > 25) {
        document.getElementById("NAV_ID").className ="NAV_KLASSE";
    }
});

//Jquery

$(window).scroll(function() {
    var position = $(window).scrollTop();
    if (position > 25) {
        $("#NAV_ID").removeClass().addClass("NAV_CLASS");
    }
});

 

[nookie]

1337!1111111 - Style.

 

[bodo92]

1337!1111111 - Style.

Bist du auf der Tastatur eingeschlafen

 

[nookie]

Nein, ich kämpfe gerade nur mit Zend und wollte einfach nochmal meinen Senf dazu geben.