FTSE Russell Styleguide

Language Switcher 

<nav role="navigation" class="language-switcher">
    <h2 class="visuallyhidden">Language</h2>
    <ul class="dropdown-menu" role="listbox" aria-hidden="false">

        <li class="lang active">
            <a title="Active Language English" tabindex="" href="#">English<i class='icon icon-caret'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg></i></a>
        </li>

    </ul>
    <div class="lang-switcher__popup">
        <ul class="languages-list">

            <li class="lang active"><i class='icon icon-check'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-check"></use></svg></i> English</li>

            <li class="lang"><a href="#" title="Language Français">Français</a></li>

            <li class="lang"><a href="#" title="Language Deutsche">Deutsche</a></li>

            <li class="lang"><a href="#" title="Language 日本語">日本語</a></li>

            <li class="lang"><a href="#" title="Language 中文">中文</a></li>

            <li class="lang"><a href="#" title="Language Español">Español</a></li>

        </ul>
    </div>
</nav>
 
<nav role="navigation" class="language-switcher">
  <h2 class="visuallyhidden">Language</h2>
  <ul class="dropdown-menu" role="listbox" aria-hidden="false">
    {% for item in menuItems %}
      {% if item.active %}
        <li class="lang active">
          <a title="Active Language {{ item.title }}" tabindex="{{@index}}" href="{{ item.url }}">{{ item.title }}<i class='icon icon-caret'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-caret"></use></svg></i></a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
  <div class="lang-switcher__popup">
          <ul class="languages-list">
          {% for item in menuItems %}
           {% if item.active %}
            <li class="lang active"><i class='icon icon-check'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-check"></use></svg></i> {{ item.title }}</li>
          {% endif %}
          {% if not item.active %}

            <li class="lang"><a href="{{ item.url }}" title="Language {{ item.title }}">{{ item.title }}</a></li>

          {% endif %}
          {% endfor %}
          </ul>
        </div>
</nav>
 
{
  "menuItems": [
    {
      "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: 
    .language-switcher {
  font-weight: $font-weight-normal;
  position: relative;
  //max-height: $nav_height;
  //overflow: hidden;
  text-align: center;
  transition: all 0.2s ease-in-out;
  padding: $space-xs 0px;

  .dropdown-menu {
    transform: translateY(0);
    transition: all 0.2s ease-in-out;
    padding: 0px 0 0 1.25rem;
    margin-bottom: 2px;

    @include mq($breakpoint-lg) {
      padding: 0px $space-lg;
      margin-bottom: $space-xs;
    }
  }



  .lang > a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: $gray;
    text-decoration: none;
    transition: all 0.2s ease-in-out;

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

    &:focus,
    &:hover {
      outline: none;
      color: map(colors, primary, default);
    }

    i.icon-caret {
      margin-left: 8px;
    }

    .icon-caret .icon {
      padding-top: 5px;
      width: 12px;
      height: 12px;
      fill: $gray;
      transition: 0.3s ease;
    }

  }
  &__mobile {

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

  &.open {
    .lang > a .icon-caret .icon {
      fill: map(colors, primary, default);
      transform: rotate(180deg);
      transform-origin: center;
      padding-top: 0px;
    }
  }

}

.lang-switcher__popup {
  position: absolute;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .2s, height .2s;
  text-align: left;
  padding: 10px 5px;
  min-width: 100px;
  right: 0;
  visibility: hidden;

  @include mq($breakpoint-lg) {
    min-width: 115px;
  }

  &--show {
    opacity: 1;
    visibility: visible;
    z-index: 9999;
  }


  i.icon-check{
    margin-right: 3px;
  }

  svg.icon {
    padding-top: 5px;
    width: 12px;
    height: 12px;
    fill: map(colors, primary, default);
    transition: 0.3s ease;
  }

  li.lang.active {
    padding: 10px 10px 10px 3px;
    color: map(colors, primary, default);
    display: block;
    white-space: nowrap;
    @include mq($breakpoint-lg) {
      font-size: $font-size-sm;
    }

    div {
      display: block;
    }
  }

  li.lang a {
    padding: 10px 20px;
    transition: background-color .2s,color .2s;
    text-decoration: none;
    color: #1B3355;
    display: inline-block;
    width: 100%;
    white-space: nowrap;

    &:hover {
      background: map(colors, primary, default);
      color: #FFF;
    }
  }


  ul {
    margin-bottom: 0px;
  }
}
  • URL: /components/raw/language-switcher/_language-switcher.scss
  • Filesystem Path: src/components/molecules/navigation/language-switcher/_language-switcher.scss
  • Size: 2.5 KB

There are no notes for this item.