Mybb Açılır Kapanır Sosyal Ağlar

[Enes Bayraktar]

Merhaba arkadaşlar bu gece @Hatake arkadaşımızın konusunda attığım yorumdanda söz verdiğim gibi buyrun açılır kapanır sosyal ağ gelin kuruluma geçelim..

HTML Kodları

Kod: Tümünü Seç Tümünü Kopyala

<div class="d10-social">
 <ul>
   <li><a href="#" class="d10-hide"><i class="blue ote ion-social-twitter-outline"></i></a></li>
   <li><a href="#" class="d10-hide"><i class="red ote ion-social-youtube"></i></a></li>
   <li><a href="#" class="d10-hide"><i class="blue ote ion-social-facebook-outline"></i></a></li>
   <li><a href="#" class="d10-trigger"><i class="orange ion-ios-redo-outline trigger"></i></a></li>
 </ul>
</div>

CSS Kodları

Kod: Tümünü Seç Tümünü Kopyala

.d10-social {position:fixed; bottom:5px; right:20px; display:inline-block;}
.d10-social ul {list-style:none;}
.d10-social ul li {list-style:none; margin-top:10px;}

.d10-social ul li a {display:inline-block; color:#fff; border-radius:200px; width:55px; height:55px; background:rgba(0,0,0,0.2); text-align:center;}

.d10-social ul li a i.red {background:#F44336 !important;}
.d10-social ul li a i.blue {background:#2196F3 !important;}
.d10-social ul li a i.purple {background:#9C27B0 !important;}
.d10-social ul li a i.orange {background:#FF5722 !important;}
.d10-social ul li a i.green {background:#2E7D32 !important;}

.d10-social ul li a i.ote {line-height:42.5px;}

.d10-social ul li a i {width:40px; height:40px; display:inline-block; position:relative; line-height:40px; font-size:1.2em; top:7.5px; left:-0.5px; border-radius:999px;}

Jquery Kodları

Kod: Tümünü Seç Tümünü Kopyala

$(".d10-hide").hide();

$(".d10-trigger").click(function(){
 $(".d10-social").toggleClass("d10-collapse");
  if($(".d10-social").hasClass("d10-collapse")) {
   $(".d10-hide").fadeIn();
   $(".trigger").removeClass("ion-ios-redo-outline");
   $(".trigger").addClass("ion-ios-close-empty");
   $(".trigger").css("font-size","1.4em");
   $(".trigger").css("line-height","42px");
}else {
   $(".d10-hide").fadeOut();
   $(".trigger").addClass("ion-ios-redo-outline");
   $(".trigger").removeClass("ion-ios-close-empty");
}
});

Headerİnclude Eklenecekler

Kod: Tümünü Seç Tümünü Kopyala

<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Demo

Kod: Tümünü Seç Tümünü Kopyala

http://codepen.io/coder-rj/pen/bZxrav

Özellikler
- 5 Renk Seçeneği (<i> taglarına sırasıyla red - blue - purple - green - orange class'larını atarsanız renkleri değişmiş olur yani siz belirlersiniz belki kırmızı yerine mavi gibi..)
- Position:Fixed (Her zaman sayfanın alt tarafında aşşagıya 5px sağdan 20px)

Güle Güle Kullanın :)

@Hatake
@ScarypoweR

[Hatake]

Eline sağlık gayet hoş :D

[LetMeRockYou]

Kardeşim Nereye Ekleyecem Bunları ? :)

[Enes Bayraktar]

Konuda anlatım mevcuttur mybb temalar şablonlar kısmından yapıcaksınız ayrıntılı bilgi forumdaki çoğu konuda mevcut..

[DieseL]

Emeğinize Sağlık Güzel Bir Çalışma.