FTSE Russell Styleguide

Main Menu 

<div class="main-menu">
    <nav class="navbar main-menu__nav" aria-label="Main Menu">
        <h2 class="visuallyhidden">Main Menu</h2>
        <ul class="nav main-menu grid" role="navigation" aria-hidden="false">

            <li class="main-menu__item has-dropdown" role="menuitem">
                <div class="main-menu__item__inner">
                    <a class="main-menu__item__link" href="#">Indexes</a>
                    <i class='icon icon-chevron-down'> <svg class="icon">
            <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
          </svg></i><span class="caret"></span>
                </div>

                <ul class="submenu browser-default">

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub1<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub2<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub3<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub4<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub5<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub6<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub7<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub8<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                    <li>
                        <a class="submenu__item__link" href="#">Indexes sub9<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
                    </li>

                </ul>

                <ul class="megamenu">
                    <div class="megamenu--wrapper container">
                        <div class="megamenu--inner grid">
                            <div class="megamenu__left col">
                                <div class="megamenu__featured">
                                    <div class="megamenu__featured--title">
                                        <h3>Indexes</h3>
                                        <p>FTSE Russell Indexes</p>
                                    </div>
                                    <img src="https://unsplash.it/380/220?image=668" />
                                </div>
                            </div>
                            <div class="megamenu__middle col">
                                <ul class="megamenu__submenu">

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub1</a>
                                        <p>Indexes sub1 desc</p>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub2</a>
                                        <p>Indexes sub2 desd</p>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub3</a>
                                        <p>Indexes sub3 desc</p>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub4</a>
                                        <p>Indexes sub4 desc</p>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub5</a>
                                        <p>Indexes sub5 desc</p>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub6</a>
                                        <p>Indexes sub6 desc</p>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub7</a>
                                        <p>Indexes sub7 desc</p>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub8</a>
                                        <p>Indexes sub8 desc</p>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Indexes sub9</a>
                                        <p>Indexes sub9 desc</p>
                                    </li>

                                </ul>
                            </div>
                            <div class="megamenu__right col col-middle">
                                <ul class="megamenu__submenu">

                                    <li>
                                        <a class="megamenu__item__link" href="#">Contacts</a>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">News</a>
                                    </li>

                                    <li>
                                        <a class="megamenu__item__link" href="#">Standards Process</a>
                                    </li>

                                </ul>

                                <a href="#" class="btn btn--active">
  
  <span>Read More</span>
</a>

                            </div>
                        </div>
                    </div>
                </ul>

            </li>

            <li class="main-menu__item" role="menuitem">
                <div class="main-menu__item__inner">
                    <a class="main-menu__item__link" href="">Research</a>

                </div>

            </li>

            <li class="main-menu__item" role="menuitem">
                <div class="main-menu__item__inner">
                    <a class="main-menu__item__link" href="">Analytics</a>

                </div>

            </li>

            <li class="main-menu__item" role="menuitem">
                <div class="main-menu__item__inner">
                    <a class="main-menu__item__link" href="">Financial Solution</a>

                </div>

            </li>

            <li class="main-menu__item" role="menuitem">
                <div class="main-menu__item__inner">
                    <a class="main-menu__item__link" href="">Blogs & Events</a>

                </div>

            </li>

        </ul>
    </nav>
</div>
 
<div class="main-menu">
    <nav class="navbar main-menu__nav" aria-label="Main Menu">
      <h2 class="visuallyhidden">Main Menu</h2>
      <ul class="nav main-menu grid" role="navigation" aria-hidden="false">
      {% for item in menuItems %}
        <li class="main-menu__item{% if item.below %} has-dropdown{% endif %}" role="menuitem">
          <div class="main-menu__item__inner">
            <a class="main-menu__item__link" href="{{ item.url }}">{{ item.title }}</a>
            {% if item.below %}<i class='icon icon-chevron-down'> <svg class="icon">
            <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
          </svg></i><span class="caret"></span>{% endif %}
          </div>
          {% if item.below %}
          <ul class="submenu browser-default">
          {% for subitem in item.below %}
              <li>
                <a class="submenu__item__link" href="{{ item.url }}">{{ subitem.title }}<svg class="submenu-icon">
                  <use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use>
                </svg></a>
              </li>
          {% endfor %}
          </ul>

            <ul class= "megamenu">
            <div class="megamenu--wrapper container">
              <div class="megamenu--inner grid">
                <div class="megamenu__left col">
                  <div class="megamenu__featured">
                    <div class="megamenu__featured--title">
                      <h3>{{ item.title }}</h3>
                      <p>{{ item.subtitle }}</p>
                    </div>
                    <img src="{{ item.below_img }}" />
                  </div>
                </div>
                <div class="megamenu__middle col">
                  <ul class="megamenu__submenu">
                  {% for subitem in item.below %}
                      <li>
                        <a class="megamenu__item__link" href="{{ item.url }}">{{ subitem.title }}</a>
                        <p>{{ subitem.description }}</p>
                      </li>
                  {% endfor %}
                  </ul>
                </div>
                <div class="megamenu__right col col-middle">
                  <ul class="megamenu__submenu">
                  {% for subitem in item.spotlight %}
                    <li>
                      <a class="megamenu__item__link" href="{{ item.url }}">{{ subitem.title }}</a>
                    </li>
                  {% endfor %}
                  </ul>
                  {% render '@buttons', item.cta %}
                </div>
              </div>
            </div>
            </ul>
          {% endif %}
        </li>
      {% endfor %}
      </ul>
    </nav>
  </div>
 
{
  "menuItems": [
    {
      "title": "Indexes",
      "subtitle": "FTSE Russell Indexes",
      "url": "#",
      "description": "FTSE Russell Indexes",
      "enabled": true,
      "below_img": "https://unsplash.it/380/220?image=668",
      "below": [
        {
          "title": "Indexes sub1",
          "url": "#",
          "description": "Indexes sub1 desc",
          "enabled": true
        },
        {
          "title": "Indexes sub2",
          "url": "#",
          "description": "Indexes sub2 desd",
          "enabled": true
        },
        {
          "title": "Indexes sub3",
          "url": "#",
          "description": "Indexes sub3 desc",
          "enabled": true
        },
        {
          "title": "Indexes sub4",
          "url": "#",
          "description": "Indexes sub4 desc",
          "enabled": true
        },
        {
          "title": "Indexes sub5",
          "url": "#",
          "description": "Indexes sub5 desc",
          "enabled": true
        },
        {
          "title": "Indexes sub6",
          "url": "#",
          "description": "Indexes sub6 desc",
          "enabled": true
        },
        {
          "title": "Indexes sub7",
          "url": "#",
          "description": "Indexes sub7 desc",
          "enabled": true
        },
        {
          "title": "Indexes sub8",
          "url": "#",
          "description": "Indexes sub8 desc",
          "enabled": true
        },
        {
          "title": "Indexes sub9",
          "url": "#",
          "description": "Indexes sub9 desc",
          "enabled": true
        }
      ],
      "spotlight": [
        {
          "title": "Contacts",
          "url": "#",
          "description": "Contacts",
          "enabled": true
        },
        {
          "title": "News",
          "url": "#",
          "description": "News",
          "enabled": true
        },
        {
          "title": "Standards Process",
          "url": "#",
          "description": "Standards Process",
          "enabled": true
        }
      ],
      "cta": {
        "href": "#",
        "label": "Read More",
        "mods": "active"
      }
    },
    {
      "title": "Research"
    },
    {
      "title": "Analytics"
    },
    {
      "title": "Financial Solution"
    },
    {
      "title": "Blogs & Events"
    }
  ],
  "languagemToggleMobile": [
    {
      "title": "English",
      "url": "#",
      "description": "English",
      "active": true
    },
    {
      "title": "Français",
      "url": "#",
      "description": "Français",
      "active": null
    },
    {
      "title": "Deutsche",
      "url": "#",
      "description": "Deutsche",
      "active": null
    },
    {
      "title": "日本語",
      "url": "#",
      "description": "Japanese",
      "active": null
    },
    {
      "title": "中文",
      "url": "#",
      "description": "Chinese",
      "active": null
    },
    {
      "title": "Español",
      "url": "#",
      "description": "Español",
      "active": null
    }
  ]
}
  • Content: 
    .main-menu__nav {
  width: 100%;

  @include mq($breakpoint-lg) {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
  }
}

div.main-menu {
  @include mq-only($breakpoint-mob) {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 100%;
  }
}

.main-menu {
  @include mq($breakpoint-lg) {
    position: initial;
    display: flex;
  }


  .language-switcher {
    @include mq($breakpoint-lg) {
      display: none;
    }
  }
}

.main-menu__item {
  border: $border-width-thin solid $gray-lighter;

  @include mq($breakpoint-lg) {
    border: none;
    padding: 0 $space-xs;
  }

  &.hovered .megamenu {

    @include mq($breakpoint-lg) {
      background-color: transparent;
      height: 354px;
      transition: height 0.3s;
    }
  }

  .icon-chevron-down {

    display: inline-block;
    cursor: pointer;
    padding: $space-xl;

    @include mq($breakpoint-lg) {
      display: none;
    }

    .icon {
      transition: all 0.3s ease;
      width: 18px;
      height: 12px;
      fill: $primary;
    }
  }

  &__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  &:hover,
  &:focus {
    background-color: $primary;
    transition: all 0.3s ease;

    .main-menu__item__link,
    .icon {
      color: $white;
      fill: $white;

      @include mq($breakpoint-lg) {
        color: $primary;
      }

    }

    @include mq($breakpoint-lg) {
      background: none;
      color: $primary;
    }
  }

  &.open {
    @include mq-only($breakpoint-mob) {
      background-color: $primary;
      transition: all 0.3s ease;

      .main-menu__item__link{
        color: $white;
      }

      .icon {
        transform: rotate(90deg);
        transition: all 0.3s ease;
        fill: $white;
      }

      .icon-chevron-down {
        border-left: 0;
      }

      .submenu {
        max-height: 10000px;
      }
    }
  }
}

.main-menu__item__link {
  color: $gray;
  cursor: pointer;
  font-weight: $font-weight-normal;
  text-decoration: none;
  padding: $space-xl $space-sm;
  width: 100%;
  display: block;
  position: relative;
  transition: all 0.4s ease;

  @include mq($breakpoint-lg) {
    padding: $space-md $space-sm;
  }

  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(40deg, $primary 0%, $secondary 100%);
    height: 2px;
    width: 100%;
    transition: all 0.3s ease-in-out 0s;
    transform: scaleX(0);
    visibility: hidden;
  }



  @include mq($breakpoint-sm) {
    font-size: $font-size-sm;
  }

  @include mq($breakpoint-xl) {
      font-size: 1.125rem;

      &:hover:after {
        visibility: visible;
        transform: scaleX(1);
      }
  }

}

.caret {
  display: none;

  @include mq($breakpoint-lg) {
    @include caret(bottom, 5px, $gray);
    content: '';
    display: inline-flex;
    margin-left: map(spaces, small);
  }
}

.submenu {
  background:	map(colors, primary, default);
  margin: 0;
  max-height: 0;
  overflow-y: hidden;
  padding: 0 83px 0 $space-xl;
  transition-duration: .5s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  transform-origin: top;

  @include mq($breakpoint-lg) {
    display: none;
  }

  > li {
    padding: $space-lg $space-md;
    position: relative;

    &:first-child {
      padding-top: $space-lg*2;

      .submenu-icon {
        top: calc(24px + 1.25rem);
      }
    }

    &:last-child {
      padding-bottom: $space-lg*2;
    }
  }

  a {
    color: map(colors, primary, lighter);

    &:not(.btn) {
      font-weight: $font-weight-normal;
    }

    &.btn {
      color: $white;
      line-height: 1;
      height: auto;
      padding: $space-xs;
    }
  }

  &-icon {
    fill: map(colors, primary, lighter);
    height: 18px;
    position: absolute;
    right: $space-md;
    top: 24px;
    transform: rotate(270deg);
    width: 12px;
  }

  .right-section {
    border-top: $border-width-thin solid #b3b3b3;
    padding-left: $space-xl;

    &--title {
      color: #b3b3b3;
    }

    &--cta {
      text-align: right;
    }

    &--title,
    &--link {
      font-size: $font-size-sm;
      font-weight: $font-weight-normal;
      padding: $space-xs 0;
    }
  }
}

.megamenu {
  position: fixed;
  width: 100%;
  right:0;
  left: 0;
  top: 166px;
  z-index: $zindex-dropdown;
  background: transparent;
  margin: 0;
  transition: height 0.3s ease-in-out;
  height: 0;
  overflow:hidden;


  &--wrapper {
    border-top: 2px solid $primary;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);
    margin: 0 auto;
  }

  &--inner {
    background-color: $white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0;
    width: 100%;
  }

  &__left {
    flex-basis: 28%;
    padding: 0;
  }

  &__middle {
    flex-basis: calc(44% - 2rem);
    padding: 0 $space-md;

    ul {
      column-count: 2;
      column-gap: $space-xl;
      column-rule: $border-width-thin solid $gray-lighter;
      height: 100%;
      margin-bottom: 0;
      padding: $space-md 0;

      li {
        break-inside: avoid;
      }
    }
  }

  &__right {
    border-left: $border-width-thin solid $gray-lighter;
    display: flex;
    flex-basis: calc(28% - 2rem);
    flex-direction: column;
    justify-content: space-between;
    margin: $space-md 0;
    padding: 0 $space-md;

    ul {
      padding: .725rem 0 $space-md;

      li {
        padding: $space-xxs 0;
      }
    }

    .btn {
      margin-bottom: $space-big;
      width: 100%;
    }
  }

  &__submenu {
    padding: $space-md;

    li {
      padding: $space-md 0;

      a {
        color: $black;
        font-size: $font-size-lg;
      }

      p {
        color: $black;
        font-size: $font-size-base;
      }
    }
  }
}


.megamenu__featured {

  &--title {
    padding: $space-md;
    color: $white;
    background-color: $primary;

    h3 {
      line-height: 1;
      margin-bottom: 0;
    }

    p {
      font-size: $font-size-base;
    }
  }

  img {
    height: 250px;
    margin-bottom: -5px;
    width: 100%;
  }
}


.nav-toggle {
  cursor: pointer;
  position: relative;

  @include mq($breakpoint-lg) {
    display: none;
  }

  &:focus {
    outline: none;
  }

  &--wrapper {
    width: 25px;
    position: relative;
    transform: rotate(0deg);
    transition: .5s ease-in-out;
    cursor: pointer;
    grid-template-columns: 1fr 1fr;

    @include mq-only($breakpoint-mob) {
      display: grid;
    }
  }

  &__title {
    font-weight: $font-weight-normal;
    padding: 0 $spacer 0 0;

    &.close {
      display: none;
    }
  }

  &__spans {
    min-width: 25px;
  }

  span {
    display: block;
    height: 3px;
    width: 100%;
    background: $primary;
    opacity: 1;
    transform: rotate(0deg);
    transition: .25s ease-in-out;
  }

  span:nth-child(1) {
    margin-top: 0;
    transform-origin: left center;
  }

  span:nth-child(2) {
    margin-top: 5px;
    transform-origin: left center;
  }

  span:nth-child(3) {
    margin-top: 5px;
    transform-origin: left center;
  }

  &--open span:nth-child(1) {
    transform: rotate(45deg);
    margin-top: -3px;
  }

  &--open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  &--open span:nth-child(3) {
    transform: rotate(-45deg);
    margin-top: 7.5px;
  }

  &--open .nav-toggle__title {
    display: none;

    &.close {
      display: block;
    }
  }
}
  • URL: /components/raw/main-menu/_main-menu.scss
  • Filesystem Path: src/components/molecules/navigation/main-menu/_main-menu.scss
  • Size: 7.5 KB

There are no notes for this item.