Customizable Settings Dropdown

Tailor your website experience with a customizable settings dropdown menu. Learn how to implement a dropdown that allows users to adjust and personalize their settings.

Enhance user interaction on your website with a customizable settings dropdown created using HTML and CSS. This guide will walk you through the process of integrating and customizing a dropdown menu, allowing users to adjust settings with ease.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML and CSS code snippet for the customizable settings dropdown. This snippet includes the structure and styles needed to create a basic dropdown menu.

Step 2: Link Custom Fonts and CSS

  • Ensure the custom fonts and CSS (styles.css) are linked correctly in your HTML document. Add the following <link> tags within the <head> section to import the Google Fonts and custom styles: 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700&display=swap">
<link rel="stylesheet" href="styles.css">

Step 3: Customize and Make it Yours

  • Personalize the settings dropdown to fit your website's design and functionality requirements. Modify the HTML structure to include additional dropdown items, adjust CSS styles (styles.css) to change colors, fonts, and dropdown behavior (e.g., animation, hover effects), and integrate JavaScript for interactive features if needed.

By following these steps, you can implement and customize a customizable settings dropdown using HTML and CSS, enhancing user accessibility and functionality on your website.

Code Explanation

HTML Code

Main Container (<div class="dropdown">):
  • This container encapsulates the entire dropdown menu.
Content (<div class="content">):
  • Contains elements for displaying the dropdown trigger and label.
  • <span class="material-symbols-outlined"> settings </span>: Represents an icon symbolizing settings.
  • <p>Settings</p>: Text label for the settings.
Dropdown Button (<button type="button"></button>):
  • This button acts as the toggle for the dropdown menu. Clicking it reveals or hides the menu.
Dropdown Menu (<div class="menu">):
  • Contains multiple menu items (<a> tags) representing different options.
  • Each <a> tag consists of:
    • <span class="material-symbols-outlined">: Icon symbolizing the action or category.
    • <p>: Text label describing the action or category.

CSS Code

Universal Box Sizing:
* {
  box-sizing: border-box;
}
  • This sets the box-sizing property to border-box for all elements, ensuring that padding and border sizes are included in the element's total width and height.
Body Styling:
body {
  display: grid;
  place-items: center;
  margin: 0;
  height: 100vh;
  font-family: "Euclid Circular A", "Poppins";
  background: #45494e;
}
  • Centers the content vertically and horizontally using CSS grid.
  • Resets the body margin to 0 and sets a full viewport height (100vh).
  • Specifies the font-family for the entire document.
  • Sets a background color for the body.
Dropdown Container:
.dropdown {
  translate: 0 -20px;
  position: relative;
  cursor: pointer;
}
  • There seems to be a typo here (translate should likely be transition or another property). Assuming it should be transition: 0.3s or similar.
  • Sets the dropdown container to have relative positioning and a pointer cursor, indicating it's interactive.
Dropdown Button:
.dropdown > button {
  width: 170px;
  height: 60px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 17px;
  background: #3c3c3c;
}
  • Styles the button inside the dropdown.
  • Sets fixed width and height with rounded corners (border-radius).
  • Inherits font-family from the parent.
  • Applies a background color.
Dropdown Content Styling:
.dropdown > .content {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #f7f7f7;
}
  • Positions the content within the dropdown.
  • Absolute positioning within the .dropdown.
  • Sets a higher z-index to ensure it appears above other elements.
  • Flexbox layout to align items horizontally with space between them.
  • Uses a color for text.
Dropdown Content Animation:
.dropdown > .content::after {
  content: "";
  position: absolute;
  bottom: 6px;
  right: 10%;
  width: 80%;
  height: 1px;
  transform: scaleX(0);
  background: rgb(255 255 255 / 30%);
  transition: 0.3s;
}
.dropdown:hover > .content::after {
  transform: scaleX(1);
}
  • Creates a pseudo-element (::after) to add an animated underline effect.
  • Initially hidden (transform: scaleX(0)).
  • On hover, scales the underline to full width (transform: scaleX(1)).
Dropdown Menu Styling:
.dropdown > .menu {
  position: absolute;
  z-index: 1;
  top: -6px;
  left: 50%;
  display: grid;
  width: 110%;
  padding: 70px 0 6px;
  border-radius: 6px;
  translate: -50% 0;
  visibility: hidden;
  opacity: 0;
  scale: 0.85;
  background: linear-gradient(#ea8d8d, #a890fe);
  transition: 0.3s;
}
.dropdown:hover > .menu {
  visibility: visible;
  opacity: 1;
  scale: 1;
}
  • Styles the dropdown menu container.
  • Positioned absolutely relative to .dropdown.
  • Centered horizontally (left: 50%) and slightly shifted up (top: -6px).
  • Initially hidden (visibility: hidden and opacity: 0), scales down (scale: 0.85).
  • Uses a linear gradient background and transitions for a smooth appearance.
Dropdown Menu Links:
.dropdown > .menu > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f7f7f7;
  font-size: 14px;
  padding: 0 24px;
}
.dropdown > .menu > a:hover {
  background: rgb(0 0 0 / 10%);
}
.dropdown > .menu > a > span {
  font-size: 20px;
}
  • Styles the links (<a> tags) inside the dropdown menu.
  • Uses flexbox to align items vertically.
  • Adds spacing between icon and text (gap: 10px).
  • Sets font size, padding, and color.
  • Applies a background color on hover for visual feedback.