Use jquery CSS3 to implement drop-down navigation menu effects that imitate the Windows 10 start menu_jquery

This is a drop-down navigation menu effect that imitates the Windows 10 start menu. This drop-down menu uses jQuery and CSS3 to achieve a style effect similar to the Windows 10 start menu. Its code is concise and the effect is very stylish.

View the demo Source code download

The HTML structure of this drop-down menu is very simple. The basic HTML structure is as follows:

<div id="top-bar" class="top-bar">
 <div class="bar">
  <button id="navbox-trigger" class="navbox-trigger"><i class="fa fa-lg fa-th"></i></button>
 </div>
 <div class="navbox">
  <div class="navbox-tiles">
  <a href="#" class="tile">
   <div class="icon"><i class="fa fa-home"></i></div><span class="title">Home</span>
  </a>
  ......
  </div>
 </div>
</div>

CSS style

In the CSS style, the top navigation bar .top-bar is set to a fixed height of 50 pixels and relative positioning, and is given a high z-index value.

.top-bar {
 height: 50px;
 position: relative;
 z-index: 1000;
}

The drop-down menu.navbox is hidden at first. It uses absolute positioning and moves it to 200 pixels above the navigation bar through the translateY method.

.top-bar .navbox {
 visibility: hidden;
 opacity: 0;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 1;
 -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
   transform: translateY(-200px);
 -webkit-transition: all .2s;
   transition: all .2s;
}

Then when the drop-down menu is activated, its transparency is set back to 1, becomes visible, and is moved back to its original position through the translateY method.

.top-bar.navbox-open .navbox {
 visibility: visible;
 opacity: 1;
 -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
   transform: translateY(0);
 -webkit-transition: opacity .3s, -webkit-transform .3s;
   transition: opacity .3s, transform .3s;
}

JavaScript

In this special effect, jQUery is used to switch the corresponding class and open the menu button.

(function () {
 $(document).ready(function () {
 $('#navbox-trigger').click(function () {
  return $('#top-bar').toggleClass('navbox-open');
 });
 return $(document).on('click', function (e) {
  var $target;
  $target = $(e.target);
  if (!$target.closest('.navbox').length && !$target.closest('#navbox-trigger').length) {
  return $('#top-bar').removeClass('navbox-open');
  }
 });
 });
}.call(this));