Register Nav

PHP
function setNavigation(){
    if (function_exists('add_theme_support')) {
      add_theme_support('menus');
    }
    function header_menu(){
      wp_nav_menu(
      array(
          'theme_location'  => 'header-menu',
          'menu'            => '',
          'container'       => 'div',
          'container_class' => 'menu-{menu slug}-container',
          'container_id'    => '',
          'menu_class'      => 'menu',
          'menu_id'         => '',
          'echo'            => true,
          'fallback_cb'     => 'wp_page_menu',
          'before'          => '',
          'after'           => '',
          'link_before'     => '',
          'link_after'      => '',
          'items_wrap'      => '<ul>%3$s</ul>',
          'depth'           => 0,
          'walker'          => ''
        )
      );
    }
    function footer_menu(){
      wp_nav_menu(
        array(
          'theme_location'  => 'footer-menu',
          'menu'            => '',
          'container'       => 'div',
          'container_class' => 'menu-{menu slug}-container',
          'container_id'    => '',
          'menu_class'      => 'menu',
          'menu_id'         => '',
          'echo'            => true,
          'fallback_cb'     => 'wp_page_menu',
          'before'          => '',
          'after'           => '',
          'link_before'     => '',
          'link_after'      => '',
          'items_wrap'      => '<ul>%3$s</ul>',
          'depth'           => 0,
          'walker'          => ''
        )
      );
    }
    function register_nav(){
      register_nav_menus(array( 
        'header-menu' => '頁首', 
        'footer-menu' => '頁尾',
      ));
    }
    add_action('init', 'register_nav');
  }

Tags:

Sticky navbar with scroll indicator

The fixed sticky navigation when scrolling page from top 150px. Including the scroll indicator.

Thumbnail

.navbar-sticky.uk-background-default(uk-sticky='top: 150' class='uk-visible@m')
  each i in header
    each j in i.navbar  
      div(uk-grid)
        .uk-padding-default-top.uk-padding-default-bottom.logo.uk-margin-left(style='width:325px;background-color:#ffe403')
          h1
            a(href='/')
              img(src=j.src)
        .uk-width-expand.uk-position-relative
          ul.uk-flex.uk-flex-middle.uk-flex-right.uk-margin-left.navbar(style='width: calc(100% - 160px);height:100%; overflow:scroll')
            each k,index in j.nav
              if index===0
                li.uk-active
                  a.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text
              else
                li
                  a.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text
          each l in j.navVideo
            a.uk-display-block.uk-position-center-right(style='width:140px' class="uk-visible@l")
              .uk-display-block.uk-background-cover(data-src=l.src uk-img style='width:100%;height:90px;')
              img.uk-position-center(src=l.icon style='width: 40px; z-index:10')
      .scrollIndicator.uk-background-secondary(style="height:6px;width:0;")
.navbar-sticky {
  position: fixed;
  width: 100%;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: all .8s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-100%);
  &.uk-sticky-fixed {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  & + .uk-sticky-placeholder {display:none!important}
}
/**
 * Scroll Indicator
 */

window.onscroll = function () { scrollIndicatior() };

function scrollIndicatior() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  Array.from(vars.scrollIndicator).forEach(element=>{
    element.style.width = scrolled + "%";
  })
}
<div class="navbar-sticky uk-background-default uk-visible@m" uk-sticky="top: 150" style="z-index:10000">
  <div uk-grid="uk-grid">
    <div class="uk-padding-default-top uk-padding-default-bottom logo uk-margin-left" style="width:325px;background-color:#ffe403">
      <h1><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.svg"/></a></h1>
    </div>
    <div class="uk-width-expand uk-position-relative">
      <ul class="uk-flex uk-flex-middle uk-flex-right uk-margin-left navbar scrollbar" style="width: calc(100% - 160px);height:100%; overflow:scroll">
        <?php $navs = wp_get_nav_menu_items('main'); foreach($navs as $nav): ?>
        <li <?php echo ( $nav->object_id == get_queried_object_id() ) ? 'class="uk-active"':''; ?>><a class="text-medium uk-text-bold uk-text-nowrap link-secondary" href="<?php echo esc_attr($nav->url); ?>" style="margin-right:25px; letter-spacing:2px"><?php echo esc_html($nav->title); ?></a></li>
        <?php endforeach; ?>
      </ul>
      <?php 
      $args_post = array(
        'posts_per_page' => 1,
        'tax_query' => array(
          array(
            'taxonomy' => 'live',
            'field' => 'slug',
            'terms' => 'showinlive'
          )
        )
      );
      $query_post = new WP_Query( $args_post );
      if( $query_post->have_posts() ): while( $query_post->have_posts() ): $query_post->the_post();?>
      <a class="uk-display-block uk-position-center-right uk-visible@l icon-play" style="width:140px" href="<?php echo esc_attr(get_the_permalink()); ?>">
        <div class="uk-display-block uk-background-cover" data-src="<?php echo (has_post_thumbnail())?get_the_post_thumbnail_url():get_template_directory_uri().'/assets/img/default_image.png'; ?>" uk-img style="width:100%;height:90px;"></div>
        <span class="uk-position-center" style='transform: translate(-50%,-50%) scale(.3); z-index:10;'>
          <svg xmlns="http://www.w3.org/2000/svg" width="147" height="147"><g data-name="Group 2043" transform="translate(-887 -5791)"><circle data-name="Ellipse 1" cx="73.5" cy="73.5" r="73.5" transform="translate(887 5791)" fill="#fff" opacity=".251"/><g data-name="Ellipse 1 copy" transform="translate(887 5791)" fill="rgba(255,255,255,0)" stroke="rgba(255,255,255,0.65)" stroke-linejoin="round" stroke-width="3"><circle cx="73.5" cy="73.5" r="73.5" stroke="none"/><circle cx="73.5" cy="73.5" r="72" fill="none"/></g><path data-name="Shape 11" d="M984.64 5864.508l-37.643-21.511v43.016l37.64-21.508" fill="#fff"/></g></svg>
        </span>
      </a>
      <?php endwhile; wp_reset_postdata();endif; ?>
    </div>
  </div>
  <div class="scrollIndicator uk-background-secondary" style="height:6px;width:0;"></div>
</div>

Tags:

Tablet and mobile navbar

The navigation of tablet and mobile device with right side toggle menu items and search input.

Thumbnail

.navbarM(uk-sticky class='uk-hidden@m')
  nav.uk-background-secondary.navbar-mobile(uk-navbar style='height:60px;')
    .uk-navbar-left
      h1.uk-margin-remove-bottom(style='margin-left:15px;')
        a.link-opacity(href='/')
          img(src='img/logo.svg' style='transform:scale(.7);transform-origin:0 50%')
    .uk-navbar-right.uk-flex-stretch
      ul.uk-navbar-nav
        li
          a.toggle.uk-position-relative.uk-background-primary#btnNavbarNavM(href='#', uk-toggle='target: #navbarNavM' style='width:60px;min-height:60px')
            i.text-white.uk-position-center(uk-icon='icon: menu; ratio: 2')
            i.text-white.uk-position-center(uk-icon='icon: close; ratio: 2' style='display: none;')
  .scrollIndicator.uk-background-primary(style="height:6px;width:0;")
#navbarNavM(uk-offcanvas="flip: true; overlay: true; esc-close: false; bg-close: false" style="top: 60px;" class='uk-hidden@m')
  .uk-offcanvas-bar.navbar-m(style='background-color:#fc9202;box-shadow:0 0 0')
    form.uk-padding-default(method='get' action="")
      .uk-position-relative
        input.uk-input.text-small(type='text' max='100' name='s' placeholder='輸入關鍵字...' style='height:32px;padding:0 10px;border-radius:5px')
        button.uk-position-center-right(type='submit')
          img.uk-text-primary(src='img/icon-search_orange.svg' uk-svg)
    ul
      each i in header
        each j in i.navbar
          each k,index in j.nav
            if index===0
              li.uk-active
                a(href=k.href) 
                  i.icon.icon-nav-lectures-w=k.text
                  span.uk-position-center-right(uk-icon='chevron-right')
            else 
              li
                a(href=k.href) 
                  i.icon.icon-nav-lectures-w=k.text
                  span.uk-position-center-right(uk-icon='chevron-right')
.navbar-m {
  padding: 0!important;
  ul {
    li {
      a {
        position: relative;
        display: block;
        padding: 15px 30px;
        color: #fff;
        border-bottom: 1px solid rgba(255,255,255,.35);
        span {
          right: 15px;
          svg {
            transform: scale(1.2);
            polyline {
              stroke-width: 1.5;
            }
          }
        }
      }
      &:first-child {
        border-top: 1px solid rgba(255,255,255,.35)
      }
      &.uk-active {
        a {
          background-color: rgba(253, 230, 0,.4);
          &:before {
            content: '';
            @include pos-a(50%,'','',15px,6px,6px,5);
            background-color: $global-secondary-background;
            border-radius: 100%;
            margin-top: -2px;
          }
        }
      }
    }
  }
}
document.addEventListener('DOMContentLoaded',()=>{
  let icon = vars.btnNavbarNavM.querySelectorAll('i')
  vars.navbarNavM.addEventListener('show',e=>{
    icon[1].style.display = 'block'
    icon[0].style.display = 'none'
  })
  vars.navbarNavM.addEventListener('hide',e=>{
    icon[0].style.display = 'block'
    icon[1].style.display = 'none'
  })
})
<div class="navbarM uk-hidden@m" uk-sticky="uk-sticky">
  <nav class="uk-background-secondary navbar-mobile" uk-navbar="uk-navbar" style="height:60px;">
    <div class="uk-navbar-left">
      <h1 class="uk-margin-remove-bottom" style="margin-left:15px;"><a class="link-opacity" href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.svg" style="transform:scale(.7);transform-origin:0 50%"/></a></h1>
    </div>
    <div class="uk-navbar-right uk-flex-stretch">
      <ul class="uk-navbar-nav">
        <li><a class="toggle uk-position-relative uk-background-primary" id="btnNavbarNavM" href="#" uk-toggle="target: #navbarNavM" style="width:60px;min-height:60px"><i class="text-white uk-position-center" uk-icon="icon: menu; ratio: 2"></i><i class="text-white uk-position-center" uk-icon="icon: close; ratio: 2" style="display: none;"></i></a></li>
      </ul>
    </div>
  </nav>
  <div class="scrollIndicator uk-background-primary" style="height:6px;width:0;"></div>
</div>
<div class="uk-hidden@m" id="navbarNavM" uk-offcanvas="flip: true; overlay: true; esc-close: false; bg-close: false" style="top: 60px;">
  <div class="uk-offcanvas-bar navbar-m" style="background-color:#fc9202;box-shadow:0 0 0">
    <form class="uk-padding-default" method="get" action="<?php echo esc_attr(home_url()); ?>">
      <div class="uk-position-relative">
        <input class="uk-input text-small" type="text" max="100" name="s" placeholder="輸入關鍵字..." style="height:32px;padding:0 10px;border-radius:5px"/>
        <button class="uk-position-center-right" type="submit"><img class="uk-text-primary" src="<?php echo get_template_directory_uri(); ?>/assets/img/icon-search_orange.svg" uk-svg"/></button>
      </div>
    </form>
    <ul>
      <?php $navs = wp_get_nav_menu_items('main'); foreach($navs as $nav): ?>
      <li <?php echo ( $nav->object_id == get_queried_object_id() ) ? 'class="uk-active"':''; ?>><a href="<?php echo esc_attr($nav->url); ?>"> <i class="icon icon-nav-lectures-w"><?php echo esc_html($nav->title); ?></i><span class="uk-position-center-right" uk-icon="chevron-right"></span></a></li>
      <?php endforeach; ?>
    </ul>
  </div>
</div>

Tags:

Site’s Navigation with slash background

The site’s main navigation with gradient background and overflow menu items. There is a image button at the right position in navbar.

Thumbail

div(style='background: rgb(255,228,0);background: linear-gradient(90deg, rgba(255,228,0,1) 0%, rgba(255,228,0,1) 50%, rgba(0,0,0,1) 51%);' class='uk-visible@m')
  .uk-container
    each i in header
      each j in i.navbar  
        div(uk-grid)
          .uk-padding-default-top.uk-padding-default-bottom.logo(style='width:325px')
            h1
              a(href='/')
                img(src=j.src)
          .uk-width-expand.uk-position-relative(style='background-color:black')
            ul.uk-flex.uk-flex-middle.uk-margin-left.navbar(style='width: calc(100% - 160px);height:100%; overflow:scroll')
              each k,index in j.nav
                if index===0
                  li.uk-active
                    a.text-white.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text
                else
                  li
                    a.text-white.text-medium.uk-text-bold.uk-text-nowrap.link-secondary(href=k.href style="margin-right:25px; letter-spacing:2px")=k.text
            each l in j.navVideo
              a.uk-display-block.uk-position-center-right(style='width:140px' class="uk-visible@l")
                .uk-display-block.uk-background-cover(data-src=l.src uk-img style='width:100%;height:90px;')
                img.uk-position-center(src=l.icon style='width: 40px; z-index:10')
.logo {
  position: relative;
  &:after {
    content: '';
    @include pos-a(0,-16px,'','',40px,100%,5);
    background-color: $global-secondary-background;
    transform: skewX(-20deg);
    border-right: 10px solid $global-primary-background;
  }
}

.navbar {
  li.uk-active {
    a {
      position: relative;
      color: $global-secondary-background!important;
      &:before {
        content: '';
        @include pos-a('','',-10px,50%,6px,6px,5);
        margin-left: -5px;
        border-radius: 100%;
        background-color: $global-secondary-background;
      }
    }
  }
}

<div class="uk-visible@m" style="background: rgb(255,228,0);background: linear-gradient(90deg, rgba(255,228,0,1) 0%, rgba(255,228,0,1) 50%, rgba(0,0,0,1) 51%);">
  <div class="uk-container">
    <div uk-grid="uk-grid">
      <div class="uk-padding-default-top uk-padding-default-bottom logo" style="width:325px">
        <h1><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/logo.svg"/></a></h1>
      </div>
      <div class="uk-width-expand uk-position-relative" style="background-color:black">
        <ul class="uk-flex uk-flex-middle uk-margin-left navbar scrollbar" style="width: calc(100% - 160px);height:100%; overflow:scroll">
          <?php $navs = wp_get_nav_menu_items('main'); foreach($navs as $nav): ?>
          <li <?php echo ( $nav->object_id == get_queried_object_id() ) ? 'class="uk-active"':''; ?>><a class="text-white text-large uk-text-bold uk-text-nowrap link-secondary" href="<?php echo esc_attr($nav->url); ?>" style="margin-right:25px; letter-spacing:2px"><?php echo esc_html($nav->title); ?></a></li>
          <?php endforeach; ?>
        </ul>
        <?php $args_post = array(
          'posts_per_page' => 1,
          'tax_query' => array(
            array(
              'taxonomy' => 'live',
              'field' => 'slug',
              'terms' => 'showinlive'
            )
          )
        );
        $query_post = new WP_Query( $args_post );
        if( $query_post->have_posts() ): while( $query_post->have_posts() ): $query_post->the_post();?>
        <a class="uk-display-block uk-position-center-right uk-visible@l icon-play" href='<?php echo esc_attr(get_the_permalink()); ?>' style="width:140px">
          <div class="uk-display-block uk-background-cover" data-src="<?php echo (has_post_thumbnail())?get_the_post_thumbnail_url():get_template_directory_uri().'/assets/img/default_image.png'; ?>" uk-img style="width:100%;height:90px;"></div>
          <span class="uk-position-center" style='transform: translate(-50%,-50%) scale(.3); z-index:10;'>
            <svg xmlns="http://www.w3.org/2000/svg" width="147" height="147"><g data-name="Group 2043" transform="translate(-887 -5791)"><circle data-name="Ellipse 1" cx="73.5" cy="73.5" r="73.5" transform="translate(887 5791)" fill="#fff" opacity=".251"/><g data-name="Ellipse 1 copy" transform="translate(887 5791)" fill="rgba(255,255,255,0)" stroke="rgba(255,255,255,0.65)" stroke-linejoin="round" stroke-width="3"><circle cx="73.5" cy="73.5" r="73.5" stroke="none"/><circle cx="73.5" cy="73.5" r="72" fill="none"/></g><path data-name="Shape 11" d="M984.64 5864.508l-37.643-21.511v43.016l37.64-21.508" fill="#fff"/></g></svg>
          </span>
        </a>
        <?php endwhile; wp_reset_postdata();endif; ?>
      </div>
    </div>
  </div>
</div>

Tags: