CodemySite_Web development

  This is the course content from Brad Traversy. Not much javascript code though, but it’s really useful. Github code H TML the header includes a toggle button, a title, a paragraph and a sign-up button the container is just some random words in the demo nav is the side menu content including a logo and an unsorted list modal is the box of sign-up within a form and a close button C SS the main CSS to remind first, hide the nav to the left side of the screen with transform When showin g  the nav, transition happens moving to the right side with the length of the nav. first, hide the modal before clicking the sign-up button. modal with the animation opacity setting J S all the DOMs needed When clicking the toggle menu button, the show-nav added(changing the position of nav) When clicking the Sign-up button, modal show up( changing the display and opacity) When clicking the close button in modal, modal hides(hiding the display and opacity) When clicking the outside of the modal, ...

One page website with animated navigation with Javascript. Some similar navigation inspire: css flex split menu radial menu with TweenMax.js block menu with TweenMax.js sticky side menu with Javascript CODE REVIEW: HTML Menu-Bars is a hamburger navigation button. From W3C 5 sections total.  CSS Set the root color choices. title with some stylish. The overlay is the full screen navigation. JAVASCRIPT Select all the DOM elements. When nav active,toggle the nav class . First, burger button change when click. If overlay is not active, change animations. Click events happend. CODE Github See the Pen animated-navigation by Yifang Di ( @diyifang ) on CodePen .

  Github here According to a plugin named jquery.ssMenu , I thought the sticky side menu should be concise and responsive for mobile. Step1: link the font awesome for the icons in front of each list. and the demo css file and jquery library at the bottom of body for Javascript  Step2: html Menu is a list with <a> tag inside and icon embeded seperately. Step3: css Linked the google font with @import The menu is fixed at the left side of browser. Class .open is the main classname manipulated in the Javascript part. With some hovering motion, the position and the color with be changed. Any change is animated with transition,more smoother. The badge is the red reminder besides the icon. More color themes version is easy to set with background color. The browser in mobile is different layouts which is at the top fixed. Step4: JS I deleted some part of original code which I feel like useless. You...