Menu responsive horizontal overflow dengan list

Menu responsive horizontal overflow dengan list

Hoje vamos compartilhar um menu responsive dengan overflow list quando isso é feito resize esse tutorial é compartilhado por kompiajaib se você deseja instalar isso no seu template então siga os passos abaixo


Como adicionar o menu responsive horizontal 

Faça login no blogger então vá no menu tema editar HTML/JavaScript então procure por </head> e logo acima disso copie  e cole o seguinte código:

<style type='text/css'>
/*<![CDATA[*/
nav#menu-overflow {
  background: #fff;
  max-width: 100%;
    overflow-x: auto;
}
nav#menu-overflow ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav#menu-overflow ul li {
  float: left;
  list-style: none;
  font: 700 12px lato, arial;display: list-item;
}
nav#menu-overflow ul li.more {
  height:45px;
  line-height:45px;
  text-align: center;
  display: none;
  float: right
}
nav#menu-overflow ul li.more ul#overflow.show {
  display: block;
}
nav#menu-overflow ul li a,
nav#menu-overflow ul li span,
nav#menu-overflow ul li.more span.btnmore {
  display: block;
  background: #fff;
  color: #333;
  text-decoration: none;
  padding:0 1em;
  cursor: pointer;
  transition-duration: .3s;
  height:45px;
  line-height:45px;
}
nav#menu-overflow ul li a:hover,
nav#menu-overflow ul li span:hover {
  background: #e00;
  color: #fff;
}
nav#menu-overflow ul li.more #overflow {
  display: none;
  position: absolute;
  text-align: left;
  transition-duration: .3s;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
  background-color: #ffffff;
  z-index: 9999;
}
nav#menu-overflow ul li.more #overflow li {
  float: none;
}
nav#menu-overflow ul li.more #overflow li a {
  background: #fff;
  white-space: nowrap;
  padding: 0 15px;
  height: 35px;
  line-height: 35px;
}
nav#menu-overflow ul li.more #overflow li a:hover {
  background: #e00;
}
nav#menu-overflow ul li.more span.btnmore {
  background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23333333' d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat center center;
  height: 100%
}
/*]]>*/
</style>

Então procure por </body> e logo acima disso copie e adicione o seguinte código: 

<script>
//<![CDATA[
window.onresize = navigationResize;
navigationResize();
function navigationResize() {
  $('#nav li.more').before($('#overflow > li'));
  var $navItemMore = $('#nav > li.more'),
    $navItems = $('#nav > li:not(.more)'),
    navItemMoreWidth = navItemWidth = $navItemMore.width(),
    windowWidth = $(window).width(),
    navItemMoreLeft, offset, navOverflowWidth;
  $navItems.each(function() {
    navItemWidth += $(this).width();
  });
  navItemWidth > windowWidth ? $navItemMore.show() : $navItemMore.hide();
  while (navItemWidth > windowWidth) {
    navItemWidth -= $navItems.last().width();
    $navItems.last().prependTo('#overflow');
    $navItems.splice(-1, 1);
  }
  navItemMoreLeft = $('#nav .more').offset().left;
  navOverflowWidth = $('#overflow').width();
  offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth;
  $('#overflow').css({
    'left': offset
  });
}
function showOverflow() {
  document.getElementById("overflow").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.btnmore')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
//]]>
</script>

Então esse é o código HTML Do menu: 

<nav id="menu-overflow">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="#">Menu 7</a></li>
    <li><a href="#">Menu 8</a></li>
    <li class="more">
      <span onclick="showOverflow()" class="btnmore"></span>
      <ul id="overflow" class="dropdown-content"></ul>
    </li>
  </ul>
</nav>

Salve e pronto.

Click to comment