JMT Alimentation Animal
Project version : 1.0.3

Nav Footer: Default 

<nav class="nav-footer">
    <button>Qui somme-nous</button>
    <h6 class="alt--font">Qui somme-nous</h6>

    <ul>
        <li><a href="#">JMT Alimentation animale</a></li>
        <li><a href="#">Nos magasins</a></li>
        <li><a href="#">Nos produits</a></li>
        <li><a href="#">Nos marques</a></li>
    </ul>
</nav>
 
<nav class="nav-footer{{#if social }} nav-footer--social{{/if}}">
   {{#unless social }}<button>{{nav_footer.title}}</button>{{/unless}}
   <h6 class="alt--font">{{nav_footer.title}}</h6>

   <ul>
      {{#if social }}
         <li><a href="{{facebook_link}}" title="Suivez-nous sur Facebook"><i class="icon icon--facebook"></i></a></li>
         <li><a href="{{instagram_link}}" title="Suivez-nous sur Instagram"><i class="icon icon--instagram"></i></a></li>
         <li><a href="{{youtube_link}}" title="Suivez-nous sur YouTube"><i class="icon icon--youtube"></i></a></li>
      {{else}}
         {{#each nav_footer.links }}
            <li><a href="{{this.link}}">{{{this.title}}}</a></li>
         {{/each}}
      {{/if}}
   </ul>
</nav>
 
{
  "nav_footer": {
    "title": "Qui somme-nous",
    "links": [
      {
        "title": "JMT Alimentation animale",
        "link": "#"
      },
      {
        "title": "Nos magasins",
        "link": "#"
      },
      {
        "title": "Nos produits",
        "link": "#"
      },
      {
        "title": "Nos marques",
        "link": "#"
      }
    ]
  }
}
  • Content: 
    .nav-footer {

   > button {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      width: 100%;
      outline: none;
      -webkit-appearance: none;
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;

      &:focus {
         outline: 2px dashed $c-red;
         @include mediaWQuery($media-query-m) { outline: none }
      }

      &::after {
         content: '';
         display: block;
         min-width: 20px;
         min-height: 20px;
         background-position: center;
         background-size: contain;
         background-repeat: no-repeat;
         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='%234C4636' d='M441.9 167.3l-19.8-19.8a12 12 0 00-17 0L224 328.2 42.9 147.5a12 12 0 00-17 0L6.1 167.3a12 12 0 000 17l209.4 209.4a12 12 0 0017 0l209.4-209.4a12 12 0 000-17z'/%3E%3C/svg%3E");
         transition: .2s ease;

         @include mediaWQuery($media-query-m) { display: none }
      }
   }

   button, h6 {
      margin: 0;
      font-size: rem(21);
      font-weight: 700;
      font-family: Nunito,sans-serif;
      color: $c-font-color;
   }

   h6 { display: none }
   @include mediaWQuery($media-query-m) {
      h6 { display: block }
      > button { display: none }
   }

   > ul {
      display: none;
      margin-top: .5rem;
      padding: 0;

      @include mediaWQuery($media-query-m) {
         display: block;
      }
   }

   &--visible {
      & > ul { display: block }

      & > button:after { transform: rotate(180deg) }
   }

   > ul > li {
      padding: .3rem 0;
      display: block;
   }

   > ul > li > a {
      font-size: rem(16);
      padding: 0;
      text-decoration: underline;
      &:hover, &:focus { text-decoration-color: transparent }
   }

   &--social {
      h6 { display: block }

      > ul { display: block }

      > ul > li {
         display: inline-block;

         & + li { margin-left: .4rem }
      }

      > ul > li > a {
         &:hover, &:focus {
            transform: scale(1.1) rotate(-3deg);
         }
      }
   }
}
  • URL: /components/raw/nav-footer/nav-footer.scss
  • Filesystem Path: components/06-components/01-navs/02-nav-footer/nav-footer.scss
  • Size: 2.3 KB

There are no notes for this item.