اضافة الدائرة المنبثقة لمواقع التواصل الاجتماعيالاضافة حصرية فقط في مدونة ويب نايت من تصميمي
معاينة الاداة (اضافة الدائرة المنبثقة لمواقع التواصل الاجتماعي)
كيفية تركيب الاضافة
- قم فقط بنسخ الكود التالي وضعه في اي مكان يعجبك في القالب او كاضافة
- وقم بتغيير ما هو ملون فقط
<style>
.menu {
position: relative;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
margin: 7em 0;
}
.trigger {
background: none;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
border: none;
outline: none;
text-align: center;
font-size: 1.5em;
color: #fff;
position: relative;
z-index: 1000;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
.trigger span {
opacity: 0;
position: absolute;
}
.menu__items {
position: absolute;
width: 100%;
height: 100%;
top: 0;
padding: 0;
margin: 0;
list-style-type: none;
z-index: 5;
}
.menu__items li {
width: 80%;
height: 80%;
top: 10%;
left: 10%;
line-height: 80px;
font-size: 1.5em;
position: absolute;
z-index: -1;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale3d(0.5, 0.5, 1);
transform: scale3d(0.5, 0.5, 1);
-webkit-transition: -webkit-transform 0.25s ease-out;
transition: transform 0.25s ease-out;
}
.menu.menu--open .menu__items li:first-child {
-webkit-transform: scale3d(1, 1, 1) translate3d(0, -160px, 0);
transform: scale3d(1, 1, 1) translate3d(0, -160px, 0);
}
.menu.menu--open .menu__items li:nth-child(2) {
-webkit-transform: scale3d(1, 1, 1) translate3d(113.14px, -113.14px, 0);
transform: scale3d(1, 1, 1) translate3d(113.14px, -113.14px, 0);
}
.menu.menu--open .menu__items li:nth-child(3) {
-webkit-transform: scale3d(1, 1, 1) translate3d(160px, 0, 0);
transform: scale3d(1, 1, 1) translate3d(160px, 0, 0);
}
.menu.menu--open .menu__items li:nth-child(4) {
-webkit-transform: scale3d(1, 1, 1) translate3d(113.14px, 113.14px, 0);
transform: scale3d(1, 1, 1) translate3d(113.14px, 113.14px, 0);
}
.menu.menu--open .menu__items li:nth-child(5) {
-webkit-transform: scale3d(1, 1, 1) translate3d(0, 160px, 0);
transform: scale3d(1, 1, 1) translate3d(0, 160px, 0);
}
.menu.menu--open .menu__items li:nth-child(6) {
-webkit-transform: scale3d(1, 1, 1) translate3d(-113.14px, 113.14px, 0);
transform: scale3d(1, 1, 1) translate3d(-113.14px, 113.14px, 0);
}
.menu.menu--open .menu__items li:nth-child(7) {
-webkit-transform: scale3d(1, 1, 1) translate3d(-160px, 0, 0);
transform: scale3d(1, 1, 1) translate3d(-160px, 0, 0);
}
.menu.menu--open .menu__items li:nth-child(8) {
-webkit-transform: scale3d(1, 1, 1) translate3d(-113.14px, -113.14px, 0);
transform: scale3d(1, 1, 1) translate3d(-113.14px, -113.14px, 0);
}
.menu__items li a {
display: block;
background: #2E3535;
color: #DA7071;
border-radius: 50%;
outline: none;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids */
}
.menu__items li a:hover,
.menu__items li a:focus {
background: #272c2c;
color: #777;
}
.menu__items li a span {
position: absolute;
color: transparent;
top: 100%;
pointer-events: none;
}
.morph-shape {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 100;
}
.morph-shape svg path {
fill: #DA7071;
-webkit-transition: fill 0.3s;
transition: fill 0.3s;
}
.menu--open .morph-shape svg path {
fill: #777;
}
@media screen and (max-width: 40em) {
.menu__items {
-webkit-transform: scale3d(0.8,0.8,1);
transform: scale3d(0.8,0.8,1);
}
}
@import url(http://fonts.googleapis.com/css?family=Raleway:400,600,700);
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
a {
color: #B24E51;
text-decoration: none;
}
a:hover,
a:focus {
color: #afb3b8;
outline: none;
}
.theme-2 { background: #434d55; }
.theme-2 a { color: #4991C2; }
.theme-2 a:hover, .theme-2 a:focus { color: #74777b; }
.theme-3 { background: #e4eaea; color: #74777b;}
.theme-3 a { color: #e35583; }
.theme-3 a:hover, .theme-3 a:focus { color: #74777b; }
.theme-4 a { color: #6EAE8C; }
.theme-4 a:hover, .theme-4 a:focus { color: #74777b; }
.theme-5 { background: #e4eaea; color: #74777b;}
.theme-5 a { color: #EA8686; }
.theme-5 a:hover, .theme-5 a:focus { color: #74777b; }
.theme-6 a { color: #CFB75C; }
.theme-6 a:hover, .theme-6 a:focus { color: #74777b; }
.theme-7 { background: #E8E8E8; color: #FF72AD;}
.theme-7 a { color: #415c71; }
.theme-7 a:hover, .theme-7 a:focus { color: #509EDB; }
.theme-8 a { color: #938edc; }
.theme-9 { background: #3D4444; color: #DADADA;}
.theme-9 a { color: #DA7071; }
.theme-9 a:hover, .theme-9 a:focus { color: #74777b; }
.content {
min-height: 250px;
margin: 0 auto;
padding-bottom: 2em;
}
.content--tiny {
max-width: 800px;
}
.container {
text-align: center;
padding: 5.25em 0.5em 0;
}
/* Header */
.codrops-header {
padding: 0;
letter-spacing: -1px;
}
.codrops-header h1 {
font-weight: 800;
font-size: 3.5em;
line-height: 1;
margin: 0;
}
.codrops-header h1 span {
display: block;
font-size: 35%;
letter-spacing: 1px;
padding-top: 0.75em;
color: #afb3b8;
}
/* To Navigation Style */
.codrops-links {
text-transform: uppercase;
font-weight: 300;
font-size: 1.25em;
}
.codrops-links a {
display: inline-block;
padding: 0.5em 0;
margin: 0.5em;
text-decoration: none;
letter-spacing: 1px;
}
.codrops-icon span {
display: none;
}
.codrops-icon:before {
margin: 0 4px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'codropsicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
content: "\e001";
}
.codrops-icon-prev:before {
content: "\e004";
}
/* Codrops demo links */
.codrops-demos {
margin: 3em auto;
max-width: 700px;
}
.codrops-demos a {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0.25em 0;
margin: 5px 10px;
display: inline-block;
font-size: 0.85em;
}
.codrops-demos a.current-demo {
opacity: 0.5;
}
/* Related demos */
.related {
text-align: center;
padding: 10em 0;
clear: both;
font-weight: bold;
}
.related > a {
width: 200px;
display: inline-block;
text-align: center;
margin: 1em;
font-size: 0.8em;
vertical-align: top;
}
.related a img {
max-width: 100%;
opacity: 0.8;
}
.related a:hover img,
.related a:active img {
opacity: 1;
}
.related a h3 {
margin: 0;
font-size: ;
padding: 0.5em 0 0.3em;
max-width: 200px;
text-align: left;
}
@media screen and (max-width: 30em) {
.codrops-header h1 {
font-size: 3em;
}
}
body #cdawrap {
background: transparent;
top: 15px;
}
body.theme-2 #cdawrap a,
body.theme-9 #cdawrap a {
color: #ddd !important;
}
</style>
<center>
<nav id="menu" class="menu">
<span class="morph-shape" data-morph-active="M251,150c0,93.5-29.203,143-101,143S49,243.5,49,150C49,52.5,78.203,7,150,7S251,51.5,251,150z">
<svg width="100%" height="100%" viewBox="0 0 300 300" preserveAspectRatio="none">
<path d="M281,150c0,71.797-59.203,131-131,131S19,221.797,19,150S78.203,19,150,19S281,78.203,281,150z"/>
</svg>
</span>
<button class="trigger"><i class="fa fa-fw fa-share"></i><span>Share This</span></button>
<ul class="menu__items">
<li><a href="https://www.facebook.com/"><i class="fa fa-fw fa-facebook"></i><span>Codrops on Facebook</span></a></li>
<li><a href="http://feeds2.feedburner.com/"><i class="fa fa-fw fa-rss"></i><span>Codrops RSS Feed</span></a></li>
<li><a href="http://www.twitter.com/"><i class="fa fa-fw fa-twitter"></i><span>Codrops on Twitter</span></a></li>
<li><a href="https://plus.google.com/"><i class="fa fa-fw fa-google-plus"></i><span>Codrops on Google+</span></a></li>
<li><a href="https://github.com/"><i class="fa fa-fw fa-github"></i><span>Codrops on GitHub</span></a></li>
<li><a href="http://www.pinterest.com/"><i class="fa fa-fw fa-pinterest"></i><span>Codrops on Pinterest</span></a></li>
<li><a href="https://www.tumblr.com/"><i class="fa fa-fw fa-tumblr"></i><span>Codrops on Tumblr</span></a></li>
<li><a href="http://feedburner.google.com/"><i class="fa fa-fw fa-envelope"></i><span>Codrops RSS as Mail</span></a></li>
</ul>
</nav>
</center>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"></link>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://tympanus.net/Development/ElasticSVGElements/js/classie.js"></script>
<script src="http://tympanus.net/Development/ElasticSVGElements/js/snap.svg-min.js"></script>
<script>
(function() {
function SVGMenu( el, options ) {
this.el = el;
this.init();
}
SVGMenu.prototype.init = function() {
this.trigger = this.el.querySelector( 'button.trigger' );
this.shapeEl = this.el.querySelector( 'span.morph-shape' );
var s = Snap( this.shapeEl.querySelector( 'svg' ) );
this.pathEl = s.select( 'path' );
this.paths = {
reset : this.pathEl.attr( 'd' ),
active : this.shapeEl.getAttribute( 'data-morph-active' )
};
this.isOpen = false;
this.initEvents();
};
SVGMenu.prototype.initEvents = function() {
this.trigger.addEventListener( 'click', this.toggle.bind(this) );
};
SVGMenu.prototype.toggle = function() {
var self = this;
if( this.isOpen ) {
classie.remove( this.el, 'menu--open' );
}
else {
setTimeout( function() { classie.add( self.el, 'menu--open' ); }, 175 );
}
this.pathEl.stop().animate( { 'path' : this.paths.active }, 150, mina.easein, function() {
self.pathEl.stop().animate( { 'path' : self.paths.reset }, 800, mina.elastic );
} );
this.isOpen = !this.isOpen;
};
new SVGMenu( document.getElementById( 'menu' ) );
})();
</script>
لاتنسى ايضا دعمنا للمزيد
