Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Flyout 

<nav class=" flyout ">
      <ul class="flyout__section section__list -grouped">
          <li class="section__item">
              <a class="section__link -next" href="#">Hochbau</a>
              <ul class="section__sub-section sub-section__list section__second-level">
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Elektroinstallation</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Erneuerbare Energien</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Fenster und Türen</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Heizen und Kühlen</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Industrierohrsysteme</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Nahwärme</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Raumakustik</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Sanitärinstallation</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Terassensysteme</a>
                  </li>
              </ul>
          </li>
          <li class="section__item">
              <a class="section__link -next" href="#">Tiefbau</a>
              <ul class="section__sub-section sub-section__list section__second-level">
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Abwasser</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Regenwasser</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Telekommunikation</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Verkehrswegebau</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Gasversorgung</a>
                  </li>
              </ul>
          </li>
          <li class="section__item">
              <a class="section__link -next" href="#">Innenausbau</a>
              <ul class="section__sub-section sub-section__list section__second-level">
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Kanten</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Oberflächen</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Schrankrolladen</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Wandanschluss</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Sockelblenden</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Terassensystem</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Raumakustik</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Zentrales Staubsaugersystem</a>
                  </li>
              </ul>
          </li>
          <li class="section__item">
              <a class="section__link -next" href="#">Industriebau</a>
              <ul class="section__sub-section sub-section__list section__second-level">
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Trinkwasserversorgung</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">PE-Xa-Gasrohr</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Drucklift & Kühlwasser</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Kältetransport</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Industrieabwasser</a>
                  </li>
              </ul>
          </li>
          <li class="section__item">
              <a class="section__link -next" href="#">Tiefbau</a>
              <ul class="section__sub-section sub-section__list section__second-level">
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Abwasser</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Regenwasser</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Telekommunikation</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Verkehrswegebau</a>
                  </li>
                  <li class="sub-section__item ">
                      <a class="sub-section__link" href="#">Gasversorgung</a>
                  </li>
              </ul>
          </li>
      </ul>
      <ul class="flyout__service service__list">
          <li class="service__item">
              <a class="service__link" href="#">Referenzen</a>
          </li>
          <li class="service__item">
              <a class="service__link" href="#">Services</a>
          </li>
          <li class="service__item">
              <a class="service__link" href="#">Akademie</a>
          </li>
      </ul>
  </nav>
 
{{#if items}}
  <nav class="{{mixes}} flyout {{modifiers}}">
    <ul class="flyout__section section__list {{sectionModifiers}}">
      {{#each items}}
        <li class="section__item">
          <a class="section__link{{#if items}} -next{{/if}}" href="{{{href}}}">{{{text}}}</a>
          {{#if items}}
            <ul class="section__sub-section sub-section__list section__second-level">
              {{#each items}}
                <li class="sub-section__item {{modifiers}}">
                  <a class="sub-section__link" href="{{{href}}}">{{{text}}}</a>
                  {{#if items}}
                    <ul class="section__sub-section sub-section__list">
                      {{#each items}}
                        <li class="sub-section__item {{modifiers}}">
                          <a class="sub-section__link" href="{{{href}}}">{{{text}}}</a>
                        </li>
                      {{/each}}
                    </ul>
                  {{/if}}
                </li>
              {{/each}}
            </ul>
          {{/if}}
        </li>
      {{/each}}
    </ul>
    {{#if news}}
      <div class="flyout__wrapper">
      <ul class="flyout__news">
        <li class="cell">{{render '@molecules-teaser--horizontal' newsTeaser merge=true}}</li>
        <li class="cell">{{render '@molecules-teaser--horizontal' newsTeaser merge=true}}</li>
        <li class="cell">{{render '@molecules-teaser--horizontal' newsTeaser merge=true}}</li>
      </ul>
      {{/if}}
      <ul class="flyout__service service__list">
        {{#each service}}
          <li class="service__item">
            <a class="service__link" href="{{{href}}}">{{{text}}}</a>
          </li>
        {{/each}}
      </ul>
    {{#if news}}
      </div>
    {{/if}}
  </nav>
{{/if}}
 
{
  "sectionModifiers": "-grouped",
  "items": [
    {
      "href": "#",
      "text": "Hochbau",
      "items": [
        {
          "href": "#",
          "text": "Elektroinstallation"
        },
        {
          "href": "#",
          "text": "Erneuerbare Energien"
        },
        {
          "href": "#",
          "text": "Fenster und Türen"
        },
        {
          "href": "#",
          "text": "Heizen und Kühlen"
        },
        {
          "href": "#",
          "text": "Industrierohrsysteme"
        },
        {
          "href": "#",
          "text": "Nahwärme"
        },
        {
          "href": "#",
          "text": "Raumakustik"
        },
        {
          "href": "#",
          "text": "Sanitärinstallation"
        },
        {
          "href": "#",
          "text": "Terassensysteme"
        }
      ]
    },
    {
      "href": "#",
      "text": "Tiefbau",
      "items": [
        {
          "href": "#",
          "text": "Abwasser"
        },
        {
          "href": "#",
          "text": "Regenwasser"
        },
        {
          "href": "#",
          "text": "Telekommunikation"
        },
        {
          "href": "#",
          "text": "Verkehrswegebau"
        },
        {
          "href": "#",
          "text": "Gasversorgung"
        }
      ]
    },
    {
      "href": "#",
      "text": "Innenausbau",
      "items": [
        {
          "href": "#",
          "text": "Kanten"
        },
        {
          "href": "#",
          "text": "Oberflächen"
        },
        {
          "href": "#",
          "text": "Schrankrolladen"
        },
        {
          "href": "#",
          "text": "Wandanschluss"
        },
        {
          "href": "#",
          "text": "Sockelblenden"
        },
        {
          "href": "#",
          "text": "Terassensystem"
        },
        {
          "href": "#",
          "text": "Raumakustik"
        },
        {
          "href": "#",
          "text": "Zentrales Staubsaugersystem"
        }
      ]
    },
    {
      "href": "#",
      "text": "Industriebau",
      "items": [
        {
          "href": "#",
          "text": "Trinkwasserversorgung"
        },
        {
          "href": "#",
          "text": "PE-Xa-Gasrohr"
        },
        {
          "href": "#",
          "text": "Drucklift & Kühlwasser"
        },
        {
          "href": "#",
          "text": "Kältetransport"
        },
        {
          "href": "#",
          "text": "Industrieabwasser"
        }
      ]
    },
    {
      "href": "#",
      "text": "Tiefbau",
      "items": [
        {
          "href": "#",
          "text": "Abwasser"
        },
        {
          "href": "#",
          "text": "Regenwasser"
        },
        {
          "href": "#",
          "text": "Telekommunikation"
        },
        {
          "href": "#",
          "text": "Verkehrswegebau"
        },
        {
          "href": "#",
          "text": "Gasversorgung"
        }
      ]
    }
  ],
  "service": [
    {
      "href": "#",
      "text": "Referenzen"
    },
    {
      "href": "#",
      "text": "Services"
    },
    {
      "href": "#",
      "text": "Akademie"
    }
  ]
}
  • Content: 
    /* Flyout */

.section {
  $root: &;

  &__list {
    padding-left: 0;
    list-style: none;
  }

  &__item {
    display: block;
  }

  &__link,
  &__text {
    display: block;
    color: inherit;
  }

  &__link {
    &:hover,
    &:active,
    &.-active {
      color: $primary;
    }

    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  // stylelint-disable-next-line order/order
  @include breakpoint(medium down) {
    $only: -zf-breakpoints-less-than(pre-large);

    @each $breakpoint, $gutter in $grid-gutters {
      @if (false != index($only, $breakpoint)) {
        @include breakpoint($breakpoint) {
          &__item {
            margin: rem-calc($gutter) 0;
          }

          &__link {
            padding: 0 rem-calc($gutter);
          }
        }
      }
    }

    &__link {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;

      &.-next,
      &.-prev {
        cursor: pointer;
      }

      &.-prev {
        @include typography-level('main-nav-active-link');

        color: $primary;
      }

      &.-next::after {
        position: absolute;
        top: 50%;
        width: 2rem;
        height: 2rem;
        transform: translateY(-50%);
        line-height: inherit;
        color: inherit;
      }

      &.-next::after {
        $symbol: map-get($icons, 'chevron-right');

        @include icon-content-extended($symbol, inline-block);

        right: 0;
        text-align: right;
      }
    }

    &__sub-section {
      display: none;
    }

    &__list.-expand {
      #{$root}__item:not(.-expand) {
        display: none;
      }
    }

    &__item.-expand {
      > #{$root}__link {
        @include typography-level('main-nav-active-link');
      }

      > #{$root}__sub-section {
        display: block;
      }
    }
  }

  @include breakpoint(pre-large) {
    &__list {
      display: flex;
      flex-flow: row wrap;
      padding: $flyout-padding / 2;

      &.-grouped {
        #{$root}__link,
        #{$root}__text {
          margin-bottom: $flyout-section-item-margin * 2;
          font-weight: $font-weight-bold;
        }
      }
    }

    &__item {
      width: calc((100% - #{$flyout-padding}) / 4);
      padding: $flyout-padding / 2;
    }
  }
}

.sub-section {
  $root: &;

  &__list {
    padding-left: 0;
    list-style: none;
  }

  &__item {
    display: block;
  }

  // stylelint-disable-next-line order/order
  @include breakpoint(medium down) {
    &__item.-expand {
      > #{$root}__link {
        @include typography-level('main-nav-active-link');
      }

      > .section__sub-section {
        display: block;
      }
    }

    &__link {
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;

      &.-next,
      &.-prev {
        cursor: pointer;
      }

      &.-prev {
        @include typography-level('main-nav-active-link');

        color: $primary;
      }

      &.-next::after {
        position: absolute;
        top: 50%;
        width: 2rem;
        height: 2rem;
        transform: translateY(-50%);
        line-height: inherit;
        color: inherit;
      }

      &.-next::after {
        $symbol: map-get($icons, 'chevron-right');

        @include icon-content-extended($symbol, inline-block);

        right: 0;
        text-align: right;
      }
    }
  }

  &__link {
    display: block;
    color: inherit;

    &:hover,
    &:active,
    &.-active {
      color: $primary;
    }

    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  // stylelint-disable-next-line order/order
  @include breakpoint(medium down) {
    $only: -zf-breakpoints-less-than(pre-large);

    @each $breakpoint, $gutter in $grid-gutters {
      @if (false != index($only, $breakpoint)) {
        @include breakpoint($breakpoint) {
          &__item {
            margin: rem-calc($gutter) 0;
          }

          &__link {
            padding: 0 rem-calc($gutter);
          }
        }
      }
    }
  }

  @include breakpoint(pre-large) {
    &__item {
      margin-bottom: $flyout-section-item-margin;
    }
  }
}

.service {
  $root: &;

  &__list {
    padding-left: 0;
    list-style: none;
  }

  &__item {
    display: block;
  }

  &__link {
    display: block;
    color: inherit;

    &:hover,
    &:active,
    &.-active {
      color: $primary;
    }

    &:hover,
    &:active {
      text-decoration: none;
    }
  }

  // stylelint-disable-next-line order/order
  @include breakpoint(medium down) {
    $only: -zf-breakpoints-less-than(pre-large);

    @each $breakpoint, $gutter in $grid-gutters {
      @if (false != index($only, $breakpoint)) {
        @include breakpoint($breakpoint) {
          &__item {
            margin: rem-calc($gutter) 0;
          }

          &__link {
            padding: 0 rem-calc($gutter);
          }
        }
      }
    }
  }

  @include breakpoint(pre-large) {
    &__item {
      padding: $flyout-padding;
    }

    &__link {
      &:hover,
      &:active,
      &.-active {
        color: $primary;
      }

      &:hover,
      &:active {
        text-decoration: none;
      }
    }
  }
}

.flyout {
  $root: &;

  // stylelint-disable-next-line order/order
  @include breakpoint(medium down) {
    $only: -zf-breakpoints-less-than(pre-large);

    &__service:not(:first-child) {
      border-top: 1px solid $gray-lighter;
    }

    @each $breakpoint, $gutter in $grid-gutters {
      @if (false != index($only, $breakpoint)) {
        @include breakpoint($breakpoint) {
          &__section:not(:last-child) {
            margin-bottom: rem-calc($gutter / 2);
            padding-bottom: rem-calc($gutter / 2);
          }

          &__service {
            margin-top: rem-calc($gutter / 2);
            padding-top: rem-calc($gutter / 2);
          }
        }
      }
    }

    &__section.-expand + &__service {
      display: none;
    }
  }

  @include breakpoint(pre-large) {
    background: $white;

    &__section,
    &__service {
      border: 1px solid $gray-lighter;
    }

    &__section {
      margin-bottom: 0;
    }

    &__service {
      display: flex;
      justify-content: center;
      border-top: 0 none;
    }
  }

  @include breakpoint(pre-large) {
    &.-three-level {
      display: flex;

      .flyout__section {
        flex-flow: column;
        width: calc((100% - #{$flyout-padding}) / 4);
        background-color: $gray-lighter;

        .section__item {
          width: 100%;
        }

        .section__link {
          display: inline-block;
          margin: -$flyout-padding;
          padding: $flyout-padding;
          font-weight: $font-weight-bold;

          &:hover {
            display: block;
          }
        }
      }

      .section__second-level {
        display: none;
        padding-top: $flyout-padding;

        > .sub-section__item {
          > .sub-section__link {
            margin-bottom: $flyout-section-item-margin * 2;
            font-weight: $font-weight-bold;
          }
        }

        > .sub-section__item {
          width: calc((100% - #{$flyout-padding}) / 3);
        }
      }

      .section__item.-active {
        .section__link {
          display: blcok;
          color: $primary;
        }

        .section__second-level {
          position: absolute;
          top: 0;
          left: calc((100% - #{$flyout-padding}) / 4);
          display: flex;
          flex-flow: row wrap;
          width: calc((100% + #{$flyout-padding}) / 4 * 3);
          margin-left: -$flyout-padding/2;
          padding-left: $flyout-padding;
        }
      }

      .flyout__wrapper {
        display: flex;
        flex-grow: 1;
        flex-flow: row wrap;
      }

      .flyout__news {
        width: 100%;
        padding: $flyout-padding;
        list-style: none;

        .cell:last-child .teaser {
          border-bottom: 0;
        }
      }

      .flyout__service {
        z-index: 10000;
        flex-grow: 1;
        align-self: flex-end;
        width: 100%;
        border-top: 1px solid $gray-lighter;
      }

      .service__item {
        padding: ($flyout-padding / 2) $flyout-padding;
      }

    }
  }

  @include breakpoint(medium down) {
    .flyout__news {
      display: none;
    }

    &.-three-level .section__sub-section {
      padding-left: $flyout-padding/2;
    }
  }
}
  • URL: /components/raw/molecules-flyout/_flyout.scss
  • Filesystem Path: src/components/02-ui-components/02-molecules/02-flyout/_flyout.scss
  • Size: 8.3 KB

There are no notes for this item.