Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Menüs Metanavigation

Verwendung

In der Metanavigation kann auf weitere wichtige Inhalte der Seite verwiesen werden.

Hinweis

Wird ab einem Viewport von 991px im mobilen Menü platziert.

Vorschau

HTML

                
                  <div class="metanav_wrapper clearfix">
  <nav class="metanav">
    <ul class="clearfix level1">
      <li>
        <a href="#">Karriere</a>
      </li>
      <li>
        <a href="#">News und Presse</a>
      </li>
    </ul>
  </nav>
</div>


<div id="offcanvas_navigation" class="offcanvas_element offcanvas_panel hidden-md hidden-lg" style="display: block;">
  <div class="offcanvas_inner">
    <div class="offcanvas_lower">
      <nav id="offcanvas_meta_navigation">
        <ul class="clearfix level1">
          <li><a href="#">Karriere</a></li>
          <li><a href="#">News und Presse</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

CSS

              .metanav_wrapper {
  border-bottom: 1px solid #e6e6e6;
  padding: 2px 0 15px;
}
.metanav_wrapper .metanav {
  float: right;
}
.metanav_wrapper .metanav ul li {
  list-style: none;
  float: left;
  margin-left: 20px;
}
.metanav_wrapper .metanav ul li:first-child {
  margin-left: 0;
}
.metanav_wrapper .metanav ul li a {
  color: #7c7c7b;
  font-family: 'CorpidCd_TT5', Arial;
  font-weight: normal;
  font-style: normal;
  font-size: 13px;
  font-size: 0.8125rem;
  line-height: 17px;
  line-height: 1.0625rem;
}
.metanav_wrapper .metanav ul li a:focus, .metanav_wrapper .metanav ul li a:hover {
  color: #f9b200;
}
@media screen and (max-width: 767px) {
  .metanav_wrapper {
    display: none;
  }
}

#offcanvas_meta_navigation {
  margin: 0 20px;
}
#offcanvas_meta_navigation ul li {
  list-style: none;
  border-bottom: 1px solid #e6e6e6;
}
#offcanvas_meta_navigation ul li a {
  color: #7c7c7b;
  transition: 0.2s color ease;
  font-size: 16px;
  font-size: 1rem;
  line-height: 18px;
  line-height: 1.125rem;
  font-family: 'CorpidCd_TT5', Arial;
  font-weight: normal;
  font-style: normal;
  display: block;
  padding: 12px 8px;
}
@media screen and (max-width: 767) {
  #offcanvas_meta_navigation ul li a {
    transition: none;
  }
}
#offcanvas_meta_navigation ul li a:hover, #offcanvas_meta_navigation ul li a:focus {
  color: #f9b200;
}
#offcanvas_meta_navigation ul li:last-child {
  border-bottom: none;
}

SCSS

              @import "../general/_general";

.metanav_wrapper {
  border-bottom: 1px solid $lightgrey;
  padding: 2px 0 15px;

  .metanav {
    float: right;

    ul {
      li {
        list-style: none;
        float: left;
        margin-left: 20px;

        &:first-child {
          margin-left: 0;
        }

        a {
          color: $darkgrey;
          @include corpid-cd-regular;
          @include rem-font-size(13);
          @include rem-line-height(17);

          &:focus,
          &:hover {
            color: $orange;
          }
        }
      }
    }
  }

  @media screen and (max-width: $screen-xs-max) {
    display: none;
  }
}

#offcanvas_meta_navigation {
  margin: 0 20px;

  ul {
    li {
      list-style: none;
      border-bottom: 1px solid $lightgrey;

      a {
        color: $darkgrey;
        @include linkcolor-transition;
        @include rem-font-size(16);
        @include rem-line-height(18);
        @include corpid-cd-regular;
        display: block;
        padding: 12px 8px;

        &:hover,
        &:focus {
          color: $orange;
        }
      }

      &:last-child {
        border-bottom: none;
      }
    }
  }
}