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

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

9 Comments

  1. Benar juga, tampilan blog jadi lebih atraktif. Oh ya, maaf mas mau tanya, apakah kode javascript tersebut akan mempengaruhi loading blog?

  2. Wah, baru tahu saya kalo menu bisa di desain seperti ini, jadi terkesan unik dan atraktif

  3. Mantap gan,, Nanti tk coba di websiteku…

  4. work gan… 😀
    terima kasih banyak tutornya
    kini jadi keren menu nya

  5. dicoba dulu mas, sepertinya menarik juga buat di pasang di blog

  6. sadis nih tips nya. thanks gan

  7. keren banget… ampun deh triksnya

  8. Mantap ,sangat bermanfaat gan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *