<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"><i class="icon icon-chevron-2-down dropdown__icon"></i><span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
        <span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</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">
        <i class="icon icon-chevron-2-down dropdown__icon"></i>
        <span class="sr-only dropdown__toggle--expanded-text">ausgeklappt</span>
        <span class="sr-only dropdown__toggle--collapsed-text">eingeklappt</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 for this component. */
  • Content:
    // sass-lint:disable force-pseudo-nesting
    
    // .dropdown {
    // display: inline-block;
    // position: relative; // positioning must happen through parent container
    // }
    
    .dropdown__toggle {
      display: inline-block;
      cursor: pointer;
    }
    
    .dropdown__list-wrapper {
      display: none;
      position: absolute;
    }
    
    .dropdown__list {
      @extend %list-unstyled;
      margin-bottom: 0;
    }
    
    .dropdown__link {
      min-width: 100%;
      white-space: nowrap;
    }
    
    .dropdown__checkbox:focus + .dropdown__toggle {
      outline: none;
      color: $dropdown-link-hover-color;
    }
    
    .dropdown__checkbox:checked + .dropdown__toggle--expanded-text {
      display: inline;
    }
    
    .dropdown__checkbox:checked + .dropdown__toggle--collapsed-text {
      display: none;
    }
    
    .dropdown__checkbox:not(:checked) + .dropdown__toggle--expanded-text {
      display: none;
    }
    
    .dropdown__checkbox:not(:checked) + .dropdown__toggle--collapsed-text {
      display: inline;
    }
    
    .dropdown__checkbox:checked ~ .dropdown__list-wrapper {
      display: block;
    }
    
  • URL: /components/raw/dropdown/_dropdown.scss
  • Filesystem Path: components/02-molecules/dropdown/_dropdown.scss
  • Size: 969 Bytes

There are no notes for this item.