Difference between revisions of "Team:Hong Kong HKU/Protocol"
Louislo3412 (Talk | contribs) m (test) |
Louislo3412 (Talk | contribs) (Test) |
||
| 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 | + | <script type="text/javascript">var svg = document.getElementById('menu'), |
| + | 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> | ||
Revision as of 07:40, 26 September 2016
