Info Fenster

test

Info Fenster

Wenn ihr links auf den Button "INFO" klickt öffnet das Fenster. Natürlich könnt ihr im Code alle Größen, Farben usw. anpassen.
Weil der Button in der mobilen Ansicht stören würde verrutschen wir diesen nach oben in die Navi-Leiste und lassen ihn mit scrollen. Das Fenster bekommt dabei eine neue Größe.
Alternativ könnt ihr das Fenster auch in der mobilen Ansicht ausschalten.

CSS-Code

Diesen Code per Einstellungen > CSS einfügen und anpassen.

/*****************  Knopf geschlossen *******************/
a.knopf::before {
content: 'INFO';				
padding: 0 5px 0 0;
}
a.knopf::after {
content: "»";				
font-size: 18px;
}

/*****************  Knopf geöffnet *******************/
a.active.knopf {				
left: 0;
}
a.active.knopf::before {
content: 'CLOSE';			
left: 10px;
}
a.active.knopf::after {
content: "«";				
font-size: 18px;
}
/***************** MOBILE ANSICHT *******************/
@media (max-width: 996px) {
.fenster {
position: absolute;
top: 80px;
padding: 5px 5px 5px 15px;	
width: 250px;
z-index: 22000;
 }
.fenster h3 {
margin-top: 0px;
}
a.knopf {		
position: absolute;
top: 80px;
z-index: 22001;
    }}
</style>

Quellcode markieren & kopieren

Quelltext

Diesen Code per Widget > Quelltext einfügen und anpassen.

Quellcode markieren & kopieren

CSS-Code

Diesen Code mit dem Abschnitt *MOBILE ANSICHT* im ersten Code austauschen um das Fenster ab 796px auszublenden.

Quellcode markieren & kopieren

code

INFO-FENSTER

Hier könnt ihr alles mögliche per HTML einfügen.

Zum Beispiel einen LINK.

Oder ein Bild.

TEST FÜR NORBERT

Support