PieMenu

Nikesh Hayaran’ın  jQuery için hazırladığı drag  and  drop özellikli  çok  güzel  bir menü  eklentisi. Ekranda  görülen +  işaretine  tıklanınca  oval  bir  şekilde menü  düğmeleri  animasyonlu  bir şekilde  çıkıyor.

Kullanım :

Head etiketleri arasına eklenmesi gereken bölümler.

jQuery, eklenti ve  css  dosya  url  adresleri :

<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/piemenu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.menu.js"></script>
<script src="js/jquery-ui-1.8.20.custom.min.js"></script>

JavaScript :

		<script>
		function PieMenuInit(){		
			$('#outer_container').PieMenu({
				'starting_angel':$('#s_angle').val(),
				'angel_difference' : $('#diff_angle').val(),
				'radius':$('#radius').val(),
			});			
		}
		$(function() {          
			$("#submit_button").click(function() {reset(); }); 
			$( "#outer_container" ).draggable();
			PieMenuInit();

		});

		</script>

Body  etiketleri arasına eklemeniz gereken bölüm.

Html :

				<div class='demo'>
					<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>