Masukkan Email anda untuk berlangganan Devaradise. Gratis!

Cara Membuat Circle Menu (Menu Melingkar) dengan CSS & Javascript

Menu Melingkar Sederhana

Circle menu atau menu melingkar adalah salah satu elemen UI yang terkadang digunakan dalam aplikasi berbasis web. Menu melingkar mempunyai kesan yang interaktif dan dinamis sehingga sangat cocok untuk aplikasi web yang membutuhkan interativitas tinggi.

Pada tutorial kali ini, saya akan membahas teknik dasar membuat menu melingkar dengan menggunakan css dan javascript. Pada dasarnya teknik ini tidak hanya untuk membuat menu melingkar saja, tetapi juga elemen apapun yang dibutuhkan dengan gaya melingkar.

Menu Melingkar Sederhana


Seperti biasanya, sebelum kita bedah bersama kodenya, silahkan lihat dulu demonya dan download filenya lewat link di atas. Setelah itu, buka file yang di download di source code editor favorit anda, dan silahkan pahami kode-kode dibawah.

<div class=”menu-container”>
<div class=”circle-menu-box”>
<a href=”#” class=”menu-item”>
<span class=”fa fa-home”></span>
</a>
<a href=”#” class=”menu-item”>
<span class=”fa fa-tag”></span>
</a>
<a href=”#” class=”menu-item”>
<span class=”fa fa-info-circle”></span>
</a>
<a href=”#” class=”menu-item”>
<span class=”fa fa-comments”></span>
</a>
<a href=”#” class=”menu-item”>
<span class=”fa fa-folder-open”></span>
</a>
<a href=”#” class=”menu-item”>
<span class=”fa fa-group”></span>
</a>
<a href=”#” class=”menu-item”>
<span class=”fa fa-newspaper-o”></span>
</a>
<a href=”#” class=”menu-item”>
<span class=”fa fa-sitemap”></span>
</a>
</div>
</div>
codenote here
.circle-menu-box {
width:600px;
height: 600px;
position: relative;
margin:30px auto;
}
.circle-menu-box a.menu-item {
display: block;
text-decoration: none;
border-radius: 100%;
margin:20px;
text-align: center;
width:100px;
height:100px;
background-color:#fff;
color:#777;
padding:27px;
position: absolute;
font-size: 27px;transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
}

.circle-menu-box a.menu-item:hover {
transform:scale(1.5);
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
color:#fff;
background: #ff3333;
}

codenote is here
var items = document.querySelectorAll(‘.circle-menu-box a.menu-item’);
for(var i = 0, l = items.length; i < l; i++) {
items[i].style.left = (40 – 35*Math.cos(-0.5 * Math.PI – 2*(1/l)*i*Math.PI)).toFixed(4) + “%”;
items[i].style.top = (40 + 35*Math.sin(-0.5 * Math.PI – 2*(1/l)*i*Math.PI)).toFixed(4) + “%”;
}
codenote is here

10 thoughts on “Cara Membuat Circle Menu (Menu Melingkar) dengan CSS & Javascript

Tinggalkan Balasan