Plugin "Ecke 7 Links" modifizieren!

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Das neue Template Xobor (v6) � Plugin "Ecke 7 Links" modifizieren!

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows Betriebssystem MS Windows 10, 8.1, 8 und 7 - Tricks & Tipps MS Windows 10, 8.1, 8 und 7 - Fragen & Antworten �rger mit Ihrem PC? �rger mit dem PC - Vorbeugung und Hilfe �rger mit dem PC - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Plugin "Ecke 7 Links" modifizieren! datum

12.12.2020 09:58 (zuletzt bearbeitet: 26.04.2021 17:07)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3201
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1113

Plugin "Ecke 7 Links" modifizieren!
Aktualisiert 16.12.20

Das Plugin von TripleM erkennt man durch einen Eck-Button oben rechts!
Wird dieser Button mit der Maus überfahren, schiebt sich eine Seite mit max 7 Verlinkungen vor das Forum.

Interessantes Plugin für wichtige und aktuelle Links!
Leider wird das Pi von "TripleM" nicht mehr administriert.
Das Plugin ist sehr einfach gehalten, wie man auf dem ersten Bild sehen kann.
Mit dem folgenden Beitrag lassen sich Schriftgröße, Hintergrundfarben und Bilder verändern und einfügen (Bild 2).
Für die Linkbeschreibungen können auch Grafiken und Bilder verwendet werden!

Neu! Installation für alle Templates + Mobil

Als erstes muss das Plugin "" aus dem Plugin Store installiert werden!
Es ist nur ein CSS-Eintrag unter notwendig!

In Zeile 2 kann die Farbe und Transparenz des Eck-Buttons dem Template angepasst werden!
In Zeile 16 kann das Hintergrundbild angepasst werden!
In Zeile 11 kann die Schriftgröße verändert werden!
In Zeile 5 wird die maximale Breite der Verlinkung mit Hintergrundfarbe eingestellt!
Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe durch Zeile 23 ausgeblendet!
Zeile 26-33 sind für die Anpassung der anderen Templates notwendig!
Das Template wird nicht verändert!

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
32
33
 
/* Ecke 7 links */
.menu-outer {background-color: rgba(200,200,200,0.9); }
 
.menu-outer a {
width:400px; 
margin-top:10px !important;
 
border-radius:4px;
background: rgba(0,0,0,0.7) !important; 
padding:10px !important; 
font-size:15px !important;
color:rgba(255,255,255,0.8); 
}
 
.menu-outer:hover {
background-image: url("https://files.homepagemodules.de/b104774/a_334_058bb4c0.jpg") !important;
background-color: rgba(200,200,200,0.9); 
background-size:contain;
background-position:top center;
}
/* Hintergrundfarbe leerer Links ausblenden */
.menu-outer a:empty {
display:none;
}
 
/* Abstand Eck-Button - Business, Gaia, Standard */
#topnavigation-ul, #foben_login_form div,  #forum div.ntop td a {
margin-right: 50px !important; 
}
/* Linkliste - Gaia */
.menu-outer li {
float:none !important;
}
 

Schlie�en

Da das Plugin "" für das Xobor (v6) nicht funktioniert, muss es komplett neu eingegeben werden!
Das gesamte Skript mit der CSS kommt in !
Es funktioniert dann im Xobor (v6) und Mobil!
Ist einer der Templates (v1-4) aktiv, muss das 1. Skript für "Templates (v1-4)" und für die mobile Version zusätzlich das folgende Skript installiert werden!
Die Eingaben für die Verlinkungen müssen doppelt eingegeben werden!

In Zeile 71 kann das Hintergrundbild angepasst werden!
In Zeile 130 kann die Schriftgröße verändert werden!
In Zeile 124 wird die maximale Breite der Verlinkung mit Hintergrundfarbe eingestellt!
Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe durch Zeile 145 ausgeblendet!
Zeile 11-17 werden die Verlinkungen mit ihren Beschreibungen eingefügt!
In Zeile 53 kann die Farbe mit Transparenz dem Template angepasst werden!
Die Templates werden nicht verändert!

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
 
<div class="menu-outer">
 
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
 
<nav>
<ul>
<li><a href="https://www.hilfe-tricks-tipps.de/t1164f31-Xobor-Adventskalender-mit-Ausloesegrafik-Neu-ueberarbeitet.html#msg2557">Xobor Adventskalender <br> <img src="//files.homepagemodules.de/b135428/f277t73545p591206n18_PuzTgRIL.png"></a></li>
<li><a href="https://www.hilfe-tricks-tipps.de/t1154f31-Kopierschutz-fuer-Webseiten-Markierungssperre-Eigenes-Kontextmenue-iFrame-Sperre.html#msg2481">Kopierschutz für die eigene Webseite</a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
 
</div>
 
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
 
<style type="text/css">
#usertoggle_container,#usertoggler_menu_lg {
padding-right:50px !important;
}
.menu-outer:hover ~ .menu-close {
margin-right:-50px;
}
.menu-outer:hover .bar { 
background:rgba(100,200,240,.5); 
}
.menu-outer > nav ul { 
top:5%; 
}
.menu-outer {
overflow: hidden;
position: fixed;
top: 0px;
font-family: 'Montserrat', serif;
z-index: 999998;
width: 100%;
left: 100%;
margin-left: -50px;
height: 200%;
background: rgba(200,200,200,0.9); 
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-outer:hover, .menu-outer:focus, .menu-outer:active{ 
background-image: url("https://files.homepagemodules.de/b104774/a_334_058bb4c0.jpg") !important;
background-color: rgba(200,200,200,0.9); 
background-size:contain;
background-position:top center;
background: rgba(300,400,440,.98);
left: 0;
margin-left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu-icon {
z-index: 999999;
position: absolute;
top: 58px;
left: 15px;
width: 30px;
pointer-events: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
opacity: 0;
}
.menu-outer nav ul {
position:absolute;
width:100%;
padding: 0;
left: 10%;; /*prevents possible click when not oppened*/
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > nav ul {
left: 0;
}
.menu-outer nav li {
list-style:none;
text-align: center;
}
.menu-outer nav li a {
width:300px; 
margin-top:10px !important;
 
border-radius:4px;
background: rgba(50,50,50,0.9) !important; 
padding:10px !important; 
font-size:15px;
color:rgba(255,255,255,0.8); 
text-decoration: none;
margin: 0 auto;
padding: 20px;
display:block;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer nav li a:hover {
color: rgba(155,155,155,2);
}
.menu-outer a:empty {display:none;}
 
@media screen and (max-width: 600px), screen and (max-height: 600px) {
.menu-outer nav ul {font-size:.75em;}
.menu-outer nav ul a {padding: 10px;}
}
.menu-close {
z-index: 9999999;
position: fixed;
top: 0;
right: 100%;
width: 200px;
height: 200px;
background: rgba(350,230,170,1);
cursor: pointer;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .menu-icon {
right: 15px; left: auto;top: 68px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-close .bar {
background: rgba(250,250,250,1);
width: 100%;
height: 5px;
position:absolute;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
.menu-close .bar:first-child {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .bar:last-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
 

Schlie�en

Anklicken, um den Spoiler zu öffnen und zu schließen!

Bis dann und gutes Gelingen
Wolfgang

ichwersonst und Hans58 finden das Top!

Antworten

#2 | RE: Plugin "Ecke 7 Links" modifizieren! datum

12.12.2020 11:22

danke ... super Idee

Antworten

#3 | RE: Plugin "Ecke 7 Links" modifizieren / Mit Audio - Modul datum

12.12.2020 14:02

bisschen mit rumgebastelt

Antworten

#4 | RE: Plugin "Ecke 7 Links" modifizieren / Mit Audio - Modul datum

12.12.2020 18:39 (zuletzt bearbeitet: 12.12.2020 19:57)

Hans58

Informationen anzeigen

Beitr�ge:	111
Registriert seit:	05.08.2008

Homepage:	Link
Letzte Spende	Betrag � Forum Spende
Likes	25

Ich habe den Code aus TripleM´s Plugin genommen .... Konnte ihn nicht erreichen ... Ich hoffe er hat nichts dagegen

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
 
<div class="menu-outer">
 
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
 
<nav>
<ul>
<li><a href="https://www.google.de">kalte Wintertage</a></li>
<!--  <li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>  -->
</ul>
</nav>
 
</div>
 
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
 
<style type="text/css">
.menu-outer:hover ~ .menu-close {
margin-right:-50px;
}
.menu-outer:hover .bar { 
background:rgba(100,200,240,.5); 
}
.menu-outer > nav ul { 
top:5%; 
}
 
/* The rest I chnaged parts but not most of it */
.menu-outer {
overflow: hidden;
position: fixed;
top: 0;
font-family: 'Montserrat', serif;
z-index: 998;
width: 100%;
left: 100%;
margin-left: -50px;
height: 200%;
background: rgba(400,500,540,.5);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-outer:hover {
background: rgba(300,400,440,.98);
left: 0;
margin-left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu-icon {
z-index: 999;
position: absolute;
top: 58px;
left: 15px;
width: 30px;
pointer-events: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
opacity: 0;
}
nav ul {
position:absolute;
width:100%;
padding: 0;
left: 10%;; /*prevents possible click when not oppened*/
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > nav ul {
left: 0;
}
nav li {
list-style:none;
text-align: center;
}
nav li a {
font-size: 2em;
color: rgba(255,255,255,.8);
text-decoration: none;
margin: 0 auto;
padding: 20px;
display:block;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
nav li a:hover {
color: rgba(155,155,155,2);
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
nav ul {font-size:.75em;}
nav ul a {padding: 10px;}
}
.menu-close {
z-index: 9999;
position: fixed;
top: 0;
right: 100%;
width: 200px;
height: 200px;
background: rgba(350,230,170,1);
cursor: pointer;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .menu-icon {
right: 15px; left: auto;top: 68px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-close .bar {
background: rgba(250,250,250,1);
width: 100%;
height: 5px;
position:absolute;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
.menu-close .bar:first-child {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .bar:last-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
 

Der Code, als Plugin für den unten auf dem Bild zusehenden Musikplayer ... Er ist auf der Forenübersicht und schimmert durch.

Forum Übersicht .... footer

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
 
<style>
#weihnachtaudio{
position: fixed;
bottom: 5%;
right: 2%;
z-index: 40000;
border-radius: 0px;
border: 1px solid red;
}
#weihnachtaudio:hover {
background: #090;
border: 4px solid red;
}
#weihnachtaudio a {
font: 1em arial;
text-decoration: none;
display: block;
padding: 8px 12px;
}
#weihnachtaudio a:hover {
text-decoration: underline;
color: red;
}
</style>
 
<div id="weihnachtaudio">
<audio src="https://files.homepagemodules.de/b135428/f199t8864p428104n4_hkiAVdTl.mp3" controls="controls"></audio>
</div>  
 

Es funktioniert alles super .... Ich bin aber kein großer Html-ler .... Ich hoffe, dass Wolfgang noch mal drüber guckt

Antworten

#5 | Plugin "Ecke 7 Links" modifizieren / Mit Audio - Modul datum

13.12.2020 08:33 (zuletzt bearbeitet: 16.12.2020 16:25)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3201
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1113

Plugin "Ecke 7 Links" modifizieren / Mit Audio - Modul
Aktualisiert 16.12.20

Hallo Hans,
super Idee ein Audio - Modul einzubauen, danke dafür!

Nachtrag:
Habe da etwas umgebaut, auch mit Autoplay ausprobiert.
Neu! In der Funktion "Autoplay" spielt die Musik nur, wenn die "Mouseover-Seite" geöffnet ist! Zu bedenken ist allerdings, dass das automatische Abspielen auch stören kann!
Neu! Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe ausgeblendet!

Das Skript ist so aufgebaut, dass es sich an das Plugin von "TripleM" anhängt. Der nackte Code wird somit nicht benötigt!
Der Audio-Player ist solange aktiv, bis die Seite von "Ecke 7 links" geschlossen wird!
Eingebaut ist auch ein X-Button, zum Schließen des Players.
Der "Outline-Rahmen" vom Audio-Player wird ausgeblendet. Der "Outlook-Rahmen", finde ich, ist optisch nicht gelungen und passt auch nicht!
Interessanterweise lassen sich zu den Linkbeschreibungen auch Bilder mit einfügen, siehe unten!

z.B.: Xobor Adventskalender <br><br><img src="https://files.homepagemodules.de/b135428/f277t73545p591206n18_PuzTgRIL.png">

Neu! Installation für alle Templates + Mobil

Als erstes muss, wenn noch nicht geschehen, das Plugin "" aus dem Plugin Store installiert werden!
Das Skript und der CSS-Eintrag kann in die "" oder als PIugin in den "" eingetragen werden!
Das Audio-Modul kann mit und ohne "Autoplay" aufgebaut werden!
Das Template wird nicht verändert!

In Zeile 3 kann die Farbe und Transparenz des Eck-Buttons dem Template angepasst werden!
In Zeile 16 kann das Hintergrundbild angepasst werden!
In Zeile 11 kann die Schriftgröße verändert werden!
In Zeile 6 wird die max Breite der Verlinkung mit Hintergrundfarbe eingestellt!
In Zeile 24+25 wird die Position des Audio-Players bestimmt.
In Zeile 61 wird unter src die Audio-Datei eingetragen
Neu! Soll die Audio-Datei nicht automatisch abgespielt werden, muss autoplay in Zeile 60 gelöscht werden!
Neu! Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe durch Zeile 44 ausgeblendet!

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<style>
/* Ecke 7 links mit Audio-Modul*/
.menu-outer {background-color: rgba(200,200,200,0.9); }
 
.menu-outer a {
width:400px; 
margin-top:10px !important;
border-radius:4px;
background: rgba(0,0,0,0.7) !important; 
padding:10px !important; 
font-size:15px !important;
color:rgba(255,255,255,0.8);
}
 
.menu-outer:hover {
background-image: url("https://files.homepagemodules.de/b104774/a_334_058bb4c0.jpg") !important;
background-color: rgba(200,200,200,0.9); 
background-size:contain;
background-position:top center;
}
 
#weihnachtaudio {
position: absolute;
bottom: 55%;
right: 3%;
z-index: 40000;
}
#weihnachtaudio span {
float:right;
border-radius:100%;
padding:1px 6px 3.5px 6px;
top:0px;
background:#eeeeee;
color:#000000;
cursor:pointer;
}
#weihnachtaudio span:hover {
background:#aaaaaa;
}
audio {
outline: none;
}
/* Hintergrundfarbe leerer Links ausblenden */
.menu-outer a:empty {display:none;}
 
/* Abstand Eck-Button - Business, Gaia, Standard */
#topnavigation-ul, #foben_login_form div, #forum div.ntop td a {
margin-right: 50px!important; 
}
/*Gaia*/
.menu-outer li {
float:none !important;
}
</style>
 
<script>
$('.menu-outer').hover(function(){
// Autoplay Zeile 60: autoplay 
$('.menu-outer').append('<div id="weihnachtaudio"> \
<audio controls="controls"  preload="auto" autobuffer autoplay > \
<source src="https://files.homepagemodules.de/b135428/f199t8864p428104n4_hkiAVdTl.mp3" type="audio/mpeg"> \
Ihr Browser kann die Audio-Datei nicht wiedergeben! \
</audio><span>x</span> \
</div>');
 
$('#weihnachtaudio span').click(function(){
$('#weihnachtaudio audio, #weihnachtaudio span').attr('src','').hide();
});
 
}, function(){
$('#weihnachtaudio').remove();
});
</script>
 

Schlie�en

In Zeile 73 kann das Hintergrundbild angepasst werden!
In Zeile 132 kann die Schriftgröße verändert werden!
In Zeile 126 wird die maximale Breite der Verlinkung mit Hintergrundfarbe eingestellt!
Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe durch Zeile 147 ausgeblendet!
Zeile 11-17 werden die Verlinkungen mit ihren Beschreibungen eingefügt!
In Zeile 55 kann die Farbe mit Transparenz dem Template angepasst werden!
In Zeile 214+215 wird die Position des Audio-Players bestimmt.
In Zeile 242 wird unter src die Audio-Datei eingetragen
Soll die Audio-Datei nicht automatisch abgespielt werden, muss autoplay in Zeile 241 gelöscht werden!
Die Templates werden nicht verändert!

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
 
<div class="menu-outer">
 
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
 
<nav>
<ul>
<li><a href="https://www.hilfe-tricks-tipps.de/t1164f31-Xobor-Adventskalender-mit-Ausloesegrafik-Neu-ueberarbeitet.html#msg2557">Xobor Adventskalender <br> <img src="//files.homepagemodules.de/b135428/f277t73545p591206n18_PuzTgRIL.png"></a></li>
<li><a href="https://www.hilfe-tricks-tipps.de/t1154f31-Kopierschutz-fuer-Webseiten-Markierungssperre-Eigenes-Kontextmenue-iFrame-Sperre.html#msg2481">Kopierschutz für die eigene Webseite</a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
 
</div>
 
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
 
<style type="text/css">
/* Ecke 7 links mit Audio-Modul*/ 
 
#usertoggle_container,#usertoggler_menu_lg {
padding-right:50px !important;
}
.menu-outer:hover ~ .menu-close {
margin-right:-50px;
}
.menu-outer:hover .bar { 
background:rgba(100,200,240,.5); 
}
.menu-outer > nav ul { 
top:5%; 
}
.menu-outer {
overflow: hidden;
position: fixed;
top: 0px;
font-family: 'Montserrat', serif;
z-index: 999998;
width: 100%;
left: 100%;
margin-left: -50px;
height: 200%;
background: rgba(200,200,200,0.9); 
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-outer:hover, .menu-outer:focus, .menu-outer:active{ 
background-image: url("https://files.homepagemodules.de/b104774/a_334_058bb4c0.jpg") !important;
background-color: rgba(200,200,200,0.9); 
background-size:contain;
background-position:top center;
background: rgba(300,400,440,.98);
left: 0;
margin-left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu-icon {
z-index: 999999;
position: absolute;
top: 58px;
left: 15px;
width: 30px;
pointer-events: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
opacity: 0;
}
.menu-outer nav ul {
position:absolute;
width:100%;
padding: 0;
left: 10%;; /*prevents possible click when not oppened*/
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > nav ul {
left: 0;
}
.menu-outer nav li {
list-style:none;
text-align: center;
}
.menu-outer nav li a {
width:300px; 
margin-top:10px !important;
 
border-radius:4px;
background: rgba(50,50,50,0.7) !important; 
padding:10px !important; 
font-size:15px;
color:rgba(255,255,255,0.8); 
text-decoration: none;
margin: 0 auto;
padding: 20px;
display:block;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer nav li a:hover {
color: rgba(155,155,155,2);
}
.menu-outer a:empty {display:none;}
 
@media screen and (max-width: 600px), screen and (max-height: 600px) {
.menu-outer nav ul {font-size:.75em;}
.menu-outer nav ul a {padding: 10px;}
}
.menu-close {
z-index: 9999999;
position: fixed;
top: 0;
right: 100%;
width: 200px;
height: 200px;
background: rgba(350,230,170,1);
cursor: pointer;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .menu-icon {
right: 15px; left: auto;top: 68px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-close .bar {
background: rgba(250,250,250,1);
width: 100%;
height: 5px;
position:absolute;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
.menu-close .bar:first-child {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .bar:last-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
 
#weihnachtaudio {
position: absolute;
bottom: 55%;
right: 3%;
z-index: 40000;
}
#weihnachtaudio span {
float:right;
border-radius:100%;
padding:1px 6px 3.5px 6px;
top:0px;
background:#eeeeee;
color:#000000;
cursor:pointer;
}
#weihnachtaudio span:hover {
background:#aaaaaa;
}
audio {
outline: none;
}
</style>
 
<script>
window.addEventListener('load', function ( ) {
 
$('.menu-outer').hover(function(){
// Autoplay Zeile 241: autoplay
$('.menu-outer').append('<div id="weihnachtaudio"> \
<audio controls="controls"  preload="auto" autobuffer autoplay > \
<source src="https://files.homepagemodules.de/b135428/f199t8864p428104n4_hkiAVdTl.mp3" type="audio/mpeg"> \
Ihr Browser kann die Audio-Datei nicht wiedergeben! \
</audio><span>x</span> \
</div>');
 
$('#weihnachtaudio span').click(function(){
$('#weihnachtaudio audio, #weihnachtaudio span').attr('src','').hide();
});
 
}, function(){
$('#weihnachtaudio').remove();
});
 
});
</script>
 

Schlie�en

Anklicken, um den Spoiler zu öffnen und zu schließen!

Bis dann und nochmal besten Dank für die Idee
Wolfgang

Hans58 und ichwersonst finden das Top!

Antworten

#6 | RE: Plugin "Ecke 7 Links" modifizieren / Mit Audio - Modul datum

13.12.2020 10:20

Hallo zusammen.

Ich glaube in Zeile 26 fehlt zum Schluss noch ein: >

Viele Grüße
Michael

Wolfgang und Hans58 finden das Top!

Antworten

#7 | Plugin "Ecke 7 Links" modifizieren / Mit Audio - Modul datum

14.12.2020 10:57 (zuletzt bearbeitet: 14.12.2020 20:22)

Plugin "Ecke 7 Links" modifizieren / Mit Audio - Modul

Hallo Michael,
bestem Dank für den Hinweis.
Habe ich in Beitrag #5 geändert!

Nachtrag:

Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe der Verlinkung ausgeblendet!
Habe noch das Schließen des Audio-Players verbessert!
Wer möchte, kann jetzt auch den Audio-Player automatisch starten (Autoplay)!

Bis dann
Wolfgang

ichwersonst findet das Top!

Antworten

#8 | RE: Plugin "Ecke 7 Links" modifizieren / Mit Video - Modul datum

14.12.2020 19:34 (zuletzt bearbeitet: 16.12.2020 16:38)

Wolfgang

Administrator

Informationen anzeigen

Beitr�ge:	3201
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Likes	1113

Plugin "Ecke 7 Links" modifizieren / Mit Video - Modul
Aktualisiert 16.12.20

Das Plugin von TripleM erkennt man durch einen Eck-Button oben rechts!
Wird dieser Button mit der Maus überfahren, schiebt sich eine Seite mit maximal 7 Verlinkungen vor das Forum.
Das Plugin ist jetzt mit einem Video-Player ausgestattet. Der Video-Player kann in der Funktion "Autoplay" auch automatisch gestartet werden!

Das folgende Skript ist so aufgebaut, dass es sich an das Plugin von "TripleM" anhängt.
Der Video-Player ist solange aktiv, bis die Seite von "Ecke 7 links" geschlossen wird!
Eingebaut ist auch ein X-Button, zum Schließen des Players und zum Schließen der Linkliste.
Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe ausgeblendet!
Wird keine Verlinkung eingetragen, kann der Video-Player auch so gestartet werden. Die X-Button werden automatisch ausgeblendet!
Der Video-Player wird zeitverzögert und animiert eingeblendet!
Linkbeschreibungen lassen sich auch mit Bilder einfügen, siehe unten!

z.B.: Xobor Adventskalender <br><br> <img src="https://files.homepagemodules.de/b135428/f277t73545p591206n18_PuzTgRIL.png">

Neu! Installation für alle Templates + Mobil

Als erstes muss, wenn noch nicht geschehen, das Plugin "" aus dem Plugin Store installiert werden!
Das Skript und der CSS-Eintrag kann in die "" oder als PIugin in den "" eingetragen werden!
Das Video-Modul kann mit und ohne "Autoplay" aufgebaut werden!
Das Template wird nicht verändert!

In Zeile 3 kann die Farbe und Transparenz des Eck-Buttons dem Template angepasst werden!
In Zeile 69 wird unter src die YouTube Video-Datei eingetragen! Vorsicht - Am Ende steht der Eintrag für Autoplay!
Soll die Video-Datei nicht automatisch abgespielt werden, muss ?autoplay=1 in Zeile 69 gelöscht werden!
Über Zeile 53+54 kann die Größe des Videos eingestellt werden!
In Zeile 16 kann das Hintergrundbild angepasst werden!
In Zeile 11 kann die Schriftgröße verändert werden!
In Zeile 6 wird die maximale Breite der Verlinkung mit Hintergrundfarbe eingestellt!
Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe durch Zeile 61 ausgeblendet!
Durch Zeile 44 wird die Top-Leiste nach Links verschoben, damit der Eck-Button keinen Link verdeckt!
In Zeile 72 können die Video-Zeiten für das verzögerte Einschalten (delay) und Einblenden (fadeln) angepasst werden!

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<style type="text/css">
/* Ecke 7 links */
.menu-outer {background-color: rgba(200,200,200,0.9); }
 
.menu-outer a {
width:400px;
margin-top:10px;
border-radius:4px;
background: rgba(50,50,50,0.7) !important; 
padding:10px !important; 
font-size:15px !important; 
color:rgba(255,255,255,0.8);
border:1px solid #777777;
}
.menu-outer:hover {
background-image: url("https://files.homepagemodules.de/b104774/a_334_058bb4c0.jpg") !important;
background-color: rgba(200,200,200,0.9); 
background-size:contain;
background-position:top center;
}
.menu-outer .videoout, .menu-outer .listout {
width:100px;
position:absolute;
margin:-30px 0 0 140px !important;
padding:1px 6px;
background:rgba(100,100,100,0.99);
color:rgba(255,255,255,0.8);
border-radius:10px;
border:1px solid #777777;
cursor:pointer;
}
.menu-outer .listout {
margin-top:10px !important;
}
.menu-outer .listout:hover, .menu-outer .videoout:hover, .menu-outer span:hover{
background:#aaaaaa;
}
 
/* Hintergrundfarbe leerer Links ausblenden */
.menu-outer a:empty {display:none;}
 
/* Abstand Eck-Button - Business, Gaia, Standard */
#topnavigation-ul, #foben_login_form div, #forum div.ntop td a {
margin-right: 50px!important; 
}
/*Gaia*/
.menu-outer li {
float:none !important;
}
 
.videoclose {
display:none;
height:50%;
width:100%;
overflow:hidden;
overflow-x:hidden;
overflow-y:hidden;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
</style>
 
<script>
$('.menu-outer').hover(function(){
/* Autoplay Zeile 69: ?autoplay=1 */
$(this).prepend('<iframe class="videoclose" src="https://www.youtube.com/embed/vfdi1Apq4NY?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>');
 
$('.menu-outer nav').fadeIn(500);
$('.videoclose').delay(2000).fadeIn(2000);
 
if ($('.menu-outer a').attr('href') || $('.menu-outer a').html() != '') {
$('.menu-outer a:first').before('<span class="videoout">Video schließen</span>');
$('.menu-outer a:last').after('<span class="listout">Liste schließen</span>');
};
 
$('.menu-outer .listout').click(function(){
$('.menu-outer nav').hide();
});
 
$('.menu-outer .videoout').click(function(){
$('.videoclose').attr('src','').hide();
$('.menu-outer span').hide();
});
 
}, function(){
$('.videoclose,.menu-outer span').remove();
$('.menu-outer nav').hide();
});
</script>
 

Schlie�en

Da das Plugin "" für das Xobor (v6) nicht funktioniert, muss es komplett neu eingegeben werden!
Das gesamte Skript mit der CSS kommt in !
Es funktioniert dann im Xobor (v6) und Mobil!
Ist einer der Templates (v1-4) aktiv, muss das 1. Skript für "Templates (v1-4)" installiert werden! Für die mobile Version muss zusätzlich das folgende Skript unter eingetragen werden!
Die Eingaben für die Verlinkungen müssen doppelt eingegeben werden!
Das Video-Modul kann mit und ohne "Autoplay" aufgebaut werden!
Das Template wird nicht verändert!

In Zeile 253 wird unter src die YouTube Video-Datei eingetragen! Vorsicht - Am Ende steht der Eintrag für Autoplay!
Soll die Video-Datei nicht automatisch abgespielt werden, muss ?autoplay=1 in Zeile 253 gelöscht werden!
Über Zeile 235+236 kann die Größe des Videos eingestellt werden!
In Zeile 256 können die Video-Zeiten für das verzögerte Einschalten (delay) und Einblenden (fadeln) angepasst werden!
In Zeile 73 kann das Hintergrundbild angepasst werden!
In Zeile 131 kann die Schriftgröße verändert werden!
In Zeile 126 wird die maximale Breite der Verlinkung mit Hintergrundfarbe eingestellt!
Werden nicht alle 7 Verlinkungen benötigt, wird die störende Hintergrundfarbe durch Zeile 212 ausgeblendet!
Durch Zeile 34 wird die Top-Leiste nach Links verschoben, damit der Eck-Button keinen Link verdeckt!
In Zeile 74 kann die Farbe mit Transparenz dem Template angepasst werden!
Zeile 11-17 werden die Verlinkungen mit ihren Beschreibungen eingefügt!

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
 
<div class="menu-outer">
 
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
 
<nav>
<ul>
<li><a href="https://www.hilfe-tricks-tipps.de/t1164f31-Xobor-Adventskalender-mit-Ausloesegrafik-Neu-ueberarbeitet.html#msg2557">Xobor Adventskalender <br> <img src="//files.homepagemodules.de/b135428/f277t73545p591206n18_PuzTgRIL.png"></a></li>
<li><a href="https://www.hilfe-tricks-tipps.de/t1154f31-Kopierschutz-fuer-Webseiten-Markierungssperre-Eigenes-Kontextmenue-iFrame-Sperre.html#msg2481">Kopierschutz für die eigene Webseite</a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
 
</div>
 
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
 
<style type="text/css">
/* Ecke 7 links mit Audio-Modul*/ 
 
#usertoggle_container,#usertoggler_menu_lg {
padding-right:50px !important;
}
.menu-outer:hover ~ .menu-close {
margin-right:-50px;
}
.menu-outer:hover .bar { 
background:rgba(100,200,240,.5); 
}
.menu-outer > nav ul { 
top:5%; 
}
.menu-outer {
overflow: hidden;
position: fixed;
top: 0px;
font-family: 'Montserrat', serif;
z-index: 999998;
width: 100%;
left: 100%;
margin-left: -50px;
height: 200%;
background: rgba(200,200,200,0.9); 
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-outer:hover, .menu-outer:focus, .menu-outer:active{ 
background-image: url("https://files.homepagemodules.de/b104774/a_334_058bb4c0.jpg") !important;
background-color: rgba(200,200,200,0.9); 
background-size:contain;
background-position:top center;
background: rgba(300,400,440,.98);
left: 0;
margin-left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu-icon {
z-index: 999999;
position: absolute;
top: 58px;
left: 15px;
width: 30px;
pointer-events: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
opacity: 0;
}
.menu-outer nav ul {
position:absolute;
width:100%;
padding: 0;
left: 10%;; /*prevents possible click when not oppened*/
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > nav ul {
left: 0;
}
.menu-outer nav li {
list-style:none;
text-align: center;
}
.menu-outer nav li a {
width:400px; 
margin-top:10px !important;
border-radius:4px;
background: rgba(50,50,50,0.7) !important; 
padding:10px !important; 
font-size:15px;
color:rgba(255,255,255,0.8); 
text-decoration: none;
margin: 0 auto;
padding: 20px;
display:block;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer nav li a:hover {
color: rgba(155,155,155,2);
}
.menu-outer a:empty {display:none;}
 
@media screen and (max-width: 600px), screen and (max-height: 600px) {
.menu-outer nav ul {font-size:.75em;}
.menu-outer nav ul a {padding: 10px;}
}
.menu-close {
z-index: 9999999;
position: fixed;
top: 0;
right: 100%;
width: 200px;
height: 200px;
background: rgba(350,230,170,1);
cursor: pointer;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .menu-icon {
right: 15px; left: auto;top: 68px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-close .bar {
background: rgba(250,250,250,1);
width: 100%;
height: 5px;
position:absolute;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
.menu-close .bar:first-child {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .bar:last-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
 
/* Hintergrundfarbe leerer Links ausblenden */
.menu-outer a:empty {
display:none;
}
.menu-outer .videoout, .menu-outer .listout {
width:110px;
position:absolute;
margin:-30px 0 0 140px !important;
padding:1px 6px;
background:rgba(100,100,100,0.99);
color:rgba(255,255,255,0.8);
border-radius:10px;
border:1px solid #777777;
cursor:pointer;
}
.menu-outer .listout {
margin-top:10px !important;
}
.menu-outer .listout:hover, .menu-outer .videoout:hover, .menu-outer span:hover{
background:#aaaaaa;
}
 
.videoclose {
display:none;
height:50%;
width:100%;
overflow:hidden;
overflow-x:hidden;
overflow-y:hidden;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
</style>
 
<script>
window.addEventListener('load', function ( ) {
 
$('.menu-outer').hover(function(){
/* Autoplay Zeile 253: ?autoplay=1 */
$(this).prepend('<iframe class="videoclose" src="https://www.youtube.com/embed/vfdi1Apq4NY?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe>');
 
$('.menu-outer nav').fadeIn(500);
$('.videoclose').delay(2000).fadeIn(2000);
 
if ($('.menu-outer a').attr('href') || $('.menu-outer a').html() != '') {
$('.menu-outer a:first').before('<span class="videoout">Video schließen</span>');
$('.menu-outer a:last').after('<span class="listout">Liste schließen</span>');
};
 
$('.menu-outer .listout').click(function(){
$('.menu-outer nav').hide();
});
 
$('.menu-outer .videoout').click(function(){
$('.videoclose').attr('src','').hide();
$('.menu-outer span').hide();
});
 
}, function(){
$('.videoclose,.menu-outer span').remove();
$('.menu-outer nav').hide();
});
 
});
</script>
 

Schlie�en

Anklicken, um den Spoiler zu öffnen und zu schließen!

Bis dann und nochmal besten Dank für diese inspirierende Video-Idee von ichwersonst

Wolfgang

ichwersonst und Hans58 finden das Top!

Antworten

#9 | Update: Plugin "Ecke 7 Links" modifizieren / Mit Video - Modul datum

15.12.2020 15:48 (zuletzt bearbeitet: 16.12.2020 11:54)

Update: Plugin "Ecke 7 Links" modifizieren / Mit Video - Modul

Musste das Skript nochmal überarbeiten.
Funktioniert z.Z. nur im Business-Template (v4) zufriedenstellend!
Hinzu gekommen ist noch eine Verschiebung der Top-Navileiste, damit der Eck-Button keine Links verdeckt!
Die X-Button werden jetzt auch ausgeblendet, wenn keine Verlinkungen im Plugin "Ecke 7 Links" eingetragen sind.
Man kann dann das Video für sich alle ansehen!

Nachtrag:

  • Habe eine kleine Einschaltverzögerung für das Video hinzugefügt!
  • Beiträge nochmals überarbeitet!
  • Neu! Alle Versionen funktionieren jetzt in allen Templates & Mobil !

Nochmal besten Dank für die Unterstützung und Fehlersuche!
Wolfgang

ichwersonst und Hans58 finden das Top!

Antworten

Taschenrechner im HTML-Format! � � Xobor-Spoiler mit Hinweis

�hnliche Themen

Antworten

Letzter Beitrag

Aktive Links in der Fußleiste mit Hintergrundfarbe versehen oder ausblenden - Teil 1-2
Erstellt im Forum Das neue Template Xobor (v6) von Wolfgang 1 18.04.2023 16:57
Wolfgang • Zugriffe: 187

Xobor-Plugin "Bannerwechsel" - Zähler für Bannerklicks
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Kipper-Spedition

22.06.2023 11:24
von

Kipper-Spedition • Zugriffe: 267

Tuning für das Plugin Xobor Lightbox (Diashow) - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

02.07.2021 19:36
von

Wolfgang • Zugriffe: 862

Upload-Fenster und Upload-Links optisch anpassen (v1-4)!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.05.2023 11:38
von

Wolfgang • Zugriffe: 943

Login-Leiste im Gaia und Portal-Box "Userinfo" modifizieren - Teil 1+2!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

12.01.2020 23:12
von

Wolfgang • Zugriffe: 2292

Forum-Plugin: \'Globale Nachrichten\' formatieren!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

07.08.2016 14:53
von

Wolfgang • Zugriffe: 542

Xobor Plugins erstellen, versenden und bearbeiten!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

09.12.2019 22:11
von

mike48 • Zugriffe: 1658

Forum-Plugin: 'Letzten Beitrag anzeigen' - Mit Vorschau-Erweiterung!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

19.11.2023 13:01
von

Gabriella • Zugriffe: 1189

Make Up für das PlugIn "Sildes & Stripes"
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 3 11.06.2020 17:55
Wolfgang • Zugriffe: 1426

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 85 €

103%