Procedure
Step 1 - Create the HTML structure:
Start with the basic HTML structure and add the necessary div elements to represent the circular navigation menu.
Step 2 - Style the body:
Set the margin to 0, and set the height and width to 100% to cover the entire viewport. Use flexbox to align items vertically.
Step 3 - Style the .darksoul-circular-nav:
Set the margin to auto to horizontally center the menu. Set the width and height to 300px to create a circular shape. Use grid layout with three columns to position the menu items evenly.
Step 4 - Style the .darksoul-circle-1,2,3..9 classes:
Define styles for individual menu items. Set the width, height, and border-radius to create circular shapes. Adjust other properties like background color, box-shadow, and margin to achieve the desired visual appearance.
Step 5 - Add the Menu icons:
Download or get the menu icons needed from Icons8 in svg or png and set the margin to auto to center them horizontally. Optionally, you can define animation properties for rotation.
Step 6 - Add hover effects:
Define styles for menu items when hovered over. For example, increase the scale of the hovered item, change box-shadow, and pause any ongoing animations.
Step 7 - Implement animation control:
Define JavaScript functions to start and stop the animation when the mouse hovers over the menu.
Step 8 - Bind event listeners:
Add event listeners to the circular navigation menu div to trigger the animation control functions on mouseover and mouseout events.
