2014/11/18

【jQuery】メニューを円形におしゃれに表示!!『PopCircle』の使い方

【jQuery】メニューを円形におしゃれに表示!!『PopCircle』の使い方

円をクリックすることでメニューが飛び出してくるオシャレでカッコイイjQueryプラグイン『PopCircle』の使い方を紹介します.

目次

入手方法

https://github.com/dineshhv/popcircleにアクセスし,右側のメニュー内にある『Download ZIP』をクリックし,ダウンロードします.

設置方法

ダウンロードしたZIPファイルを解凍し,フォルダ内のjsファイルをjQuery本体とともに読み込みます.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.popcircle.1.0.js"></script>

次に,以下のようにHTML要素を構成します.

<div class="box">
    <div class="trigger" id="circle_btn"></div>
    <div class="popcircle">
      <ul id="pops">
        <li><a href=""><img src="images/blue.png"></a></li>
        <li><a href=""><img src="images/red.png"></a></li>
        <li><a href=""><img src="images/blue.png"></a></li>
        <li><a href=""><img src="images/red.png"></a></li>
        <li><a href=""><img src="images/blue.png"></a></li>
      </ul>
    </div>
</div>

さらに,このHTML要素にスタイルを指定します.

.box{ 
    width:500px;
     height: 500px;
     float:left;
}
.trigger{ 
    width:255px;
    height: 255px;
    position:relative;
    z-index: 10;
    left:110px;
    top:110px;
     background-image:url(images/big_round.png); cursor: pointer;
}

.popcircle{ 
     position:relative;
     z-index: 9;
     width:500px;
     height:500px;
     left:0px;
     top:-250px;
}
.popcircle ul{
     list-style:none;
     padding:0px;
     margin: 0px;
     height: auto;
     cursor: pointer;
}
.popcircle ul li{
     top: 187.5px;
     left: 187.5px;
     height: 100px;
     width: 100px;
     position: absolute;
}

最後に,JavaScriptで動作を記述します.いくつかオプションを指定して動作を変更することもできます.

$('.trigger').click(function(e) {
    e.preventDefault();
    $.popcircle('#pops', {
	spacing : '10px',// 円周からの距離
	type : 'quad', // 円周のどの部分に表示するか(full,half,quad)
	offset : 1.95, // 始点(0~7,小数による指定も可)
	ease : 'easeOutElastic',// easingエフェクトの種類
	time : 'slow' // 表示までの速度(slow,fast,ミリ秒による指定も可)
    });
});

サンプル

http://jspopcircle.com/のページ内中盤辺りにサンプルがあります.

まとめ

簡単に実装できるうえ,見た目も動きもポップなデザインに使えそうなメニューなので,是非使用してみてください.