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>