Navigation anpassen (a:hover)

24.05.2017 15:18
avatar  Katrin
#1
Ka

Hallo zusammen!
Ich habe die Vorlage "Madrid" schon fast komplett nach meinen Wünschen umgearbeitet. Nur in einem Bereich komme ich einfach nicht weiter...
Wenn ich mit der Maus über das Untermenü fahre, wird ja der Text etwas nach rechts eingerückt, was auch ok ist. Nun möchte ich gerne dass das so bleibt wenn man noch auf der Seite ist.
Ich kenne es, dass diese ganzen Anpassungen mit a:link a:hover a:active und a:viseted macht. Leider finde ich den Abschnitt im Code aber nicht.
Mag mal bitte jemand gucken, wo sich das versteckt? Oder wird das bei der Vorlage anderes gemacht (ich hoffe nicht)?
Danke

https://undnochmalrumprobieren.jimdo.com/%C3%BCber-mich/


 Antworten

 Beitrag melden
25.05.2017 19:19
avatar  Katrin
#2
Ka

Inzwischen habe ich herausgefunden, dass der Punkt den ich gerne im Menü ändern möchte scheinbar gar nicht mit CSS geschrieben wurde, sondern mit java-script. Das stelle mich vor extreme Probleme. Kann mit jemand sagen was ich wo tun muss, damit der Text eingerückt bleibt, solange ich noch auf der Seite bin (in CSS würde das ja "active" sein)?


 Antworten

 Beitrag melden
26.05.2017 10:02
avatar  az_
#3
avatar
az_

ich verstehe die Frage nicht :(

...was genau möchtest Du erreichen?


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
27.05.2017 09:31 (zuletzt bearbeitet: 27.05.2017 09:32)
avatar  Katrin
#4
Ka

Sorry, da ich schon wieder am rumprobieren bin, geht das sowieso nicht mehr.

Ich habe das jetzt schon hin wie ich möchte, nur eine Sache fehlt mir noch:
https://undnochmalrumprobieren.jimdo.com/%C3%BCber-mich/

Am linken Rand habe ich ja noch ein Untermenü. Ich wünsche mir, das wenn man die Seite hochscrollt, dass das Menü dann oben am Rand stehen bleibt und nicht mit wegscrollt.
Nun habe ich ein passendes Script gefunden und im HEAD-Bereich eingegeben. Aber ich scheine irgendwo noch einen Fehler zu haben, denn es klappt nicht.
Ich suche nun schon seit gestern immer wieder, probiere alles möglich aus, aber ich kann den Fehler nicht finden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$(function() {
var offset = $("#jtpl-section-aside").offset();
var topPadding = 35;
var topMargin = 20;
var animateSpeed = 200;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#jtpl-section-aside).stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},animateSpeed);
} else {
$("#jtpl-section-aside").stop().animate({
marginTop: topMargin
},animateSpeed);
}
}); // END window scroll
}); // END function
}); // END document ready
//]]>
</script>
 
 



1
2
3
4
5
6
7
8
9
10
11
12
13
 

<style type="text/css">
/*<![CDATA[*/
.jtpl-section-aside {
width: 250px;
}
.jtpl-section-aside.fixed {
position: fixed;
top: 20px;
}
/*]]>*/
</style>
 
 


 Antworten

 Beitrag melden
27.05.2017 22:25
avatar  Katrin
#5
Ka

Ich habe jetzt schon wieder so viel versucht, bestimmt den halben Tag dran gesessen...
Bitte schaut direkt auf der HP nach wie der Code jetzt genau steht. Das oben geschriebene ist schon nicht mehr aktuell.
Ich verstehe einfach nicht warum das Menü nicht stehen bleibt.


 Antworten

 Beitrag melden
03.06.2017 03:48 (zuletzt bearbeitet: 03.06.2017 03:51)
avatar  az_
#6
avatar
az_

...dazu brauchst Du kein jQuery.

Aber bei Dir stimmt schon mal die Einbinung nicht. so ist es richtig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">
</script>
 
<script>
//<![CDATA[
$(document).ready(function() {
$(function() {
var offset = $(".jtpl-section-aside").offset();
var topPadding = 35;
var topMargin = 20;
var animateSpeed = 200;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(".jtpl-section-aside").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},animateSpeed);
} else {
$(".jtpl-section-aside").stop().animate({
marginTop: topMargin
},animateSpeed);
}
}); // END window scroll
}); // END function
}); // END document ready
//]]>
</script>
 



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
05.06.2017 18:49
avatar  Katrin
#7
Ka

Suuuuuuuuuuuper, jetzt klappt es. DANKE Dir!

Aber jetzt noch mal für mich:
Lag es jetzt nur an der Einbindung? (hatte da auch schon rumprobiert)
Und was meinst Du mit "es geht auch ohne jQuery"? Mit CSS?


 Antworten

 Beitrag melden
05.06.2017 20:38
avatar  az_
#8
avatar
az_

2x: na klar!

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
08.06.2017 18:16
avatar  Katrin
#9
Ka

Hm...
Ich habe von dem Befehl "Sticky" als CSS gelesen. Aber um das so umzusetzen sollte ich etwas in meinem Firefox ändern. Das habe ich da aber nicht gefunden und der ist aktuell.
Aber so klappt das ja jetzt auch.


 Antworten

 Beitrag melden
24.09.2017 17:52 (zuletzt bearbeitet: 24.09.2017 18:16)
avatar  Norbert
#10
avatar

Moin,

ich hab es nun auch endlich geschafft, den Code da unten zu verbasteln, klappt auch gut (am Desktop), allerdings
flackert die Navigation beim Scrollen auf dem iPad sehr unschön. Hab schon mit der animateSpeed
rumgespielt, nützte aber nichts. Weiß jemand, wie man das Flackern verhindert?


Zitat von az_ im Beitrag #6
...dazu brauchst Du kein jQuery.

Aber bei Dir stimmt schon mal die Einbinung nicht. so ist es richtig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript">
</script>
 
<script>
//<![CDATA[
$(document).ready(function() {
$(function() {
var offset = $(".jtpl-section-aside").offset();
var topPadding = 35;
var topMargin = 20;
var animateSpeed = 200;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(".jtpl-section-aside").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},animateSpeed);
} else {
$(".jtpl-section-aside").stop().animate({
marginTop: topMargin
},animateSpeed);
}
}); // END window scroll
}); // END function
}); // END document ready
//]]>
</script>
 



LG, az



 Antworten

 Beitrag melden
24.09.2017 18:50
avatar  Norbert
#11
avatar

aaah, ich sollte dazu schreiben, dass ich .jtpl-section-aside durch .jtpl-navigation ersetzt habe.
Und, ich hab es erstmal wieder deaktiviert, da ich meinen Besuchern das störende Flackern nicht zumuten mag.


 Antworten

 Beitrag melden
24.09.2017 22:22
avatar  Norbert
#12
avatar

hier wird das Problem ganz gut geschildert, und ich verliere die Hoffnung auf eine Lösung:

https://yootheme.com/support/question/103653


 Antworten

 Beitrag melden
25.09.2017 21:58
avatar  az_
#13
avatar
az_

schau mal, ob das hier auch auftritt: https://designtest-verona.jimdo.com/
...wenn nicht, schau ich mal, wie ich damals diese Lösung umgestezt habe.
LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
25.09.2017 22:44
avatar  Norbert
#14
avatar

da flackert nichts, aber der Balken wird durch die Animation breiter, was ich als unnötig empfinde.
Kann man aber sicher verhindern.
Am liebsten hätte ich ja sowas wie hier: https://playgroundinc.com/ (gefunden über line25.com),
aber soweit bin ich noch nicht ;-)


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!