React JS Animated Menu in 8 Steps: Advanced React Menu Component Tutorial (Part 2)
Description: A coding tutorial showing how to make an animated circular menu. Technologies used include React JS, SCSS, and node. Original Code on Github: https://github.com/SamuelColeMorgan/React-Circular-Menu Resource: Colt Steele’s Crash Course on HTML, CSS, JavaScript. https://www.youtube.com/watch?v=O9Uauq-Gd0c&t=75s Sub Arrays for menu pages: ["About", "#3E84E6"], ["Contact", "#15AB88"], ["Portfolio", "#eb5089"], ["LinkedIn", "#AFD91A"], ["Dribbble", "#F27127"], ["Facebook", "#07C7F2"], ["Twitter", "#9768D1"], ["Instagram", “#F2B705"], SCSS Variables: // color variables $off-white: #fefefe; $dark-purple: #090126; $dark-purple-secondary: #290366; // ------------------------------- // font variables $primary-font: 'Open Sans Condensed', sans-serif; // ------------------------------- // font size variables $small-font-size: 16px; // ------------------------------- // spacer variables $xs-space: 3px; $small-space: 18px; $medium-space: 27px; $large-space: 81px; $xl-space: 144px; // -------------------------------
Description: A coding tutorial showing how to make an animated circular menu. Technologies used include React JS, SCSS, and node. Original Code on Github: https://github.com/SamuelColeMorgan/React-Circular-Menu Resource: Colt Steele’s Crash Course on HTML, CSS, JavaScript. https://www.youtube.com/watch?v=O9Uauq-Gd0c&t=75s Sub Arrays for menu pages: ["About", "#3E84E6"], ["Contact", "#15AB88"], ["Portfolio", "#eb5089"], ["LinkedIn", "#AFD91A"], ["Dribbble", "#F27127"], ["Facebook", "#07C7F2"], ["Twitter", "#9768D1"], ["Instagram", “#F2B705"], SCSS Variables: // color variables $off-white: #fefefe; $dark-purple: #090126; $dark-purple-secondary: #290366; // ------------------------------- // font variables $primary-font: 'Open Sans Condensed', sans-serif; // ------------------------------- // font size variables $small-font-size: 16px; // ------------------------------- // spacer variables $xs-space: 3px; $small-space: 18px; $medium-space: 27px; $large-space: 81px; $xl-space: 144px; // -------------------------------