navigation with widgetz

In this example below you will see how to do a navigation with widgetz with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by rickmint, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright rickmint ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>navigation with widgetz</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='nav'>
  <div class='nav__toggle'>Click to open</div>
  <div class='nav__logo'>
    <img src="http://via.placeholder.com/200x90" alt="">
  </div>
  <div class='nav__search'>
    <img src="http://via.placeholder.com/35x35" alt="">
  </div>
  <div class='nav__cta'>
    <button>Join us!</button>
  </div>  
  <div class='nav__burger'>
    <div class='nav__burger--icon'>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>  
    <ul class="nav__blog">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul> 
    <ul class="nav__main">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a></li>
    </ul> 
</div> 
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>dadas
<br>dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadasdadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>dadas
<br>dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadasdadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>dadas
<br>dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadasdadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>dadas
<br>dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadasdadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>dadas
<br>dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadasdadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>dadas
<br>dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
dadas
<br>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/rickmint/navigation-with-widgetz-GdOENx */
.nav {
  display: flex;
  flex-flow: row wrap;
  position: relative;
  z-index: 1;
  justify-content: space-around;
}
.nav .vertically-centered, .nav .nav__search, .nav .nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav__toggle {
  width: 100%;
  background-color: #01273D;
  color: white;
  flex: 1 100%;
  order: 1;
  height: 50px;
  position: relative;
}
.nav__logo {
  display: flex;
  align-items: center;
  flex: 1 200px;
  order: 3;
  justify-content: left center;
}
.nav__logo img {
  width: 100%;
  max-width: 200px;
}
.nav__search {
  flex: 1 auto;
  order: 5;
  max-width: 100px;
}
.nav__cta {
  flex: 1 auto;
  order: 6;
  max-width: 200px;
}
.nav__cta button {
  width: 100%;
  border: 0px;
  background-color: purple;
  color: white;
  padding: 10px;
}
.nav__blog {
  flex: 1 auto;
  list-style: none;
  order: 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.nav__blog li {
  display: inline;
}
.nav__main {
  list-style: none;
  order: 2;
  flex: 1 100%;
  position: absolute;
  top: 50px;
  background-color: white;
  z-index: 3;
  width: 100%;
  margin: auto;
  padding: 10px;
  border: 1px solid red;
}
.nav__main li {
  display: inline;
}

.nav__burger--icon span {
  display: none;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #d3531a;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.nav__burger--icon span:nth-child(1) {
  top: 8px;
  transform-origin: left center;
}

.nav__burger--icon span:nth-child(2) {
  top: 16px;
  transform-origin: left center;
}

.nav__burger--icon span:nth-child(3) {
  top: 22px;
  transform-origin: left center;
}

.nav__burger--icon span:nth-child(4) {
  top: 28px;
  transform-origin: left center;
}

.nav__burger--icon.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 5px;
  left: 0px;
  height: 2px;
}

.nav__burger--icon.open span:nth-child(2),
.nav__burger--icon.open span:nth-child(3) {
  width: 0%;
  opacity: 0;
}

.nav__burger--icon.open span:nth-child(4) {
  transform: rotate(-45deg);
  top: 28px;
  left: 0px;
  height: 2px;
}

@media (max-width: 1600px) {
  .nav {
    min-height: auto;
  }
  .nav__toggle {
    display: none;
    order: 0;
  }
  .nav__logo {
    order: 1;
  }
  .nav__search {
    order: 2;
  }
  .nav__burger {
    flex: 1 auto;
    order: 3;
    max-width: 50px;
    width: 100%;
    flex: 1 auto;
    max-width: 60px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .nav__burger--icon {
    position: relative;
    width: 100%;
    max-width: 32px;
    height: 32px;
  }
  .nav__burger--icon span {
    display: block;
  }
  .nav__burger:after {
    display: block;
    width: 100%;
    height: 0;
  }
  .nav__blog {
    order: 4;
    width: 100%;
  }
  .nav__blog li {
    width: 100%;
  }
  .nav__cta {
    order: 5;
    width: 100%;
  }
  .nav__main {
    order: 6;
    position: relative;
    width: 100%;
  }
  .nav__main li {
    display: block;
  }
}
.nav.open {
  min-height: 100vh;
  align-items: flex-start;
}


/*Downloaded from https://www.codeseek.co/rickmint/navigation-with-widgetz-GdOENx */
$.widget( "custom.navigationBar", {

    _create: function() {
      const navMain = $(".nav__main");
      const navToggle = $(".nav__toggle");

      //navMain.slideUp(0);
      navToggle.click(function() {
        navMain.slideToggle();
      });
      
        
    }
});

var bar = $( ".nav" ).navigationBar();

//const navMain = Array.from(this.element[0].children).filter(item => item.classList.contains('nav__main'));
    const menu = $('.nav__blog, .nav__cta,  .nav__main');
menu.fadeOut(0);
	$('.nav__burger--icon').click(function(){
		$(this).toggleClass('open');
    $(menu).fadeToggle('show');
    $('.nav').toggleClass('open');
	});

Comments