|
|
| Line 292: |
Line 292: |
| | </body> | | </body> |
| | | | |
| − | <script src="https://tympanus.net/Tutorials/CircularNavigation/js/demo1.js"></script>
| |
| − | <script>
| |
| − | (function(){
| |
| − |
| |
| − | var button = document.getElementById('cn-button'),
| |
| − | wrapper = document.getElementById('cn-wrapper'),
| |
| − | overlay = document.getElementById('cn-overlay');
| |
| − |
| |
| − | //open and close menu when the button is clicked
| |
| − | var open = false;
| |
| − | button.addEventListener('click', handler, false);
| |
| − | button.addEventListener('focus', handler, false);
| |
| − | wrapper.addEventListener('click', cnhandle, false);
| |
| − |
| |
| − | function cnhandle(e){
| |
| − | e.stopPropagation();
| |
| − | }
| |
| − |
| |
| − | function handler(e){
| |
| − | if (!e) var e = window.event;
| |
| − | e.stopPropagation();//so that it doesn't trigger click event on document
| |
| − |
| |
| − | if(!open){
| |
| − | openNav();
| |
| − | }
| |
| − | else{
| |
| − | closeNav();
| |
| − | }
| |
| − | }
| |
| − | function openNav(){
| |
| − | open = true;
| |
| − | button.innerHTML = "-";
| |
| − | classie.add(overlay, 'on-overlay');
| |
| − | classie.add(wrapper, 'opened-nav');
| |
| − | }
| |
| − | function closeNav(){
| |
| − | open = false;
| |
| − | button.innerHTML = "+";
| |
| − | classie.remove(overlay, 'on-overlay');
| |
| − | classie.remove(wrapper, 'opened-nav');
| |
| − | }
| |
| − | document.addEventListener('click', closeNav);
| |
| − |
| |
| − | })();
| |
| − | </script>
| |
| | </html> | | </html> |
