• Translate

7/17/2017

Tutorials Create Horizontal Responsive Menu With Overflow List Being Drop Down

Tutorial Blogspot |

Advertisement

Tutorials Create Horizontal Responsive Menu With Overflow List Being Drop Down

If you do not understand the title of the post, please see the animated gif in the post thumbnail above. Such horizontal menus are now used by Blogger's new default templates. Quite interesting is not it?

Therefore, I then try to create a horizontal responsive overflow list menu to dropdown as the new default template Blogger used to be used also by custom template users.

Demonya as seen on the blog with Blogger default template below, the top menu is the default menu new Blogger template, while the second menu is the menu that I created. Please try resizing the browser or please try using responsive tool.

How, interested to try it too?

Please use the codes below.

Save the following CSS code above </head> code :
 <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>
Then save the following javascript code above the code </body>
 <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>
Then use the HTML code like below to display the 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>
And make sure you have saved the jquery library in any template of your blog.

Cooperation with kompiajaib

Disqus
Blogger
Comment
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

No comments Add Comment

Comments not appropriate topic will sign SPAM.