Difference between revisions of "Template:MIT/menu"
BloonCorps (Talk | contribs) (Undo revision 159988 by BloonCorps (talk)) |
BloonCorps (Talk | contribs) |
||
| Line 304: | Line 304: | ||
| − | <script> | + | <script> |
| − | /*Toggle Nav*/ | + | /*Toggle Nav*/ |
| − | + | const navSlide = () => { | |
| − | + | const burger = document.querySelector ('.burger'); | |
| − | + | const nav = document.querySelector ('.nav-links'); | |
| − | + | const navLinks = document.querySelectorAll('.nav-links li'); | |
| − | + | burger.addEventListener('click', () => { | |
| − | + | nav.classList.toggle('nav-active'); | |
| − | /*Animate Menu links*/ | + | /*Animate Menu links*/ |
| − | + | navLinks.forEach((link,index) => { | |
| − | + | if(link.style.animation) { | |
| − | + | link.style.animation = ''; | |
| − | + | } | |
| − | + | else { | |
| − | + | link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.05}s`; | |
| − | + | } | |
| − | + | }); | |
| − | /*Burger Animation*/ | + | /*Burger Animation*/ |
| − | + | burger.classList.toggle('toggle'); | |
| − | + | }); | |
| − | + | } | |
| − | + | navSlide(); | |
| − | + | </script> | |
| − | + | ||
| − | } | + | </body> |
| − | + | </html> | |
| − | navSlide(); | + | |
| − | + | ||
| − | </script> | + | |
</body> | </body> | ||
</html> | </html> | ||
Revision as of 03:49, 8 October 2021
</html>