HTML Explanation
01
The <body> contains a div with the class dropdown-container, which houses the main button (<button> with class dropdown-button main-button).
02
This button displays the selected social media icon and name.
03
The dropdown-list-container follows, containing an initially empty unordered list (<ul>) where the dropdown options will be dynamically inserted via JavaScript.
04
The div with the class floating-icon is a visual element for interactive hover effects.
CSS Explanation
01
The CSS styles the dropdown menu to provide an appealing and interactive user experience.
02
Global styles apply a reset to margins and paddings and define the base font as "Roboto" from Google Fonts.
03
Custom properties (CSS variables) are used throughout to manage colors, dimensions, and transitions consistently, allowing for easy updates and adjustments.
04
The body is styled as a flex container, centering its content with a light background color.
05
The .dropdown-container centers the dropdown on the page with a maximum width constraint for better usability.
06
The .dropdown-button has a modern look with a background color of --primary-bg-color, a rounded border, and subtle transitions for hover and focus states.
07
The dropdown arrow icon rotates when the menu is toggled, thanks to the transform property linked to the --rotate-arrow variable.
08
The .dropdown-list-container is initially hidden with a max-height of 0, smoothly expanding and collapsing via a CSS transition controlled by JavaScript.
09
Each list item (li) is styled for flexibility, with hover effects altering the background color and text appearance.
10
The floating-icon provides an additional interactive layer, following the cursor with smooth transitions.
Javascript Explanation
01
The JavaScript adds interactivity to the dropdown menu.
02
Key elements are selected using querySelector, including the main button and the dropdown list.
03
The icons object stores SVG path data for each social media platform, ensuring efficient icon rendering.
04
The script dynamically generates the list items using the renderListItems function, inserting them into the dropdown list when the page loads.
05
Event listeners are attached to the main button to toggle the dropdown's visibility. The setDropdownProps function controls the rotation of the arrow icon, the height of the dropdown, and the opacity of the list items, based on the menu's open or closed state.
06
Additional interactions include displaying the corresponding icon in the dropdown title when an item is clicked and animating the floating-icon to follow the mouse cursor on hover.
07
The mousemove event updates the icon's position and appearance based on the hovered list item.
HTML
CSS
JS
CSS