Footer with mega menu
Organize sub menu with menu_item_parent.
Thumbnail

// <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%;') 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:
- menu
- /
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; } } }