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.
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=”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>
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;
}
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) + “%”;
}
Andi Wahyudi
Benar juga, tampilan blog jadi lebih atraktif. Oh ya, maaf mas mau tanya, apakah kode javascript tersebut akan mempengaruhi loading blog?
Syakir Rahman
Setiap kode pasti mempengaruhi, tapi yang ini ngga banyak
Atta
Wah, baru tahu saya kalo menu bisa di desain seperti ini, jadi terkesan unik dan atraktif
Mata Ikan
Mantap gan,, Nanti tk coba di websiteku…
karimun jawa
work gan… 😀
terima kasih banyak tutornya
kini jadi keren menu nya
Kreasikan
dicoba dulu mas, sepertinya menarik juga buat di pasang di blog
ternak ayam
sadis nih tips nya. thanks gan
jual gps tracker
keren banget… ampun deh triksnya
Mayuf
Mantap ,sangat bermanfaat gan
Freebook
Wah..keren dan unik…
Nanti akan saya coba