Allgemeines » Symbol des sidebar menu fixieren

16.05.2016 12:03

Thomas.L.
#1

Th

Thomas.L.

Guten Tag liebes Forum,

Wie kann ich die "Animation", dass sich die drei Balken des Menu Symbols zum x formen ausschalten? Also es sollen immer nur die drei, bzw. bei mir sind es momentan zwei Balken, angezeigt werden.

Hier ist der Link zur Seite: http://testphase1000.jimdo.com

Ich habe es schon einige male versucht, aber ich scheitere immer wieder.
Ich finde auch nicht das Element mit dem inspector tool von Mozilla firefox ... Damit fängt das Problem schon an.

Antworten

Beitrag melden

#2

18.05.2016 08:27 (zuletzt bearbeitet: 18.05.2016 08:29)

az_
#2

az_

Moin Thomas

...das ist mal wieder eine sehr interessante Frage. Schau Dir mal den Quelltext von der Box an, die Du verändern möchtest:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="jtpl-content content-options cc-content-parent">
 
    <label for="jtpl-navigation-toggle-checkbox" class="jtpl-navigation-label">
        <span class="jtpl-navigation-borders border-options"></span>
    </label>
 
    <div class="jtpl-section-main__inner cc-content-parent">
 
        <!-- _header.sass -->
        <header class="jtpl-header">
 
        </header>
        <!-- END _header.sass -->
</div>
 

Schau Dir also in "layout.css" mal "jtpl-navigation-toggle-checkbox", "jtpl-navigation-label" und "jtpl-navigation-borders" bzw. "border-options" an. Irgendwo da liegt der Hund begraben! :)

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

#3

18.05.2016 11:04

christian10
#3

ch

christian10

Vielen Dank :)

ich habe folgendes gemacht bis jetzt:

.jtpl-navigation-borders, .jtpl-navigation-borders::after, .jtpl-navigation-borders::before {
transition: none !important;
}

nun bin ich schon mal so weit, dass die animation ausgeschaltet ist, aus interesse würde ich aber noch gerne wissen, wie man die bildung zum "X" verhindern kann.

Ich hab keine ahnung von der Materie, ich kann lediglich farben & Schriften anpassen und alles was man so durch Tuturials lernt xD

Es müsste aber sowas sein, wie jtpl-navigation-borders::after wird .jtpl-navigation-borders::before oder nicht ?

jtpl-navigation-borders::after {
wird jetzt .jtpl-navigation-borders::before
}

also der Klasse einen neuen inhalt zuführen. ist sowas nicht eine pseudoklasse ?

Antworten

Beitrag melden

#4

19.05.2016 20:07

christian10
#4

ch

christian10

Ich denke, dass übersteigt meine Fertigkeiten. Ich habe mit die Elemente mit dem Inspektor Werkzeug angeschaut, aber ich finde keinen Befehl der die Position der Balken bestimmt. ... Nur den mittleren Balken (welchen ich momentan auch ausgeschaltet habe) konnte ich wieder sichtbar machen. Aber die Position des oberen und unteren bestimmen bekomme ich nicht hin.

Kann ich dies überhaupt in CSS ändern ?

LG

Antworten

Beitrag melden

#5

21.05.2016 10:59 (zuletzt bearbeitet: 21.05.2016 12:11)

az_
#5

az_

Ja, das geht. Versuch zB. mal die Drehung herauszunehmen, indem Du einfach die 45° durch 0 ersetzt:

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
27
28
29
30
31
 

 
/* mit Drehung /*
 
.jtpl-navigation-toggle-checkbox:checked+.jtpl-main .jtpl-navigation-borders:before {
    -webkit-transform: rotate(45deg) scaleX(1.1792476415);
    -ms-transform: rotate(45deg) scaleX(1.1792476415);
    transform: rotate(45deg) scaleX(1.1792476415);
}
 
.jtpl-navigation-toggle-checkbox:checked+.jtpl-main .jtpl-navigation-borders:after {
    -webkit-transform: rotate(45deg) scaleX(1.1792476415);
    -ms-transform: rotate(45deg) scaleX(1.1792476415);
    transform: rotate(-45deg) scaleX(1.1792476415);
}
 

/*ohne Drehung*/
 
.jtpl-navigation-toggle-checkbox:checked+.jtpl-main .jtpl-navigation-borders:before {
    -webkit-transform: rotate(0deg) scaleX(1.1792476415);
    -ms-transform: rotate(0deg) scaleX(1.1792476415);
    transform: rotate(0deg) scaleX(1.1792476415);
}
 
.jtpl-navigation-toggle-checkbox:checked+.jtpl-main .jtpl-navigation-borders:after {
    -webkit-transform: rotate(0deg) scaleX(1.1792476415);
    -ms-transform: rotate(0deg) scaleX(1.1792476415);
    transform: rotate(0deg) scaleX(1.1792476415);
}
 
 

...mit scaleX(0) verschwindet der Balken.

LG, az

PS: Google mal im Netz nach "CSS transitions" oder "CSS transform".
...es gibt auch viele Beispiele im Netz, zB.:
- http://www.olivergast.de/wp-content/demos/transitions/ oder
- http://www.pepe-juergens.de/demo/css3-transform-basic/

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

#6

21.05.2016 11:26 (zuletzt bearbeitet: 21.05.2016 11:54)

az_
#6

az_

...um zu sehen, wie die CSS-Formatierung des Elementes ist, musst Du im DOM-Explorer in den Quelltext gehen und das :before bzw. das :after direkt anwählen:

...dann kannst Du auch die Position der Striche vor dem Event ändern, z.B. übereinander (ein Strich verschwindet):

1
2
3
4
5
6
7
8
9
 

.jtpl-navigation-borders:before {
    top: 14px;
}
 
.jtpl-navigation-borders:after {
    top: 14px;
}
 
 

...das CSS für .jtpl-navigation-toggle-checkbox:checked+, bekommst Du nur, wenn Du den Event ausgelöst hast:

...ich hoffe, das hilft Dir weiter!

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

Bildanh�nge

Antworten

Beitrag melden

#7

21.05.2016 12:59 (zuletzt bearbeitet: 21.05.2016 13:01)

az_
#7

az_

PS: versuch mal folgendes:

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
27
28
 

    .jtpl-navigation-borders {
        border-top-width: 3px;
    }
 
    .border-options,
    .border-options:before,
    .border-options:after {
        border-color: #666;
    }
 
    .jtpl-navigation-toggle-checkbox:checked+.jtpl-main .jtpl-navigation-borders:before,
    .jtpl-navigation-toggle-checkbox:checked+.jtpl-main .jtpl-navigation-borders:after {
        top:-7px;
        left:15px;
        border-radius: 30px;
        border-width: 30px;
        width: 30px;
        transform: rotate(360deg) scale(0.8);
        box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%);
    }
 
    @media (min-width: 768px) {
        .jtpl-navigation-toggle-checkbox:checked+.jtpl-main .jtpl-navigation {
            width: 25%;
            box-shadow: 0 0 15px 5px rgba(51,51,51,0.5);}
    }
 
 

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