GUISE KIT

iconateの使い方がイマイチわからなかったので備忘録
  • 2015/6/9
  • WEB

最近良く見る「iconate.js」を運用してみようとしたけどなんか色々手こずったので備忘録

※追記16/03/24
今見なおしてみたらクッソ恥ずかしい内容だったので修正

iconate

最近色んなとこで記事になっている「iconate.js」ですが
jsの紹介はしてもデモを載せたりしてるとこは少なく、実装に割りと苦戦したので自分でまとめました。

CSSとJSの読み出し

<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/iconate.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/iconate.min.js"></script>

html

<div class="spbtn"><i id="icon" class="fa fa-bars"></i></div>
<nav id="nav">
    <ul>
        <li><a href="">メニュー</a></li>
        <li><a href="">メニュー</a></li>
        <li><a href="">メニュー</a></li>
    </ul>
</nav>

body閉じ前

$(function(){
    $("#icon").click(function () {
        if($(this).hasClass('fa-bars')){
            var options = {
                from:      'fa-bars',
                to:        'fa-close',
                animation: 'rubberBand'
            };
        }else{
            var options = {
                from:      'fa-close',
                to:        'fa-bars',
                animation: 'rubberBand'
            };
        }
        iconate($(this)[0], options);
        $('#nav').slideToggle();
    });
});

hasClassには最初に表示しておくアイコンのクラスを入れます。
今回デフォは三本線なので「fa-bars」を設定

scss

.spbtn {
    width: 36px;
    height: 36px;
    i {
        font-size: 36px;
        color: $white;
        z-index: 10;
    }
}
#nav {
    position: absolute;
    top: 56px;
    display: none;
    z-index: 100;
    li {
        a {
            display: block;
            padding: 2% 15px;
            width: calc(100% - 30px);
            color: $white;
        }
    }
}

See the Pen iconate & navigation by tikusieg (@tikusieg) on CodePen.0