Off-canvas :: mobile navigation & Transperent Hero & parallax effect | uiKit - front-end framework. version 3.7.2

index.html

<!-- codepen editor mode - you could open the HTML tab in full width + only one extra line of CSS (not from uikit core) on this example 
**since rc.20(October 24, 2018)Offcanvas no longer requires a wrapping content div
-->

<!-- Sticky navbar -->
<div class="uk-position-top" id="top">
  <nav class="uk-navbar-container uk-navbar-transparent uk-light" data-uk-navbar="dropbar: false;"
       data-uk-sticky="animation: uk-animation-slide-top; 
                       sel-target: .uk-navbar-container; 
                       cls-active: uk-navbar-sticky; 
                       cls-inactive: uk-navbar-transparent uk-light; top: 0">
    <!-- LEFT -->
    <div class="uk-navbar-left">
      <a class="uk-navbar-item uk-logo" href="#">Logo</a>
      <!-- show ul on desktop-tablet with uk-visible@m = Only affects device widths of 960px and larger-->
      <ul class="uk-navbar-nav uk-visible@m">
        <li class="uk-active"><a href="#">Active</a></li>
        <li>
          <a href="#">Parent</a>
          <div class="uk-navbar-dropdown">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li class="uk-active"><a href="#">Active</a></li>
              <li><a href="#">Item</a></li>
              <li><a href="#">Item</a></li>
            </ul>
          </div>
        </li>
        <li><a href="#">Item</a></li>
        <li>
          <a href="#">
            <span class="uk-icon uk-margin-small-right" uk-icon="icon: star"></span>
            Features
          </a>
        </li>
      </ul>
    </div>
    <!-- social icons - hide on mobile -->
    <div class="uk-navbar-right">
      <div class="uk-navbar-item  uk-visible@m">
        <a title="Twitter" href="" class="uk-icon-button uk-margin-small-right" uk-icon="twitter"></a>
        <a uk-tooltip="title: Facebook; pos: bottom-center" title="Facebook" href="" class="uk-icon-button  uk-margin-small-right" uk-icon="facebook"></a>
        <a title="Google Plus" href="" class="uk-icon-button" uk-icon="google-plus"></a>
      </div>
    </div>
    <!-- search input -->
    <div id="search" class="uk-navbar-item uk-visible@m">
      <form action="javascript:void(0)">
        <div class="uk-inline">
          <a class="uk-form-icon uk-form-icon-flip" uk-icon="icon: search"></a>
          <input class="uk-input uk-form-width-medium" type="text" placeholder="Search...">
        </div>
      </form>
    </div>
    <!--off-canvas trigger hamburger btn. show only on mobile -->
    <a class="uk-navbar-toggle uk-hidden@m" href="#" data-uk-toggle="target: #offcanvas-nav-primary">
      <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span>
    </a>
    </div>
  </nav>
</div>
<!-- OFF-CANVAS NAVBAR (Trigger by hamburger btn)
modes: push / slide / reveal /none 
-->
<nav id="offcanvas-nav-primary" data-uk-offcanvas="overlay: true; mode: push; flip: true">
  <!-- offcanvas setting  -->
  <div class="uk-offcanvas-bar uk-flex uk-flex-column">
    <!-- navbar content her -->
    <!-- A - logo -->
    <a class="uk-align-left uk-logo" href="#">Logo - offcanvas</a>
    <!-- B - nav -->
    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
      <li class="uk-active"><a href="#">Active - offcanvas</a></li>
      <li class="uk-parent">
        <a href="#">Parent - offcanvas</a>
        <ul class="uk-nav-sub">
          <li><a href="#">Child one - offcanvas</a></li>
          <li><a href="#">Child two - offcanvas</a></li>
        </ul>
      </li>
      <li class=""><a href="#">ITEM - offcanvas</a></li>
    </ul>
    <!--C- contact us -->
    <footer class="uk-margin-large-top">
      <hr>
      <span uk-icon="icon: phone"></span>
      <a class="uk-link-text" href="#">+972 3434 3435</a>
    </footer>
  </div>
</nav>

<header id="hero-header">
  <div class="uk-section-secondary">
    <!-- change her the bg image + The overlay color/opacity/direction (under style="") -->
    <!-- Use "data-uk-height-viewport" for full 100VH hero (entire viewport) -->
    <div id="change-her-the-bg-image" class="uk-background-norepeat uk-background-cover uk-background-center-center  uk-section uk-section-large uk-flex uk-flex-middle" uk-parallax="bgx: 0,-60" data-uk-height-viewport="offset-top: false" style="background: linear-gradient(to right, rgba(30, 75, 115, 0.9), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/1900/508');">
      <div class="uk-width-1-1">
        <!-- hero container -->
        <div class="uk-container uk-container-large">
          <!-- Heading: Add margin top for h1 - like this the text looks more center v beacuse the navbar is transpernt -->
          <h1 class="uk-margin-small uk-margin-medium-top uk-width-large@m uk-text-left@m uk-text-center uk-h6 uk-heading-line" data-uk-parallax="opacity: 1,0;viewport: 0.95;media: @s">
            <!-- extra span for uk-heading-line -->
            <span>UiKit Navbar & Hero With OffCanvas</span>
          </h1>
          <h2 class="uk-margin-small uk-text-left@m uk-text-center uk-heading-large" 
              data-uk-parallax="y: 0,60;opacity: 1,0; easing: 0.8;viewport: 0.95;media: @s">
            UIKIT Hero
          </h2>
          <!-- Arrow: With link to #main section + uk-scroll="" for smooth scrolling + offset (Beacuse the nav is sticky)-->
          <div class="uk-margin uk-text-left@m uk-text-center" data-uk-parallax="y: 0,450;opacity: 1,0;easing: 0.3;target: !.uk-section;media: @s">
            <a uk-icon="icon: arrow-down;ratio: 1.5" class="uk-icon-link uk-icon" href="#main" data-uk-scroll="offset: 100"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Demo docs content -->
<main id="main" class="uk-container uk-container-large uk-margin-top">
  <div id="message"></div>
  <button class="uk-button uk-margin uk-button-danger uk-margin-small-right" type="button" uk-toggle="target: #offcanvas-nav-primary">Open-Off-Canvas Menu</button>
  <br>
  <br>
  <div class="uk-card uk-card-default uk-card-body">
    <h1 class="uk-text-medium">UIkit 3 offCanvas navbar example <small>(Zero custom styles)</small></h1>
    <p>Responsive & mobile support & cool design & Touch-friendly (Open/close)
    </p>
    <ul class="uk-list uk-list-bullet">
      <li><a target="_blank" href="https://getuikit.com/docs/navbar">UIkit 3 navbar docs</a></li>
      <li><a target="_blank" href="https://getuikit.com/docs/offcanvas">UIkit 3 offcanvas docs</a></li>
      <li><a target="_blank" href="https://getuikit.com/docs/nav">UIkit 3 nav docs (For the menu inside the offCanvas)</a></li>
      <li><span uk-icon="icon: youtube"></span>
        <a target="_blank" href=" https://www.youtube.com/watch?v=MfdMfobt3l4">uikit 2 "Off-canvas and mobile navigations" tutorial 
        </a>(Old but some consepts the same in version 3)</li>
    </ul>
  </div>
  <br>
  <a uk-icon="icon: arrow-up;ratio: 1.5" class="uk-icon-link uk-icon" href="#top" uk-scroll="">Back to top</a>

</main>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

off-canvas-mobile-navigation-transperent-hero-parallax-effect-uikit-front-end-framework-version-3-7-2.markdown

Off-canvas :: mobile navigation & Transperent Hero & parallax effect | uiKit - front-end framework. version 3.7.2

Uikit - Framework - Touch-friendly Off-canvas navigations example.

A Pen by Beibit Sakhanov on CodePen.

License.

script.js

/* offCanvas events */

UIkit.offcanvas('#offcanvas-nav-primary').toggle();

UIkit.util.on('#offcanvas-nav-primary', 'beforeshow', function () {
  // do something
  console.log('offcanvas beforeshow');
});

UIkit.util.on('#offcanvas-nav-primary', 'show', function () {
  // do something
  console.log('offcanvas show');
});

UIkit.util.on('#offcanvas-nav-primary', 'shown', function () {
  // do something
  console.log('offcanvas shown');
});

UIkit.util.on('#offcanvas-nav-primary', 'beforehide', function () {
  // do something
  console.log('offcanvas beforehide');
});

UIkit.util.on('#offcanvas-nav-primary', 'hide', function () {
  // do something
  console.log('offcanvas hide');
});

UIkit.util.on('#offcanvas-nav-primary', 'hidden', function () {
  // do something
  console.log('offcanvas hidden');
});

scripts

<script src="https://cdn.jsdelivr.net/npm/uikit@3.7.2/dist/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.7.2/js/uikit-icons.min.js"></script>

style.css

/* 
one from one: 
add background transition when you roll up and the navbar change back to transperenty */
.uk-navbar-container{
  transition: background-color 0.5s ease;
}

styles

<link href="https://cdn.jsdelivr.net/npm/uikit@3.7.2/dist/css/uikit.min.css" rel="stylesheet" />