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.

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:

Die E-Mail-Adresse oder die Kontaktseite
DeinYoutube-Konto, damit Du Deine Projekte zeigen kannst
Google Maps, um eine oder Deine Adresse anzuzeigen
Deine Facebook-Seite
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. -->

Vor dem </HEAD> Tag

Code für den <BODY> Bereich

<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>

Vor dem </BODY> Tag

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 «