Floating Action Button
Autore: Frank D.Da das Programm solche Floating Buttons - Social-Butons nicht hergibt, was aber schön wäre, hab ich heute mal selbst Hand angelegt und was gebastelt. Wer es braucht, wem es gefällt, runterladen, einbauen - fertig. Wie es aussieht, sieht man an dem Bild hier unten.
Sollen die Buttons auf jeder Seite erscheinen, am besten in den Footer, so hab ich es gemacht. Wenn sie nur auf bestimmten Seiten erscheinen sollen, dann eben in die entsprechende Seite.
1. Auf dem Server ein Verzeichnis erstellen namens floating und den Inhalt der angehängte zip Datei dort hinein.
2. Im Programm ein HTML Objekt erstellen und diesen Code rein:
<a id="sys_contact" target="_self" href="_hier_der_Link_zu_deinem_kontaktformular" title="Kontakt"> </a>
<a id="sys_facebook" target="_blank" href="_hier_dein_Link_" title="Facebook"> </a>
<a id="sys_twitter" target="_blank" href="_hier_dein_Link_" title="Twitter"> </a>
<a id="sys_google" target="_blank" href="_hier_dein_Link_" title="Google"> </a>
<a id="sys_rss" target="_blank" href="_hier_dein_Link_" title="RSS"> </a>
<a id="sys_youtube" target="_blank" href="_hier_dein_Link_" title="Youtube"> </a>
Im HTML Objekt auf Erweiterung - CSS und diesen Code reinkopieren:
#sys_contact {
display:scroll;
position:fixed;
top:250px;right:0px;
background-image: url(/floating/contact.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}
#sys_facebook {
display:scroll;
position:fixed;
top:300px;right:0px;
background-image: url(/floating/facebook.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}
#sys_twitter {
display:scroll;
position:fixed;
top:350px;right:0px;
background-image: url(/floating/twitter.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}
#sys_google {
display:scroll;
position:fixed;
top:400px;right:0px;
background-image: url(/floating/google.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}
#sys_rss {
display:scroll;
position:fixed;
top:450px;right:0px;
background-image: url(/floating/rss.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}
#sys_youtube {
display:scroll;
position:fixed;
top:500px;right:0px;
background-image: url(/floating/youtube.png);
background-position: 0px 0px;
width: 35px;
height: 35px;
text-decoration: none;
}
#sys_contact:hover, #sys_rss:hover, #sys_facebook:hover, #sys_google:hover, #sys_twitter:hover, #sys_youtube:hover {
background-position: 34px 0px;
}
Jetzt noch oben, HTML Teil die Links anpassen - fertig. Die Buttons können natürlich ersetzt werden und das ganze erweitert bzw. verkleinert werden.
Viel Spaß damit
Hi Frank,
Thank you so much for sharing Frank! I have saved and will use. Thanks again
Autore
Wer es lieber in schwarz/weiß mag und bei mouseover wird es bunt, der nimmt die Icons in diesem Anhang und muss im CSS folgendes änder:
Unter jedem sys Eintag width: 35px; height: 35px; - beides jeweils auf 40 ändern
Und im CSS ganz unten den Eintrag: background-position: 34px 0px; - auf background-position: 0px 39px; ändern.
Dann sieht es so aus wie auf dem Bild:
Viel Spaß !
Autore
Hier mal zum live ansehen: https://fdaebler.000webhostapp.com/index.php
Ja, auch schön ! Ist etwas unspektakulär.
Habe mal etwas auf einer meiner Musterseiten eingebaut. LINK
Autore
Ohja, gefallen mir auch gut. Wäre ein nette Option für künftige Versionen mit der Wahl auf spektakulär oder dezent