GUISE KIT

iconateの使い方がイマイチわからなかったので備忘録

最近良く見る「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;
}
}
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”jAokpy” default_tab=”html,result” user=”tikusieg”]See the Pen iconate & navigation by tikusieg (@tikusieg) on CodePen.[/codepen_embed]