Create A Path-Like Circle Menu with jQuery and CSS3 - Path Buttons

Path Buttons is a super easy yet cool jQuery menu script that creates Path.com style circle menu buttons with rotation effects using CSS3 transforms. Click the '+' icon button to expand the circle menu.

See also:

• jQuery Plugin For Path-like Wheel Menu Button - Wheel Menu
• Customizable Circle Menu Plugin with jQuery
• Simple Configurable Path Menu with jQuery & CSS3 - Pie Menu

How to use it:

1. Include the rnecessary jQuery javascript library in the document.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Create a circle menu following the Html structure like this.

<div id="add-moment">
<a href="#" id="plus-ex" class="plus"><img src="img/plus.png" width="104" height="104" alt="Add Moment"></a>
<ul id="moment-buttons">
<li class="icon-picture"><a href="#"><img src="img/icon-picture.png" width="84" height="84" alt="Picture"></a></li>
<li class="icon-people"><a href="#"><img src="img/icon-people.png" width="84" height="84" alt="People"></a></li>
<li class="icon-place"><a href="#"><img src="img/icon-place.png" width="84" height="84" alt="Place"></a></li>
<li class="icon-music"><a href="#"><img src="img/icon-music.png" width="84" height="84" alt="Music"></a></li>
<li class="icon-thought"><a href="#"><img src="img/icon-thought.png" width="84" height="84" alt="Thought"></a></li>
<li class="icon-sleep"><a href="#"><img src="img/icon-sleep.png" width="84" height="84" alt="Sleep"></a></li>
</ul>
</div>

3. The main CSS styles. Add the following CSS snippets into your CSS file.

#add-moment {
position: absolute;
bottom: 30px;
left: 30px;
margin: 0;
padding: 0;
width: 104px;
height: 104px;
}
#plus-ex {
position: absolute;
bottom: 0;
left: 0;
z-index: 9000;
-webkit-transition: all .3s ease;
}
#add-moment ul {
margin: 0;
padding: 0;
position: absolute;
top: 10px;
left: 10px
}
#add-moment li {
list-style: none;
position: absolute;
margin: 0;
padding: 0;
-webkit-transition: all .4s ease-in-out;
}

4. The CSS3 rules to animate the menu buttons.

.plus {
-webkit-transform: rotate(0deg);
}
.ex {
-webkit-transform: rotate(-45deg);
}
.icon-picture.out {
top: -265px;
-webkit-transform: rotate(-720deg);
}
.icon-people.out {
top: -251px;
left: 91px;
-webkit-transform: rotate(-720deg);
}
.icon-place.out {
top: -213px;
left: 167px;
-webkit-transform: rotate(-720deg);
}
.icon-music.out {
top: -153px;
left: 227px;
-webkit-transform: rotate(-720deg);
}
.icon-thought.out {
top: -77px;
left: 265px;
-webkit-transform: rotate(-720deg);
}
.icon-sleep.out {
left: 279px;
-webkit-transform: rotate(-720deg);
}

5. The jQuery script to enable the animated menu buttons.

$(function() { 
$('#plus-ex').click(function(){  
if($(this).hasClass('plus')){
$(this).removeClass('plus')
$(this).addClass('ex');
$('#moment-buttons li').addClass('out');
} else {
$(this).removeClass('ex');
$(this).addClass('plus');
$('#moment-buttons li').removeClass('out');
}
return false;
});
});

---

This awesome jQuery plugin is developed by darkdriving. For more Advanced Usages, please check the demo page or visit the official website.