Merhabalar, 3-4 gündür uğraştığım blog sitesi tasarımımın sonlarına doğru yaklaşırken, hazırladığım Portfolyo sayfasında içerikleri kategorilendirip filtre ile kullanıcıya sunacak bir sistem aradım. Genel de ya tasarım olarak berbat ve düzeltmek için çok uğraş gereken şeyler ya da içerisinde aşırı derecede gereksiz şeyler barındıran filtreler buldum. Ancak hiçbirini kullanmak içime sinmedi ve kendi filtremi kendim yazarım deyip başladım. Yaklaşık 1-1.5 saat sonunda ise tam istediğim gibi bir sistemi yapıp, bitirdim. Sistem çok basit olup. Altta vereceğim kodları inceleyerek rahatlıkla anlaşılabilecek bir yapıya sahip. İndirmek linki kodların altındadır. Lütfen yorumlarınızı paylaşın ki daha fazla geliştireyim.

Not: İlk başta tıklanan filtrede active sçeneği ile belli olması lazım onu eklemeyi unutmuşum.

İndirme linki en alttadır.

Önizleme İçin Tıkla







HTML Kodlar:







    Bu filtreye ait içerik bulunamadı!



  • HTML / CSS




  • ANDROID




  • ANDROID




  • PHP




  • WORDPRESS




  • DİĞER









Css Kodlar

@import url(http://fonts.googleapis.com/css?family=Lobster|Martel+Sans:200,300,400,600,700,800,900|Play:400,700&subset=latin,latin-ext,cyrillic,cyrillic-ext);
@import url(http://fonts.googleapis.com/css?family=Comfortaa:400,300,700&subset=cyrillic-ext,latin,latin-ext);
body {
background:#ecf0f1;
}
.container {
width:75%;
height:auto;
margin:0 auto;
}

ul.afiltre{
float:left;
position:relative;
list-style:none !important;
}
ul.afiltre li{
display:inline-block;
margin-right:5px;
}

ul.afiltre li a{
color:#333;
font-family: 'Martel Sans', sans-serif;
font-weight:600;
font-size: 13px;
padding:5px 5px 2px 5px;
border-radius:2px;
background:#f6f6f6;
text-decoration:none;
color:#ABB0B7;
}
ul.afiltre li a:hover{
background:#E95D53;
color:#fff;
}
ul.itemler{
width:100%;
height:auto;
min-height:300px;
display:block;
position:relative;
margin-top:20px;
list-style:none !important;
clear:both;
}
ul.itemler li{
width:23%;
margin-right:15px;
margin-bottom:15px;
float:left;
height:290px;
background:#fff;
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.1);
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1);
box-shadow:0 1px 2px rgba(0,0,0,0.1);
overflow:hidden;
position:relative;
}
ul.itemler li:nth-child(4n+1){
margin-right:0;
}
ul.itemler li p{
text-align:center;
font-family: 'Comfortaa', cursive;
padding:50% 0 0 0;
}

.afiltre-bos{
font-family: 'Comfortaa', cursive;
font-size:1.3em !important;
font-weight:300;
padding-top:0;
color:#333;
display:none;
}


jQuery Kodlar


<script></script>
<script>
$(function() {
$("ul.afiltre li").click(function(){
var filtre_btn = $(this).attr("data-rel");
if(filtre_btn == "all"){
$("ul.itemler li").fadeIn(0);
$(".afiltre-bos").hide();
}else{
var count = $("#item-"+filtre_btn).length;
if(count != 0){
$("ul.itemler li").fadeOut(0);
$("ul.itemler li#item-"+filtre_btn).fadeIn(0);
$(".afiltre-bos").hide();
}
else if(count == 0){
$("ul.itemler li").fadeOut(0);
$(".afiltre-bos").show();

}}});
});
</script>



Dosyayı İndirmek İçin Tıkla



Kaynak Adresi: http://taluttasgiran.com.tr/afilter-jquery-icerik-filtresi/