icons

by Sure Sure

HTML

<div id="filter">
<a href="javascript:void(0);" class="allitem">ALL</a> | 
<a href="javascript:void(0);" class="Sword">Sword</a> | 
<a href="javascript:void(0);" class="Lance">Lance</a> | 
<a href="javascript:void(0);" class="Bow">Bow</a> | 
<a href="javascript:void(0);" class="Rod">Rod</a>
</div>
 
<div id="filterlist">
<ul>
<li class="Sword"><a>シャム<br><img src="http://4.bp.blogspot.com/-jDeoAe68AQU/VdEG1jAD9nI/AAAAAAAAI6g/xtlaq3kWiBQ/s320/Siam-icon_.png"/></a></li>
<li class="Sword"><a>アレン<br><img src="https://4.bp.blogspot.com/-P8-aLXrPkOI/Vt_MO0j9F4I/AAAAAAAAKIE/k9yjMF5lTpQ/s320/Alen_icon.png" /></a></li>
<li class="Sword"><a>サイファー<br><img src="https://1.bp.blogspot.com/-XY8qKs7BTyQ/Vt_Mc2a2p2I/AAAAAAAAKLE/3xlrQEGgRwU/s320/Sipher_icon.png" /></a></li>
<li class="Sword"><a>ジャンヌ<br><img src="https://3.bp.blogspot.com/-bz9w8aOOoQY/Vbf9VlpFkNI/AAAAAAAAI3Q/R_Luj2uGzcs/s320/jane-icon_decorateR.png" /></a></li>
<li class="Rod"><a>心のともしろ<br><img src="https://1.bp.blogspot.com/-MqprXg_s7hs/Vbf9WTRrSNI/AAAAAAAAI3k/-QsfbgolfE8/s320/tomoshiro-icon.png" /></a></li>
<li class="Lance"><a>キティゼリカ<br><img src="https://3.bp.blogspot.com/-6RXb_2ic0s4/Vbf8487ZlqI/AAAAAAAAI2k/IzBmizRJjFY/s320/Kitty.png" /></a></li>
<li class="Sword"><a>グレン<br><img src="https://2.bp.blogspot.com/-NEiVdwA01ng/Vt_MWmF5ZgI/AAAAAAAAKJQ/a6Z6nKEV_Aw/s320/GrenR_icon.png" /></a></li>
<li class="Bow"><a>サヤ<br><img src="https://1.bp.blogspot.com/-qTI6wj5OLIo/Vt_Mb-VXRII/AAAAAAAAKK0/KRPcvLc60xw/s320/Saya_icon.png" /></a></li>
<li class="Rod"><a>エルフィ<br><img src="https://4.bp.blogspot.com/-UNx8GK8mHSE/Vt_MVosj0yI/AAAAAAAAKJE/ynustPiSq0k/s320/Elphy_icon.png" /></a></li>
<li class="Lance"><a>リヴィオ<br><img src="https://4.bp.blogspot.com/-TQzNc8xJMaA/Vt_MZkIHECI/AAAAAAAAKKI/pWXXdKsj7w4/s320/Lyvio_icon.png" /></a></li>
<li class="Sword"><a>Allen<br><img src="https://4.bp.blogspot.com/-8rPi3mLVpeM/Vt_MPSH_3NI/AAAAAAAAKIM/MKYhTeH3q0U/s320/Allen-S-icon.png" /></a></li>
<li class="Lance"><a>Cain<br><img...

CSS

/* #filter
--------------------------- */
#filter {
    margin: 0 auto;
    padding: 30px;
    width: 450px;
    text-align: center;
}

#filter a:link { text-decoration:underline; color: #000;}
#filter a:visited { text-decoration:none; color: #000;}
#filter a:active { text-decoration:none; color: #000;}
#filter a:hover { text-decoration:none; color: #000;}
 
#filter .active {
    font-weight: bold;
}
#filter a.active:link { text-decoration:none; color: #000;}
#filter a.active:visited { text-decoration:none; color: #000;}
#filter a.active:active { text-decoration:none; color: #000;}
#filter a.active:hover { text-decoration:none; color: #000;}
 
/* #filterlist
--------------------------- */
#filterlist {
    margin: 0 auto;
    width: 450px;
    text-align: left;
}
 
#filterlist ul {
    margin: 0 auto;
    padding: 0;
    width: 450px;
    text-align: left;
}
 
#filterlist ul li {
    margin: 5px;
    width: 100px;
    text-align: center;
    font-size: small;
    float: left;
    display: inline;
    overflow: hidden;
}
 
#filterlist ul li img {
    width: 100px;
    height: 100px;
    float: left;
}
 
 
/* =======================================
    ClearFixElements
======================================= */
#filterlist ul:after {
    content: ".";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}
 
#filterlist ul {
    display: inline-block;
    overflow: hidden;
}

@media only screen and (max-device-width: 480px) {
  /* デバイス幅によって以下を適用 */
	
/* #filter
--------------------------- */
#filter {
    margin: 0 auto;
    padding: 10px;
    width: 310px;
    text-align: left;
}

#filter .active {
    font-weight: bold;
}
 
#filterlist {
    margin: 0 auto;
    width: 310px;
    text-align: left;
}
 
#filterlist ul {
    margin: 0 auto;
    padding: 0 auto;
    width: 310px;
    text-align: left;
}
 
#filterlist ul li {
    margin: 0px;
    width: 30%;
    text-align: left;
    font-size: x-small;
    float: left;
    overflow: hidden;
}
...

JavaScript

$(function(){
    var $setFilter = $('#filter'),
    $setList = $('#filterlist'),
    $setFilterAll = $('.allitem');
 
    var showFade = 1000,
    showShut = 1000,
    hideFade = 1000,
    hideShut = 1000;
 
    var $setFilterBtn = $setFilter.children('a'),
    $setFilterList = $setList.children('ul').children('li'),
    $filterAllItem = $setFilterAll.attr('class');
 
    $setFilterBtn.click(function(){
        if(!($(this).hasClass('active'))){
            var filterClass = $(this).attr('class');
            $setFilterList.each(function(){
                if($(this).hasClass(filterClass)){
                    $(this).css({display:'block'});
                    $(this).find('*').stop().animate({opacity:'1'},showFade);
                    $(this).stop().animate({width:'100px'},showShut);
                } else {
                    $(this).find('*').stop().animate({opacity:'0'},hideFade);
                    $(this).stop().animate({width:'0'},hideShut,function(){
                        $(this).css({display:'none'});
                    });
                }
            });
            $setFilterBtn.removeClass('active');
            $(this).addClass('active');
        }
    });
 
    $setFilterAll.click(function(){
        $setFilterList.each(function(){
            $(this).css({display:'block'});
            $(this).find('*').stop().animate({opacity:'1'},showFade);
            $(this).stop().animate({width:'100px'},showShut);
        });
    });
    $setFilterAll.click();
});