Contact & Social Widget - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Contact & Social Widget

Scripte > Button Navigation
Ein Contact & Social Widget für die Webseiten

Füge Deiner Website mit dem Kontakt- und Sozial-Widget einen schicken Schnellkontakt-Button hinzu. Die Schaltfläche können auf jeder Seite einer Website platziert werden, um so den Besuchern der Website einen schnellen Zugriff auf Deine Kontaktdaten und Social-Media-Seiten auf stilvolle Weise und ohne Verlassen der aktuellen Seite ermöglichen. Die Schaltflächen können in der CSS-Datei "style.css" der Homepage farblich angepasst werden. Die Links und Button-Symbole im HTML-Code selbst.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>.....</head> und den HTML-Code am besten vor dem schließenden /BODY <body>.....</body> der aufrufende Datei einfügen.
Eine demo.html ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.
Aufruf: "http://www.domain.tld/demo.html". Diese kann aber auch durch einen Doppelklick ausgeführt werden.
Download Button
x runter geladen
Auf der linken Seite der Webseite werden ein kleiner Kontakt und eine sozialen Schaltfläche angezeigt:
Einmal geklickt, öffnet es sich auf originelle Weise und zeigt Links zu:
  1. Die E-Mail-Adresse oder die Kontaktseite
  2. DeinYoutube-Konto, damit Du Deine Projekte zeigen kannst
  3. Google Maps, um eine oder Deine Adresse anzuzeigen
  4. Deine Facebook-Seite
  5. Deine Twitter-Seite

Die Schaltflächen sind im HTML-Code anpassbar, da die Symbole mit Font Awesome erstellt werden.
Hierzu wird z. B. der Codename "Twitter"  <i class="fa fa-twitter">
mit dem Namen einer anderen Schaltfläche ausgetauscht.
Leider funktionieren nicht alle Symbole, einfach probieren.
Code für den <HEAD> Bereich
<!-- Hinweis:
Wer jQuery ohnehin auf seiner Seite eingebunden hat, braucht die erste Zeile des folgenden Codes nicht mehr. -->
<script src="wsX5Obj/Obj117_0/jquery-1.11.1.min.js"></script>
<script src="wsX5Obj/Obj117_0/functions.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="wsX5Obj/Obj117_0/style.css" type="text/css" media="all" />
Code für den <BODY> Bereich
<div class="vertical-nav-holder">
<a href="#" class="vertical-nav-btn"><i class="fa fa-share-alt"></i></a>
<div class="vertical-nav">
<ul>
<li><a href="http://www.x5forum.home-wiekau.de/wsx5sys07.php"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://www.youtube.com/watch?v=9C9WgqN9ynE" target="_blank"><i class="fa fa-youtube"></i></a></li>
<li><a href="https://goo.gl/maps/SERZZnst7XzR4ChK6" target="_blank"><i class="fa fa-map-marker"></i></a></li>
<li><a href="https://www.facebook.com/x5forum" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com" target="_blank"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
<div class="vertical-nav-overlay"></div>
Code Datei "style.css"
* { padding: 0;
margin: 0;
outline: none!important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.vertical-nav,
.vertical-nav-btn { -webkit-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; }
.vertical-nav-btn {
width: 104px;
height: 104px;
background: #ff9947;
border-radius: 50%;
z-index: 8;
font-size: 30px;
line-height: 30px;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -42px;
margin-top: -52px;
color: #fff;
text-align: center;
padding: 37px 0 0 20px;
-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
box-shadow: 0 0 10px 0 rgba(0,0,0,0.4);
}
.vertical-nav-btn:hover { background: #eb8d41; }
.vertical-nav-btn.active:hover,
.vertical-nav-btn.active {
background: #fff;
color: #484b4c;  
-webkit-box-shadow: 0 0 0px 0 rgba(0,0,0,0);
box-shadow: 0 0 0px 0 rgba(0,0,0,0);
}
.vertical-nav-holder {
max-width: 414px;
max-height: 414px;
position: fixed;
top: 70%;
left: -200px;
margin-top: -241px;
z-index: 999;
}
.vertical-nav {
overflow: hidden;
border-radius: 50%;
background: #ec9419;
position: relative;
width: 410px;
height: 410px;
margin: 2px;
-webkit-box-shadow: 0 0 20px 0 rgba(0,0,0,0.4);
box-shadow: 0 0 20px 0 rgba(0,0,0,0.4);
z-index: 3;  transform: scale(0);
}
.vertical-nav.active { transform: scale(1); }
.vertical-nav li {
font-size: 1.5em;
height: 10em;
left: 50%;
margin-left: -10em;
overflow: hidden;
position: absolute;
top: -34px;
transform-origin: 100% 100% 0;
transition: border 0.3s ease 0s;
width: 10em;
}
.vertical-nav li a {
border-radius: 50%;
bottom: -7.25em;
color: #fff;
display: block;
font-size: 1.18em;
height: 14.5em;
padding-top: 1.8em;
position: absolute;
right: -7.25em;
text-align: center;
text-decoration: none;
transform: skew(-50deg) rotate(-70deg) scale(1);
transition: opacity 0.3s ease 0s, color 0.3s ease 0s;
width: 14.5em;
background-color: #ffa247;
}
.vertical-nav li .fa { font-size: 1.1em; opacity: 0.7; display: inline-block; }
.vertical-nav li:first-child { transform: rotate(80deg) skew(50deg); }
.vertical-nav li:nth-child(2) { transform: rotate(120deg) skew(50deg); }
.vertical-nav li:nth-child(3) { transform: rotate(160deg) skew(50deg); }
.vertical-nav li:nth-child(4) { transform: rotate(200deg) skew(50deg); }
.vertical-nav li:nth-child(5) { transform: rotate(240deg) skew(50deg); }
.vertical-nav li:nth-child(2n+1) a { background-color: #ff9947; }
.vertical-nav li a:hover { background-color: #f48828; }
.vertical-nav-overlay {
background-color: rgba(0, 0, 0, 0.6);
bottom: 0;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
transition: all 0.3s ease 0s;
visibility: hidden;
width: 100%;
z-index: 2;
}
.vertical-nav-overlay.active { opacity: 1; visibility: visible; }
Code Datei "functions.js"
$(function(){
$('.vertical-nav-btn').click(function(){
$(this).toggleClass('active');
$('.vertical-nav').toggleClass('active');
$('.vertical-nav-overlay').toggleClass('active');
return false;
})
$(document).mouseup(function (e){
var container = $(".vertical-nav-btn");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.removeClass('active');
$('.vertical-nav-overlay').removeClass('active');
$('.vertical-nav').removeClass('active');
}
});
});

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt