CSS/SCSS Dropdown & Dropup Component – Drop.css

Preview:

Description:

Drop.css is a CSS/SCSS library to create a customizable, animated dropdown or dropup component with plain HTML.

How to use it:

1. Override the default variables in the drop.scss and compile it to drop.css.

$dropArrowOffset: 2px;
$dropArrowRadius: 7px;
$dropMenuBorderRadius: 5px;
$dropMenuPrimaryColor: lighten(#111, 15%);
$dropMenuLighterColor: #bdc3c7;
$dropMenuSecondaryColor: #148a73;
$dropSafeZoneOverlap: 10px;
$dropAnimationSpeedMultiplier: 1;

$sass drop.scss drop.css

2. Load the drop.css in the document or directly import the drop.scss into your project.

<link rel="stylesheet" href="drop.css" />

3. Create a container for the dropdown. Available CSS utilities:

• drop–down: dropdown
• drop–up: dropup
• is-open: open the content on page load
• -color-secondary: secondary color scheme
• -color-lighter: light theme

<div class="drop drop--down">
  ...
</div>

4. Add a trigger element to the dropdown component.

<div class="drop drop--down">
  <button class="btn">Dropdown</button>
</div>

5. Create a container to hold the dropdown content. Available CSS utilities:

• -transition-fade-in: fade in transition
• -transition-slide-in: slide in transition

<div class="drop drop--down">
  <button class="btn">Dropdown</button>
  <div class="drop__content">
  </div>
</div>

6. Add content to the dropdown. Available CSS utilities:

• -pull-left: float content to the left
• -pull-right: float content to the right
• -position-left: place the dropdown to the left
• -position-center: place the dropdown in the center
• -position-right: place the dropdown to the right
• -border-rounded: is the border rounded?
• -size-medium: medium size
• -size-large: large size

<div class="drop drop--down">
  <button class="btn">Dropdown</button>
  <div class="drop__content">
    <div class="drop-arrow"></div>
    <div class="drop-list -size-medium -position-right -border-rounded">
      <button class="drop-list__btn">Action 1</button>
      <button class="drop-list__btn">Action 2</button>
      <button class="drop-list__btn">Action 3</button>
    </div>
  </div>
</div>