Utilisez jquery CSS3 pour implémenter des effets de menu de navigation déroulant qui imitent le menu de démarrage de Windows 10_jquery

Il s'agit d'un effet de menu de navigation déroulant qui imite le menu Démarrer de Windows 10. Ce menu déroulant utilise jQuery et CSS3 pour obtenir un effet de style similaire au menu Démarrer de Windows 10. Son code est concis et l'effet est très élégant.

Voir la démo Téléchargement du code source

La structure HTML de ce menu déroulant est très simple. La structure HTML de base est la suivante :

<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>

Style CSS

Dans le style CSS, la barre de navigation supérieure .top-bar est définie sur une hauteur fixe de 50 pixels et un positionnement relatif, et reçoit une valeur d'index z élevée.

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

Le menu déroulant.navbox est masqué au début. Il utilise un positionnement absolu et le déplace à 200 pixels au-dessus de la barre de navigation via la méthode translationY.

.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;
}

Puis lorsque le menu déroulant est activé, sa transparence est remise à 1, devient visible et est replacée à sa position d'origine grâce à la méthode translationY.

.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

Dans cet effet spécial, jQUEry est utilisé pour changer de classe correspondante et ouvrir le bouton de menu.

(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));