Main Menu

Todo

Roadmap

Main Menu: Main Menu Children Secondary Horizontal - Gray Background

Component Preview
<div class="menu-container bg--gray">
    <nav class="nav  main--secondary--horizontal">
        <h2 class="visually-hidden">Main navigation</h2>
        <ul class="menu">
            <li class="menu-item">
                <a href="">Some other link</a>
            </li>
            <li class="menu-item menu-item--expanded">
                <a href="">Field Education Manual</a>
                <ul class="menu">
                    <li class="menu-item menu-item--expanded">
                        <a href="">Example 1</a>
                        <ul class="menu">
                            <li class="menu-item">
                                <a href="">Example 1</a>
                            </li>
                            <li class="menu-item">
                                <a href="">Example 2</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item">
                        <a href="">Example 2</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="">Placement Search, Process, and Deadlines</a>
            </li>
            <li class="menu-item">
                <a href="" class="is-active">Field Education Forms and IPT</a>
                <ul class="menu">
                    <li class="menu-item">
                        <a href="">Example 3</a>
                    </li>
                    <li class="menu-item">
                        <a href="">Example 4</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="">Field Instructors and Prospective Agencies</a>
            </li>
            <li class="menu-item">
                <a href="">Contacts</a>
            </li>
        </ul>
    </nav>
</div>
  • Content:
    .nav .menu {
      list-style-type: none;
      padding: 0;
      margin: 0; }
      .nav .menu > li {
        display: inline-block;
        list-style-type: none;
        margin: 0; }
    
    .nav .menu a {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale; }
    
    @media (min-width: 768px) {
      .nav {
        align-items: center;
        display: flex; } }
    
    .nav .menu {
      overflow: visible;
      font-size: 1rem;
      display: flex; }
      .nav .menu a {
        position: relative;
        display: inline-block;
        transition: background 0.8s ease-out;
        text-decoration: none;
        color: #151515; }
    
    .main--secondary--horizontal,
    .main--secondary--vertical {
      display: block; }
      .main--secondary--horizontal > .menu > li.menu-item--expanded > a + ul,
      .main--secondary--vertical > .menu > li.menu-item--expanded > a + ul {
        padding-bottom: 1.05rem; }
      .main--secondary--horizontal .menu,
      .main--secondary--vertical .menu {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column; }
        .main--secondary--horizontal .menu li,
        .main--secondary--vertical .menu li {
          display: block;
          width: 100%;
          margin-bottom: 0;
          font-size: 1.3rem;
          line-height: 1.3;
          border-bottom: 1px solid rgba(0, 0, 0, 0.125); }
          @media (min-width: 768px) {
            .main--secondary--horizontal .menu li,
            .main--secondary--vertical .menu li {
              width: auto;
              margin-bottom: 0; } }
          .main--secondary--horizontal .menu li li,
          .main--secondary--vertical .menu li li {
            font-size: 1.1rem; }
            .main--secondary--horizontal .menu li li a,
            .main--secondary--vertical .menu li li a {
              color: #333;
              border-bottom: none;
              padding-top: 0.325rem;
              padding-right: 0.625rem;
              padding-bottom: 0.325rem;
              padding-left: 0; }
          .main--secondary--horizontal .menu li:last-child,
          .main--secondary--vertical .menu li:last-child {
            border-bottom: none; }
          .main--secondary--horizontal .menu li a,
          .main--secondary--horizontal .menu li span,
          .main--secondary--vertical .menu li a,
          .main--secondary--vertical .menu li span {
            position: relative;
            width: 100%;
            word-break: break-word;
            padding-top: 1.05rem;
            padding-right: 1.05rem;
            padding-bottom: 1.05rem;
            padding-left: 0; }
            .main--secondary--horizontal .menu li a.is-active,
            .main--secondary--horizontal .menu li span.is-active,
            .main--secondary--vertical .menu li a.is-active,
            .main--secondary--vertical .menu li span.is-active {
              font-weight: bold; }
              .main--secondary--horizontal .menu li a.is-active:after,
              .main--secondary--horizontal .menu li span.is-active:after,
              .main--secondary--vertical .menu li a.is-active:after,
              .main--secondary--vertical .menu li span.is-active:after {
                background: transparent;
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 100%;
                height: 4px;
                transform-origin: center;
                transition: transform 0.3s ease-in-out;
                transform: translate(-50%, 0) scaleX(1); }
            .main--secondary--horizontal .menu li a:focus, .main--secondary--horizontal .menu li a:hover,
            .main--secondary--horizontal .menu li span:focus,
            .main--secondary--horizontal .menu li span:hover,
            .main--secondary--vertical .menu li a:focus,
            .main--secondary--vertical .menu li a:hover,
            .main--secondary--vertical .menu li span:focus,
            .main--secondary--vertical .menu li span:hover {
              text-decoration: underline; }
          .main--secondary--horizontal .menu li.menu-item--expanded a.is-active,
          .main--secondary--vertical .menu li.menu-item--expanded a.is-active {
            border-bottom: none;
            padding-bottom: 0.625rem; }
          .main--secondary--horizontal .menu li.menu-item--expanded ul,
          .main--secondary--vertical .menu li.menu-item--expanded ul {
            display: block;
            padding-left: 2.2rem; }
            .main--secondary--horizontal .menu li.menu-item--expanded ul li,
            .main--secondary--vertical .menu li.menu-item--expanded ul li {
              border-bottom: none;
              font-size: 1rem; }
              .main--secondary--horizontal .menu li.menu-item--expanded ul li a,
              .main--secondary--vertical .menu li.menu-item--expanded ul li a {
                padding-top: 0.625rem;
                padding-right: 1.05rem;
                padding-bottom: 0.625rem;
                padding-left: 0;
                display: flex;
                flex-direction: column;
                justify-content: center; }
                .main--secondary--horizontal .menu li.menu-item--expanded ul li a:before,
                .main--secondary--vertical .menu li.menu-item--expanded ul li a:before {
                  content: "\f105";
                  position: absolute;
                  font-size: 0.9rem;
                  left: -1.05rem;
                  right: 1.05rem;
                  -moz-osx-font-smoothing: grayscale;
                  -webkit-font-smoothing: antialiased;
                  display: inline-block;
                  font-style: normal;
                  font-variant: normal;
                  text-rendering: auto;
                  line-height: 1;
                  font-family: "Font Awesome 5 Free";
                  font-weight: 900; }
        [class*="bg--black"] .main--secondary--horizontal .menu li,
        .bg-pattern--brain-black .main--secondary--horizontal .menu li, [class*="bg--black"]
        .main--secondary--vertical .menu li,
        .bg-pattern--brain-black
        .main--secondary--vertical .menu li {
          border-color: rgba(255, 255, 255, 0.225); }
          [class*="bg--black"] .main--secondary--horizontal .menu li a,
          .bg-pattern--brain-black .main--secondary--horizontal .menu li a, [class*="bg--black"]
          .main--secondary--vertical .menu li a,
          .bg-pattern--brain-black
          .main--secondary--vertical .menu li a {
            color: #fff; }
        .main--secondary--horizontal .menu li:not(.menu-item--expanded) ul,
        .main--secondary--vertical .menu li:not(.menu-item--expanded) ul {
          display: none; }
    
    @media (min-width: 768px) {
      .main--secondary--horizontal {
        padding: 0;
        margin: 0 1.25rem;
        position: relative;
        border-top: none; } }
      @media (min-width: 768px) and (min-width: 84.375em) {
        .main--secondary--horizontal {
          max-width: 81.875em;
          margin: 0 auto; } }
    
    @media (min-width: 768px) {
        .main--secondary--horizontal .menu {
          flex-direction: row; }
          .main--secondary--horizontal .menu ul {
            display: none; }
          .main--secondary--horizontal .menu li {
            font-size: calc(100% + .1vw);
            display: flex;
            border-bottom: none; }
            .main--secondary--horizontal .menu li:first-of-type a {
              margin-left: 0; }
            .main--secondary--horizontal .menu li:last-of-type a {
              margin-right: 0; }
            .main--secondary--horizontal .menu li a,
            .main--secondary--horizontal .menu li span {
              position: relative;
              width: auto;
              text-align: center;
              text-transform: uppercase;
              border: 0;
              background-color: transparent;
              font-weight: 600;
              padding: 1.475rem 1.375rem;
              margin: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              word-break: unset; }
              .main--secondary--horizontal .menu li a:after,
              .main--secondary--horizontal .menu li span:after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 100%;
                height: 4px;
                background-color: #FFCD00;
                transform-origin: center;
                transform: translate(-50%, 0) scaleX(0);
                transition: transform 0.3s ease-in-out; }
              .main--secondary--horizontal .menu li a:focus,
              .main--secondary--horizontal .menu li span:focus {
                text-decoration: underline; }
              .main--secondary--horizontal .menu li a:hover::after, .main--secondary--horizontal .menu li a:focus::after,
              .main--secondary--horizontal .menu li span:hover::after,
              .main--secondary--horizontal .menu li span:focus::after {
                transform: translate(-50%, 0) scaleX(1); }
              .main--secondary--horizontal .menu li a:focus, .main--secondary--horizontal .menu li a:hover,
              .main--secondary--horizontal .menu li span:focus,
              .main--secondary--horizontal .menu li span:hover {
                text-decoration: none; }
            .main--secondary--horizontal .menu li a.is-active {
              background-color: #f3f3f3;
              margin: 0;
              padding-right: 1.875rem;
              padding-left: 1.875rem; }
              .main--secondary--horizontal .menu li a.is-active:before {
                width: 20px;
                height: 20px;
                content: '';
                position: absolute;
                left: calc(50% - 10px);
                top: calc(100% - 1px);
                background-color: transparent;
                border-top: 10px solid #FFCD00;
                border-right: 10px solid transparent;
                border-left: 10px solid transparent;
                border-bottom: 10px solid transparent;
                z-index: 1; }
              .main--secondary--horizontal .menu li a.is-active:after {
                background: #FFCD00;
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 100%;
                height: 6px;
                transform-origin: center;
                transition: transform 0.3s ease-in-out;
                transform: translate(-50%, 0) scaleX(1); }
            .main--secondary--horizontal .menu li.menu-item--expanded {
              background-color: transparent; }
              .main--secondary--horizontal .menu li.menu-item--expanded ul {
                display: none; }
          .main--secondary--horizontal .menu li a:before {
            position: absolute;
            bottom: 35%;
            width: 1px;
            height: 25%;
            content: "";
            background: #FFCD00;
            right: -1px; }
          .main--secondary--horizontal .menu li a:after {
            background-color: #63666A; }
          .main--secondary--horizontal .menu li:last-of-type a:before {
            width: 0; }
          [class*="bg--black"] .main--secondary--horizontal .menu li a.is-active,
          [class*="bg--gold"] .main--secondary--horizontal .menu li a.is-active,
          [class*="bg--gray"] .main--secondary--horizontal .menu li a.is-active,
          .bg-pattern--brain-black .main--secondary--horizontal .menu li a.is-active,
          .bg-pattern--brain-reversed .main--secondary--horizontal .menu li a.is-active {
            background: #fff; }
          [class*="bg--black"] .main--secondary--horizontal .menu li a:after,
          .bg-pattern--brain-black .main--secondary--horizontal .menu li a:after {
            bottom: 0; }
          [class*="bg--black"] .main--secondary--horizontal .menu li a.is-active,
          .bg-pattern--brain-black .main--secondary--horizontal .menu li a.is-active {
            color: #151515; }
          [class*="bg--gold"] .main--secondary--horizontal .menu li a:before,
          .bg-pattern--brain-reversed .main--secondary--horizontal .menu li a:before {
            background-color: #63666A; }
          [class*="bg--gold"] .main--secondary--horizontal .menu li a.is-active:before,
          .bg-pattern--brain-reversed .main--secondary--horizontal .menu li a.is-active:before {
            border-top-color: #63666A;
            background-color: transparent; }
          [class*="bg--gold"] .main--secondary--horizontal .menu li a.is-active:after,
          .bg-pattern--brain-reversed .main--secondary--horizontal .menu li a.is-active:after {
            background-color: #63666A; }
        [class*="bg--gold"] .main--secondary--horizontal,
        .bg-pattern--brain-reversed .main--secondary--horizontal {
          border-top: none; } }
    
    @media all and (-ms-high-contrast: none) and (min-width: 768px), (-ms-high-contrast: active) and (min-width: 768px) {
      .main--secondary--horizontal .menu li {
        font-size: 1rem; } }
    
  • URL: /components/raw/main-menu/main-menu.css
  • Filesystem Path: src/components/menus/main-menu/main-menu.css
  • Size: 12.2 KB
  • Content:
    @import '../../../assets/scss/variables';
    @import '../../../assets/scss/utilities';
    
    .nav {
      @include breakpoint(sm) {
        align-items: center;
        @include flexbox;
      }
    
      .menu {
        overflow: visible;
        font-size: $base-font-size;
        @extend %no-ul-list;
        @include flexbox;
    
        a {
          position: relative;
          display: inline-block;
          transition: background 0.8s ease-out;
          text-decoration: none;
          color: $secondary;
          @extend %font-smoothing-on;
        }
      }
    }
    // vertical and horiztonal
    .main--secondary--horizontal,
    .main--secondary--vertical {
      display: block;
    
      > .menu > li.menu-item--expanded > a + ul {
        padding-bottom: $md;
      }
    
      .menu {
        position: relative;
        width: 100%;
        @include flexbox;
        @include flex-direction(column);
    
        li {
          display: block;
          width: 100%;
          margin-bottom: 0;
          font-size: 1.3rem;
          line-height: 1.3;
          border-bottom: 1px solid rgba(0,0,0,.125);
          @include breakpoint(sm) {
            width: auto;
            margin-bottom: 0;
          }
    
          li {
            font-size: 1.1rem;
    
            a {
              color: #333;
              border-bottom: none;
              @include padding($top: $xsm, $right: $sm, $bottom: $xsm, $left:0);
            }
          }
    
          &:last-child {
            border-bottom: none;
          }
    
          a,
          span {
            position: relative;
            width: 100%;
            word-break: break-word;
            @include padding($top: $md, $right: $md, $bottom: $md, $left: 0);
    
            &.is-active {
              font-weight: bold;
    
              &:after {
                background: transparent;
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 100%;
                height: 4px;
                transform-origin: center;
                transition: transform 0.3s ease-in-out;
                transform: translate(-50%, 0) scaleX(1);
              }
            }
    
            &:focus,
            &:hover {
              text-decoration: underline;
            }
          }
    
          &.menu-item--expanded {
            a {
              &.is-active {
                border-bottom: none;
                padding-bottom: $sm;
              }
            }
    
            ul {
              display: block;
              padding-left: 2.2rem;
    
              & li {
                border-bottom: none;
                font-size: $base-font-size;
    
                & a {
                  @include padding($top: $sm, $right: $md, $bottom: $sm, $left: 0);
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
    
                  &:before {
                    content: "\f105";
                    position: absolute;
                    font-size: 0.9rem;
                    left: -$md;
                    right: $md;
                    @include fas();
                  }
                }
              }
            }
          }
        }
    
        [class*="bg--black"] &,
        .bg-pattern--brain-black & {
          li {
            border-color: rgba(255,255,255,.225);
    
            a {
              color: #fff;
            }
          }
        }
    
        li:not(.menu-item--expanded) ul {
          display: none;
        }
      }
    }
    // horizontal only
    @include breakpoint(sm) {
      .main--secondary--horizontal {
        padding: 0;
        @include container;
        border-top: none;
    
        .menu {
          flex-direction: row;
    
          ul {
            display: none;
          }
    
          li {
            font-size: calc(100% + .1vw);
            display: flex;
            border-bottom: none;
    
            &:first-of-type a {
              margin-left: 0;
            }
    
            &:last-of-type a {
              margin-right: 0;
            }
    
            a,
            span {
              @include bttn--focus;
              position: relative;
              width: auto;
              text-align: center;
              text-transform: uppercase;
              border: 0;
              background-color: transparent;
              font-weight: $font-weight-medium-bold;
              padding: 1.475rem 1.375rem;
              margin: 0;
              @include center(both);
              word-break: unset;
    
              &:focus,
              &:hover {
                text-decoration: none;
              }
            }
    
            a.is-active {
              background-color: #f3f3f3;
              margin: 0;
              padding-right: 1.875rem;
              padding-left: 1.875rem;
    
              &:before {
                width: 20px;
                height: 20px;
                content: '';
                position: absolute;
                left: calc(50% - 10px);
                top: calc(100% - 1px);
                background-color: transparent;
                border-top: 10px solid $primary;
                border-right: 10px solid transparent;
                border-left: 10px solid transparent;
                border-bottom: 10px solid transparent;
                z-index: 1;
              }
    
              &:after {
                background: $primary;
                content: '';
                position: absolute;
                left: 50%;
                bottom: 0;
                width: 100%;
                height: 6px;
                transform-origin: center;
                transition: transform 0.3s ease-in-out;
                transform: translate(-50%, 0) scaleX(1);
              }
            }
    
            &.menu-item--expanded {
              background-color: transparent;
    
              ul {
                display: none;
              }
            }
          }
    
          li a:before {
            position: absolute;
            bottom: 35%;
            width: 1px;
            height: 25%;
            content: "";
            background: $primary;
            right: -1px;
          }
    
          li a:after {
            background-color: $brand-cool-gray;
          }
    
          li:last-of-type a {
            &:before {
              width: 0;
            }
          }
    
          [class*="bg--black"] &,
          [class*="bg--gold"] &,
          [class*="bg--gray"] &,
          .bg-pattern--brain-black &,
          .bg-pattern--brain-reversed & {
            li {
              a.is-active {
                background: #fff;
              }
            }
          }
    
          [class*="bg--black"] &,
          .bg-pattern--brain-black & {
            li a {
              &:after {
                bottom: 0;
              }
            }
    
            li {
              a.is-active {
                color: $secondary;
              }
            }
          }
    
          [class*="bg--gold"] &,
          .bg-pattern--brain-reversed & {
            li a {
              &:before {
                background-color: $brand-cool-gray;
              }
            }
    
            li {
              a.is-active {
                &:before {
                  border-top-color: $brand-cool-gray;
                  background-color: transparent;
                }
    
                &:after {
                  background-color: $brand-cool-gray;
                }
              }
            }
          }
        }
    
        [class*="bg--gold"] &,
        .bg-pattern--brain-reversed & {
          border-top: none;
        }
      }
    }
    
    // ie11
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .main--secondary--horizontal .menu li {
        @include breakpoint(sm) {
          font-size: 1rem;
        }
      }
    }
    
  • URL: /components/raw/main-menu/main-menu.scss
  • Filesystem Path: src/components/menus/main-menu/main-menu.scss
  • Size: 6.8 KB