|
|
| Line 144: |
Line 144: |
| | </footer> | | </footer> |
| | <script src="https://2016.igem.org/Template:Hong_Kong_HKU/js/script?action=raw&ctype=text/javascript" type="text/javascript"></script> | | <script src="https://2016.igem.org/Template:Hong_Kong_HKU/js/script?action=raw&ctype=text/javascript" type="text/javascript"></script> |
| − | <script type="text/javascript">var svg = document.getElementById('menu'), | + | <script src="https://2016.igem.org/Team:Hong_Kong_HKU/JS/Nav?action=raw&ctype=text/javascript" type="text/javascript"></script> |
| − | items = svg.querySelectorAll('.item'),
| + | |
| − | trigger = document.getElementById('trigger'),
| + | |
| − | label = trigger.querySelectorAll('#label')[0],
| + | |
| − | open = true,
| + | |
| − | angle = 45;
| + | |
| − | | + | |
| − | //set up event handler | + | |
| − | trigger.addEventListener('click', toggleMenu, false);
| + | |
| − | // svg.style.pointerEvents = "none";
| + | |
| − | | + | |
| − | //toggle menu when trigger is clicked | + | |
| − | function toggleMenu(event) {
| + | |
| − | if (!event) var event = window.event;
| + | |
| − | event.stopPropagation();
| + | |
| − | open = !open;
| + | |
| − | if (open) {
| + | |
| − | var tl = new TimelineLite();
| + | |
| − | tl.to(items, 0.2, {scale:1, ease:Back.easeOut.config(4)}, 0.05);
| + | |
| − | for(var i=0; i<items.length; i++){
| + | |
| − | tl.to(items[i], 0.7, {rotation:-i*angle + "deg", ease:Bounce.easeOut}, 0.35);
| + | |
| − | }
| + | |
| − | label.innerHTML = "-";
| + | |
| − | svg.style.pointerEvents = "auto";
| + | |
| − | } else {
| + | |
| − | var tl = new TimelineLite();
| + | |
| − | for(var i=0; i<items.length; i++){
| + | |
| − | tl.to(items[i], 0.3, {rotation: 0, ease:Circ.easeOut}, 0.05);
| + | |
| − | }
| + | |
| − | tl.to(items, .3, {scale:0, ease:Back.easeIn}, 0.3);
| + | |
| − | label.innerHTML = "+";
| + | |
| − | svg.style.pointerEvents = "none";
| + | |
| − | }
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | svg.onclick = function (e) {
| + | |
| − | e.stopPropagation();
| + | |
| − | }
| + | |
| − | //close the nav when document is clicked | + | |
| − | document.onclick = function () {
| + | |
| − | open = false;
| + | |
| − | var tl = new TimelineLite();
| + | |
| − | for(var i=0; i<items.length; i++){
| + | |
| − | tl.to(items[i], 0.3, {rotation: 0, ease:Circ.easeOut}, 0.05);
| + | |
| − | }
| + | |
| − | tl.to(items, .3, {scale:0, ease:Back.easeIn}, 0.3);
| + | |
| − | label.innerHTML = "+";
| + | |
| − | svg.style.pointerEvents = "none";
| + | |
| − | };</script>
| + | |
| | </body> | | </body> |
| | | | |
| | </html> | | </html> |
