Menu kiểu ngăn xếp với jStackMenu
jStackMenu là widget của jQuery UI giúp chúng ta dễ dàng lấy ra phần tử (element) con của các phần tử cha ( vd : <li> trong <ul> ) để tạo nên một stack menu tuyệt đẹp
Menu được mở ra với hiệu ứng chuyển động mềm mại và dễ dàng điều khiển:
- Khi nào đóng, mở
- Hướng mở cho menu
- Kích cỡ đường vòng cung
- Thời gian để mở
jStackMenu sử dụng CSS transforms (-moz-transform) để tạo đường vòng cung vì thế các trình duyệt không hỗ trợ (IE) sẽ chỉ thấy menu mở ra theo một đường thẳng
Cách sử dụng :
Trước tiên bạn cần download các phần:
- jQuery 1.3.2
- jQuery UI 1.7.2
- Zachary Johnson’s jQuery CSS Transform
- Zachary Johnson’s jQuery Animate CSS Rotate Scale
- jStackmenu
Thêm vào phần header của file HTML
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-css-transform.js"></script>
<script type="text/javascript" src="js/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="js/jstackmenu.js"></script>
<script>
jQuery( document ).ready( function( ){
var stack = jQuery( '#stack ul' ).stackmenu( );
jQuery( '#stack .trigger' ).click( function( ){
stack.stackmenu( 'toggle' );
} );
} );
</script>Mã HTML sử dụng trong phần body
<div id="stack"> <div class="trigger"> <img src="images/heart-64x64.png" alt="share"> </div> <ul> <li><a href="http://twitter.com/"><span class="title">Twitter</span><img src="images/twitter-32x32.png" alt="Twitter"></a></li> <li><a href="http://twitter.com/"><span class="title">Twitter</span><img src="images/twitter-32x32.png" alt="Twitter"></a></li> <li><a href="http://twitter.com/"><span class="title">Twitter</span><img src="images/twitter-32x32.png" alt="Twitter"></a></li> <li><a href="http://twitter.com/"><span class="title">Twitter</span><img src="images/twitter-32x32.png" alt="Twitter"></a></li> <li><a href="http://twitter.com/"><span class="title">Twitter</span><img src="images/twitter-32x32.png" alt="Twitter"></a></li> </ul> </div>
Ngoài ra jStackMenu còn có nhiều tùy chọn, phương thức & sự kiện khác nhau cho bạn chọn , các bạn có thể vào đây để xem chi tiết hơn
