Aeroporto di Bologna - Design System

Mutant nav

300 × 150 
<nav role="navigation" class="c-mutant-nav ">
    <input type="checkbox" id="mutant-nav-toggle" name="other" class="u-visuallyhidden c-mutant-nav__checkbox">
    <label for="mutant-nav-toggle" class="c-mutant-nav__label">
        <span>Elenco sezioni</span>
        <img src="../../images/svgs/arrow-down-blue.svg" aria-hidden="true" alt="">
    </label>
    <ul class="c-mutant-nav__list">
        <li class="is-active">
            <a href="#one">Link number one</a>
        </li>
        <li class="">
            <a href="#two">Link number two</a>
        </li>
        <li class="">
            <a href="#three">Link number three</a>
        </li>
    </ul>

</nav>
 
<nav role="navigation" class="c-mutant-nav {{ modifier }}">
  <input type="checkbox" id="mutant-nav-toggle" name="other" class="u-visuallyhidden c-mutant-nav__checkbox">
  <label for="mutant-nav-toggle" class="c-mutant-nav__label">
    <span>{{ label.text }}</span>
    <img src="{{ path '/images/svgs/arrow-down-blue.svg' }}" aria-hidden="true" alt="">
  </label>
  <ul class="c-mutant-nav__list">
    {{#each items }}
      <li class="{{ this.class }}">
        <a href="{{ this.url }}">{{ this.text }}</a>
      </li>
    {{/each}}
  </ul>

</nav>
 
{
  "label": {
    "text": "Elenco sezioni"
  },
  "items": [
    {
      "text": "Link number one",
      "url": "#one",
      "class": "is-active"
    },
    {
      "text": "Link number two",
      "url": "#two"
    },
    {
      "text": "Link number three",
      "url": "#three"
    }
  ]
}
  • Content: 
    .c-mutant-nav {
  background-color: #fff;
  padding: remify(16px);
  @include shadow(high);
  border-radius: remify(4px);
  color: #000;
  top: remify(8px);
  max-width: remify(640px);
  margin: 0 auto;
  transition: background-color .3s ease;
  z-index: 100;

  .c-superhero--nav & {
    @include min-screen(bp(tablet-p)) {
      color: secondary(text, 100);
    }
  }


  @include min-screen(bp(tablet-p)) {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    max-width: none;
    padding: remify(16px) 0;
    box-shadow: none;
  }

}

.c-mutant-nav__label {
  display: flex;
  justify-content: space-between;
}

.c-mutant-nav__checkbox:checked ~ .c-mutant-nav__label {
    
  img {
    transform: rotate(180deg);
  }

}

.c-mutant-nav__list {
  display: none;
  margin-top: remify(12px);

  @include min-screen(bp(tablet-p)) {
    margin-top: 0;
    display: flex;
  }

  li {
    text-align: left;

    &.is-active {
      color: primary(sky, 120);
      
      a {
        text-decoration: none;
      }

    }

    a {
      @include min-screen(bp(tablet-p)) {
        color: currentColor;
      }
    }

    a:not([href*="#"]) {
      &:after {
        content: ' \2192';
        margin-left: remify(8px);
        display: inline-block;

        @include min-screen(bp(tablet-p)) {
          display: none;
        }

      }
    }

  }

  li + li {
    margin-top: remify(8px);

    @include min-screen(bp(tablet-p)) {
      margin-top: 0;
      margin-left: remify(32px);
    }

  }

}

.c-mutant-nav__checkbox:checked {

  & ~ .c-mutant-nav__list {
    display: block;

    @include min-screen(bp(tablet-p)) {
      display: flex;
    }
    
  }

}

.c-mutant-nav__label,
.c-mutant-nav__checkbox {
  @include min-screen(bp(tablet-p)) {
    display: none;
  }
}

/*------------------------------------*\
  Sticky modifier
\*------------------------------------*/

.c-mutant-nav--sticky {
  left: 50%;
  transform: translateX(-50%);
  margin-top: remify(8px);

  @include min-screen(bp(tablet-p)) {
    background-color: primary(sky, 20);
    left: 0;
    transform: none;
    margin-top: 0;
    width: 100vw !important;
    @include shadow(medium);
  }

}
  • URL: /components/raw/mutant-nav/_mutant-nav.scss
  • Filesystem Path: src/views/02-molecules/mutant-nav/_mutant-nav.scss
  • Size: 2.2 KB
  • Content: 
    (function($) {

  var $mutantNavMain = $('.c-mutant-nav');
  var $mutantNavAnchor = $(".c-mutant-nav__list li a");
  var $mutantNavSpan = $(".c-mutant-nav__label span");

  // Initialization of nav sticky
  $mutantNavMain.sticky(
    {
      topSpacing: 0
    }
  );

  // Event when nav becomes sticky
  $mutantNavMain.on('sticky-start', function() {
    $(this).addClass('c-mutant-nav--sticky');
  });

  // Event when nav is not sticky
  $mutantNavMain.on('sticky-end', function() {
    $(this).removeClass('c-mutant-nav--sticky');
  });

  // Toggle active class on links + Makes the scroll on page
  $mutantNavAnchor.click(function(e){
    $mutantNavAnchor.parent().removeClass('is-active');
    $(this).parent().addClass('is-active');
    
    // Change mutant nav span inner HTML
    $($mutantNavSpan).html($(this).html());

    var target = this.getAttribute("href");
    $("html, body").animate({
      scrollTop: ($(target).offset().top) - 56
    }, 800);

    $('.c-mutant-nav__checkbox').prop('checked', false); // closes dropdown list on mobile

  });

})(jQuery);
  • URL: /components/raw/mutant-nav/mutant-nav.js
  • Filesystem Path: src/views/02-molecules/mutant-nav/mutant-nav.js
  • Size: 1.1 KB

No notes defined.