Footer with mega menu

Organize sub menu with menu_item_parent.

Thumbnail

Pug
Scss
PHP

// <footerNav>
.uk-background-primary
  p.uk-text-center.text-white.uk-padding-default-top
    a(href='#top' uk-scroll)
      img.text-white(src='img/icon-backtotop.svg' uk-svg)
  .uk-container.uk-padding
    // <nav>
    .uk-grid-match.grid-divider-first.uk-margin-medium-bottom(uk-grid class='uk-child-width-1-5@m uk-child-width-1-2')
      each i in footer
        each j in i.nav
          div
            section
              h3.text-medium.uk-text-bold.text-white(style='letter-spacing: 1.8px; margin-bottom: 25px;')=j.title
              ul.uk-list()
                each k in j.navItems
                  li.uk-margin-default-bottom
                    a.text-small.text-white.link-secondary(href=k.href style='letter-spacing: 1.4px')=k.text
    // </nav>
    hr.uk-margin-remove(style='border-color:#2e586c')
    // <navPolicy>
    nav.uk-navbar-container.uk-flex-wrap(uk-navbar="")
      .uk-navbar-left
        ul.uk-navbar-nav.navbar-divider
          each i in footer
            each j in i.navPolicy
              li
                a.text-white.link-secondary(href=j.href style='letter-spacing: 1.6px;')=j.title
      .uk-navbar-right
        ul.uk-navbar-nav
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:facebook;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:twitter;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:linkedin;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:youtube;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:pinterest;ratio:1.2')
          li
            a.text-white.link-secondary(href="#")
              i(uk-icon='icon:google;ratio:1.2')
    // </navPolicy>
    hr.uk-margin-remove(style='border-color:#2e586c')
    // <copyRight>
    .uk-flex.uk-padding-small.uk-padding-default-top.uk-padding-remove-bottom.uk-flex-middle.uk-flex-wrap(class='uk-flex-between@s uk-flex-center')
      a(href='#')
        img(src='img/logo.jpg')
      p.uk-display-block(class='uk-hidden@s' style='width:100%;') &nbsp;
      p.uk-text-right.text-white.text-xsmall(class='uk-text-right@s uk-text-center') Copyright © Pools Corp. All rights reserved.
    // </copyRight>
// </footerNav>

.footer {
  .uk-navbar-container {
    padding: 62px 0;
    @include mq-m{
      padding: 30px 0;
    }
  }
  .uk-navbar-container:not(.uk-navbar-transparent) {
    background: transparent;
  }
  .uk-navbar-nav>li>a {
    min-height: auto;
    padding:0 26px;
    @include mq-s{
      padding: 0 10px;
    }
    @include mq(375px){
      font-size: rem(12px);
    }
  }
  .uk-navbar-right{
    .uk-navbar-nav>li>a {
      padding: 0 11px;
    }
  }
  @include mq-s {
    .uk-navbar-left,
    .uk-navbar-right {
      margin-left: auto;
      margin-right: auto;
    }
  }
}

<div class="uk-grid-match grid-divider-first uk-margin-medium-bottom uk-child-width-1-5@m uk-child-width-1-2" uk-grid="">
  <?php foreach(wp_get_nav_menu_items('footer') as $nav): ?>
  <?php if($nav->menu_item_parent === '0'): ?>
  <div>
    <section>
      <h3 class="text-medium uk-text-bold" style="letter-spacing: 1.8px; margin-bottom: 25px;">
        <a class="text-white" href="<?php echo esc_attr($nav->url); ?>"><?php echo esc_attr($nav->title); ?></a>
      </h3>
      <ul class="uk-list text-white">
        <?php foreach(wp_get_nav_menu_items('footer') as $i): ?>
        <?php if($i->menu_item_parent != 0 && $nav->ID == $i->menu_item_parent): ?>
        <li class="uk-margin-default-bottom"><a class="text-small text-white link-secondary" href="<?php echo $i->url; ?>" style="letter-spacing: 1.4px"><?php echo $i->title; ?></a></li>
        <?php endif; ?>
        <?php endforeach; ?>
      </ul>
    </section>
  </div>
  <?php endif; ?>
  <?php endforeach; ?>
</div>

Tags:

Footer two column

Thumbnail

PugSCSS

.uk-background-primary.uk-padding
  .uk-container
    .uk-grid-collapse.uk-flex-middle(uk-grid class='uk-child-with-1-2@m uk-flex-between@m uk-flex-center')
      div
        div.uk-text-center(class='uk-text-left@m')
          a(href='/')
            img(src='img/logo-w.svg')
          ul.uk-list.text-white.uk-margin-top
            li(style='margin-bottom:12px')
              img.icon-position-fixed(src='img/icon-mark.svg')
              span.uk-margin-small-left.text-small-spacing.text-small address
            li(style='margin-bottom:12px')
              img.icon-position-fixed(src='img/icon-mail.svg')
              span.uk-margin-small-left.text-small-spacing.text-small mail
            li(style='margin-bottom:12px')
              img.icon-position-fixed(src='img/icon-clock.svg')
              span.uk-margin-small-left.text-small-spacing.text-small time
      div
        ul.uk-navbar.social-link.uk-margin-medium-bottom.uk-flex-center.uk-margin-medium-top(class='uk-flex-right@m')
          li.uk-margin-right
            a.fb(href='#') 
              span.text-white Facebook
          li.uk-margin-right
            a.line(href='#') 
              span.text-white Line
          li
            a.youtube(href='#') 
              span.text-white Youtube
        ul.uk-subnav.uk-subnav-divider.uk-flex-center(class='uk-flex-right@m')
          li
            a.link-opacity.text-white.text-small.text-small-spacing(href='#') 關於我們
          li
            a.link-opacity.text-white.text-small.text-small-spacing(href='#') 聯絡我們
          li
            a.link-opacity.text-white.text-small.text-small-spacing(href='#') 隱私權聲明
        p.uk-text-center.text-white.text-small-s.text-xsmall.text-spacing-s.uk-margin-small-top.uk-padding-remove-bottom-s.uk-padding-bottom(class='uk-text-right@m') 2020 版權所有 © XXX股份有限公司 All right reserved.

footer {
  .social-link {
    li {
      padding-left: 0;
      a {
        padding-left: 1rem;
        display: inline-block;
        width: rem(37px);
        height: rem(37px);
        vertical-align: middle;
        transition: width .2s ease;
        overflow: hidden;
        span {
          display: block;
          position: relative;
          padding-left: 1.5rem;
          margin-left: .5rem;
          transition: all .2s ease;
          top: 10px;
          transform: translateX(50%);
          overflow:hidden;
          opacity: 0;
        }
        &:hover {
          width: rem(120px);
          background-position: 0 rem(-37px)!important;
          &.fb {
            width: rem(120px);
          }
          &.line {
            width: rem(80px);
          }
          &.instagram {
            width: rem(140px);
          }
          span {
            transform: translateX(0);
            opacity: 1;
          }
        }
      }
    }
    @include mq(960px){
      margin: 40px 0!important;
    }
  }
  @include mq(640px){
    .uk-padding {
      padding: 2rem 0 0 0;
    }
    .uk-subnav {
      margin-left: 0;
    }
    .uk-subnav>* {
      padding-left: .2rem;
      a {
        font-size: 12px;
      }
    }
    .uk-subnav-divider>:nth-child(n+2):not(.uk-first-column)::before {
      margin-right: 5px;
      height: .8rem;
    }
  }
}