Use JQUERY+CSS3 to implement the Pull-down navigation menu effects of the Windows10 Start menu _jquery

This is a copy of the WINDOWS10 Start menu drop-down navigation menu effects. The Pull-down menu uses jquery and CSS3 to perform a similar WINDOWS10 Start menu style effect, and its code is concise and the results are very stylish.

View Demo Source Download

The HTML structure of the Drop-down menu is very simple and 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 Styles

In CSS styles, the top navigation bar. Top-bar is set to a fixed height of 50 pixels and relative positioning, and gives a higher z-index value.

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

The Drop-down menu. Navbox is hidden at the beginning, it uses absolute positioning and moves it to 200 pixels above the navigation bar by 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 Pull-down menu is activated, its transparency is set back to 1, becomes visible, and moves it back to its original position by 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

This effect uses jquery to toggle the corresponding class class and to 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));