Contact & Social Widget - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App

Besucher Statistik
» 1 Online
» 49 Heute
» 80 Gestern
» 446 Woche
» 344 Monat
» 41316 Jahr
» 327230 Gesamt
Record: 2467 (26.10.2021)
Gesamt Downloads:
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
Downloads:
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');
}
});
});
Feedbacks zu ""

Keine Kommentare gefunden.

Bitte Dein Feedback

Du wirst als User bei Deinem ersten Kommentar automatisch registriert und musst dies noch bestätigen.
Erstellen Dir ein Konto, damit Deine Kommentare dann ohne Bestätigung veröffentlicht werden.

Login | Registrierung


          CAPTCHA
          Vielen Dank für Dein Feedback.
          Logo Host Europe
          Button Spenden

          © 2009 - 2021

          Hosting by
          Zurück zum Seiteninhalt