Dropdown 

<div class="dropdown">
    <a href="#">Corresponding Link</a>
    <input type="checkbox" role="button" aria-haspopup="true" id="toggle-unique-name" class="sr-only dropdown__checkbox" />
    <label for="toggle-unique-name" class="dropdown__toggle">
        <span class="icon icon-chevron-down-filled icon--brand-secondary"></span>
        <span class="sr-only dropdown__toggle__expanded-text">Untermenü einklappen</span>
        <span class="sr-only dropdown__toggle__collapsed-text">Untermenü ausklappen</span>
    </label>
    <div role="menu" data-origin="left" class="dropdown__list-wrapper">
        <ul class="dropdown__list">
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Strategie- und Technologieberatung</a></li>
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Entwicklung digitaler Geschäftsmodelle</a></li>
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Softwarearchitektur und -entwicklung</a></li>
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Digitale Plattformen und Infrastrukturen</a></li>
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Wissenstransfer, Coaching und Trainings</a></li>
        </ul>
    </div>
</div>
 
<div class="dropdown">
    <a href="#">Corresponding Link</a>
    <input type="checkbox" role="button" aria-haspopup="true" id="toggle-unique-name" class="sr-only dropdown__checkbox" />
    <label for="toggle-unique-name" class="dropdown__toggle">
        <span class="icon icon-chevron-down-filled icon--brand-secondary"></span>
        <span class="sr-only dropdown__toggle__expanded-text">Untermenü einklappen</span>
        <span class="sr-only dropdown__toggle__collapsed-text">Untermenü ausklappen</span>
    </label>
    <div role="menu" data-origin="left" class="dropdown__list-wrapper">
        <ul class="dropdown__list">
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Strategie- und Technologieberatung</a></li>
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Entwicklung digitaler Geschäftsmodelle</a></li>
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Softwarearchitektur und -entwicklung</a></li>
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Digitale Plattformen und Infrastrukturen</a></li>
            <li class="dropdown__list-item"><a href="#" class="dropdown__link">Wissenstransfer, Coaching und Trainings</a></li>
        </ul>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .dropdown__toggle {
  cursor: pointer;
  display: inline-block;

  .icon-chevron-down-filled {
    width: $spacer-xs;
    height: $spacer-xs;
    transition: standard-transition(background);

    &:hover,
    &:focus {
      background: $sharing-interaction-color;
    }
  }
}

.dropdown__list-wrapper {
  position: absolute;
  display: none;
}

.dropdown__list {
  @extend %list-unstyled;

  margin-bottom: 0;
}

.dropdown__link {
  min-width: 100%;
  white-space: nowrap;
}

.dropdown__checkbox:focus + .dropdown__toggle {
  color: $dropdown-link-hover-color;
  outline: none;
}

.dropdown__checkbox:checked + .dropdown__toggle > .dropdown__toggle__expanded-text {
  display: inline;
}

.dropdown__checkbox:checked + .dropdown__toggle > .dropdown__toggle__collapsed-text {
  display: none;
}

.dropdown__checkbox:not(:checked) + .dropdown__toggle > .dropdown__toggle__expanded-text {
  display: none;
}

.dropdown__checkbox:not(:checked) + .dropdown__toggle > .dropdown__toggle__collapsed-text {
  display: inline;
}

// show dropdown list when checkbox is checked
.dropdown__checkbox:checked ~ .dropdown__list-wrapper {
  display: block;
}
  • URL: /components/raw/dropdown/_dropdown.scss
  • Filesystem Path: components/04-molecules/dropdown/_dropdown.scss
  • Size: 1.1 KB

No notes defined.