Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 80a49d85b1
Fetching contributors…

Cannot retrieve contributors at this time

100 lines (91 sloc) 3.206 kb
<!DOCTYPE html>
<html>
<head>
<title>Path Menu using jquery and CSS3 by Nikesh Hayaran</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.menu.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
</head>
<body>
<div class='content'>
<h2>Radical Menu (like Path menu ) using jquery and CSS3 </h2>
<div class='demo-container'>
<div class='input-form'>
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="s_angle">Start Angle</label>
<div class="controls">
<div class='input-append'>
<input type="text" class="input-small" id='s_angle' required placeholder="Enter a Angle" pattern="[0-9]*" value='0'>
<span class="add-on">deg</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="diff_angle">Displacement Angle</label>
<div class="controls">
<div class='input-append'>
<input type="text" class="input-small" id='diff_angle' required placeholder="Enter a Angle" pattern="[0-9]*" value='90'>
<span class="add-on">deg</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="radius">Radius Of Circle</label>
<div class="controls">
<div class='input-append'>
<input type="text" class="input-small" id='radius' required placeholder="Enter a Radius" pattern="[0-9]*" value='100'>
<span class="add-on">deg</span>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="btn" class='btn btn-small ' id='submit_button'><i class="icon-refresh"></i> Refresh</a></div>
</div>
</div>
</fieldset>
</form>
</div>
<div class='demo'>
<p id='info'>Updated..</p>
<div id='outer_container' class="outer_container" >
<a class="menu_button" href="#" title="Toggle"><span>Menu Toggle</span></a>
<ul class="menu_option">
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
<li><a href="#"><span>Item</span></a></li>
</ul>
</div>
</div>
<div class='drag'>* Draggable Element</div>
<div class='clearfix'></div>
</div>
<h5>* Please read README.md file for explanation.</h5>
</div>
<script>
function PieMenuInit(){
$('#outer_container').RadicalMenu({
'starting_angel':$('#s_angle').val(),
'angel_difference' : $('#diff_angle').val(),
'radius':$('#radius').val(),
});
}
$(function() {
$("#submit_button").click(function() {reset(); });
$( "#outer_container" ).draggable();
PieMenuInit();
});
function reset(){
if($(".menu_button").hasClass('btn-rotate'))
$(".menu_button").trigger('click');
$("#info").fadeIn("slow").fadeOut("slow");
PieMenuInit();
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.