<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.