Fractal Starter
Project version : 0.1.2

Nav Footer 

<nav class="nav__footer">
    <h6>Evénements</h6>
    <button class="js-nav-toogle">Evénements</button>

    <ul>
        <li><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
        <li><a href="#">Lien</a></li>
    </ul>
</nav>
 
<nav class="nav__footer">
   <h6>{{nav_footer.title}}</h6>
   <button class="js-nav-toogle">{{nav_footer.title}}</button>

   <ul>
      {{#each nav_footer.items }}
      <li><a href="{{this.url}}">{{this.title}}</a></li>
      {{/each}}
   </ul>
</nav>
 
{
  "nav_footer": {
    "title": "Evénements",
    "items": [
      {
        "url": "#",
        "title": "Lien"
      },
      {
        "url": "#",
        "title": "Lien"
      },
      {
        "url": "#",
        "title": "Lien"
      },
      {
        "url": "#",
        "title": "Lien"
      },
      {
        "url": "#",
        "title": "Lien"
      }
    ]
  }
}
  • Content: 
    .nav__footer {
  h6 {
    display: none;
  }

  @include mediaWQuery($media-query-m) {
    h6,
    ul {
      display: block !important;
    }
    button {
      display: none;
    }
  }

  h6,
  button {
    font-weight: 700;
    font-family: $font-secondary;
    font-size: rem(14);
    margin-bottom: $margin-m;
    color: $c-link-footer;
  }

  button {
    width: 100%;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    margin: $margin-s 0;
    padding: 0;
    text-align: left;
    cursor: pointer;

    &::after {
      content: "";
      float: right;
      width: 15px;
      height: 15px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='chevron-down' class='svg-inline--fa fa-chevron-down fa-w-14' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23A79360' d='M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'/%3E%3C/svg%3E");
      transition: 0.2s ease;
    }
  }

  ul {
    display: none;

    > li {
      margin-bottom: $margin-xs;
      > a {
        color: $c-link-footer;
        text-decoration: underline;
        text-decoration-color: transparent;
        transition: 0.3s ease;
        word-break: break-word;

        &:hover,
        &:focus {
          text-decoration-color: initial;
        }
      }
    }
  }

  &--active {
    ul {
      display: block;
    }
    button::after {
      transform: rotate(180deg);
    }
  }
}
  • URL: /components/raw/nav-footer/nav-footer.scss
  • Filesystem Path: components/06-components/01-navs/05-nav-footer/nav-footer.scss
  • Size: 1.7 KB
  • Content: 
    let footerNavs = document.getElementsByClassName('nav__footer');
[].slice.call(footerNavs).forEach(footerNav => {
   let toggle = footerNav.querySelector('button');
   toggle.onclick = () => footerNav.classList.toggle('nav__footer--active');
})
  • URL: /components/raw/nav-footer/nav-footer.js
  • Filesystem Path: components/06-components/01-navs/05-nav-footer/nav-footer.js
  • Size: 244 Bytes

There are no notes for this item.