Sol tarafta sabit duran sosyal medya ikonları

Sol

Marco Biedermann  tarafından hazırlanmış  bir css3 menü örneği.  Menü  örneği  sayfanın sağ tarafında  sabit  duran ve sayfa  ile beraber  aşağı  yukarı çıkan özelliğe  sahiptir.  Mouse  ile  menü  ikonları  üzerinde gezdiğinizde  menü başlığı  tooltip  şeklinde  sağ tarafta  açılıyor.  Her ne kadar  sosyal  ağ adresleri  için hazırlanmış olsa  bile  sitenizdeki kategorileri  bile  eklemeniz  için çok uygun bir menü örneğidir. Her link farklı  renklerden oluştuğu için üçten fazla link  eklemek isterseniz  eğer  css  dosyası üzerinde bir  düzenleme yaparak sınıfları çoğaltmanız gerekiyor.

 

Css : 

@charset "utf-8";
/* CSS Document */

/* ---------- ENTYPO ---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
	font-family: 'entypo', sans-serif;
}

/* ---------- GENERAL ---------- */

body {
	background: #fdfdfd;
	color: #121212;
	font: 14px/1.5em "Open Sans", sans-serif;
	margin: 0;
}

a { text-decoration: none; }

h1 {
	font: bold 36px/1.5em "Open Sans", sans-serif; 
	margin-bottom: 21px;
}

p {
	margin-bottom: 1em;
	text-align: justify;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------- CLASSES ---------- */

.container {
	margin: 50px auto;
	width: 680px;
}

/* ---------- Social Sidebar ---------- */

#social-sidebar {
	left: 0;
	margin-top: -75px; /* (li * a:width) / -2 */
	position: fixed;
	top: 50%;
}

#social-sidebar li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar li:last-child a { border-radius: 0 0 5px 0; }

#social-sidebar a {
	background: #121212;
	color: #fff;
	display: block;
	height: 50px;
	font-size: 18px;
	line-height: 50px;
	position: relative;
	text-align: center;
	width: 50px;
}

#social-sidebar a:hover span {
	left: 130%;
	opacity: 1;
}

#social-sidebar a span {
	border-radius: 3px;
	line-height: 24px;
	left: -100%;
	margin-top: -16px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	padding: 4px 8px;
	position: absolute;
	-webkit-transition: opacity .3s, left .4s;
	-moz-transition: opacity .3s, left .4s;
	-ms-transition: opacity .3s, left .4s;
	-o-transition: opacity .3s, left .4s;
	transition: opacity .3s, left .4s;
	top: 50%;
	z-index: -1;
}

#social-sidebar a span:before {
	content: "";
	display: block;
	height: 8px;
	left: -4px;
	margin-top: -4px;
	position: absolute;
	top: 50%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 8px;
	z-index: -2;
}

#social-sidebar a[class*="twitter"]:hover,
#social-sidebar a[class*="twitter"] span,
#social-sidebar a[class*="twitter"] span:before { background: #00aced; }

#social-sidebar a[class*="gplus-circled"]:hover,
#social-sidebar a[class*="gplus-circled"] span,
#social-sidebar a[class*="gplus-circled"] span:before { background:#FF0000; }

#social-sidebar a[class*="facebook"]:hover,
#social-sidebar a[class*="facebook"] span,
#social-sidebar a[class*="facebook"] span:before { background: #1769ff; }

 

Html : 

<div class="container">

		<nav id="social-sidebar">
			<ul>
				<li>
					<a href="https://twitter.com/blog_mintik" class="entypo-twitter" target="_blank">
						<span>Twitter</span>
					</a>
				</li>
				<li>
					<a href="https://plus.google.com/u/0/b/105961267020169631117/" class="entypo-gplus-circled" target="_blank">
						<span>Google</span>
					</a>
				</li>
				<li>
					<a href="https://www.facebook.com/mintiik" class="entypo-facebook" target="_blank">
						<span>Facebook</span>
					</a>
				</li>
			</ul>
		</nav>

Sayfa içeriği  bu bölümde olacak

</div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2020-06-06 tarihinde yayınlandı,Toplam 3224 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...