CSS/SCSS Dropdown & Dropup Component – Drop.css

Category: CSS & CSS3 | February 15, 2021
Author: mareksuscak
Views Total: 370 views
Official Page: Go to website
Last Update: February 15, 2021
License: MIT

Preview:

CSS/SCSS Dropdown & Dropup Component – Drop.css

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>

You Might Be Interested In:


Leave a Reply