adaptive menu

adaptive-menu.markdown

adaptive menu

A Pen by Elmira on CodePen.

License.

index.html

<div class="menu_justify_wrapper">
    <div class="menu_toggle_btn"></div>
    <nav class="menu_justify">
     <ul>
      <li><a href="#">item1</a></li>
      <li><a href="#">item2</a></li>
      <li><a href="#">item3</a></li>
      <li><a href="#">item4</a></li>
      <li><a href="#">item5</a></li>
    </ul>
  </nav>
</div>

script.js

(function($) {

      //Adaptive Menu
      $(document).ready( function() {
        $('.menu_toggle_btn').on('click', function() {
          $(this).toggleClass("collapsed");
          $('.menu_justify').slideToggle().toggleClass("open");
        });

        $("body").on('click', function(e) {
            if(!($(e.target).is(".menu_toggle_btn , .menu_justify *")) && $(".menu_justify").is(':visible')) { //outside_click
              $('.menu_justify').slideUp().removeClass('open');
              $('.menu_toggle_btn').removeClass('collapsed');
            }
          });

        var stickyNavTop = $('.menu_justify_wrapper').offset().top;

        var stickyNav = function(){
          var scrollTop = $(window).scrollTop();

          if (scrollTop > stickyNavTop) { 
            $('.menu_justify_wrapper').addClass('sticky');
          } else {
            $('.menu_justify_wrapper').removeClass('sticky'); 
          }
        };

        stickyNav();

        $(window).scroll(function() {
          stickyNav();
        });
        
      });

    })(jQuery);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

 .menu_justify{
      clear: both;
      width: 100%;
      text-align: center;
}

    .menu_justify li a{
      display: block;
      padding: 10px 15px;
      border: 1px solid #000;
    }

    .menu_justify li{
     display: table-cell;
     width: 1%;
    } 

   .menu_toggle_btn{
    display: none;
    position: relative;
    float: right;
    width: 30px;
    border-top: 4px solid #000;
    cursor: pointer;
    margin: 12px 0;
  }

  .menu_toggle_btn:before{
    top: -16px;
  } 

  .menu_toggle_btn:after{
    bottom: -12px;
  } 

  .menu_toggle_btn:before,
  .menu_toggle_btn:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: #000;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

  .menu_toggle_btn.collapsed:after{
    -webkit-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 1px -3px; 
  }

  .menu_toggle_btn.collapsed:before{ 
    -webkit-transform: rotate(45deg); 
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 0px 8px; 
  }

  .menu_toggle_btn.collapsed{
    border-color: transparent;
  }


  .sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
  }

  @media (max-width: 768px){
    .menu_toggle_btn{
     display: block;
   }
   .menu_justify{
    display: none;
  }
  .menu_justify ul{
    text-align: left;
  }
  .menu_justify li{
    display: block;
    width: auto;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />