Gunakan jquery CSS3 untuk melaksanakan kesan menu navigasi lungsur turun yang meniru menu mula Windows 10_jquery

Ini ialah kesan menu navigasi lungsur turun yang meniru menu mula Windows 10. Menu lungsur turun ini menggunakan jQuery dan CSS3 untuk mencapai kesan gaya yang serupa dengan menu permulaan Windows 10 Kodnya ringkas dan kesannya sangat bergaya.

Lihat demo Muat turun kod sumber

Struktur HTML menu lungsur ini sangat mudah Struktur HTML asas adalah seperti berikut:

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

Gaya CSS

Dalam gaya CSS, bar navigasi atas .bar atas ditetapkan pada ketinggian tetap 50 piksel dan kedudukan relatif dan diberi nilai indeks z yang tinggi.

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

Menu lungsur turun.navbox disembunyikan pada mulanya Ia menggunakan kedudukan mutlak dan mengalihkannya ke 200 piksel di atas bar navigasi melalui kaedah translateY.

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

Kemudian apabila menu lungsur diaktifkan, ketelusannya ditetapkan kembali kepada 1, menjadi kelihatan dan dialihkan kembali ke kedudukan asalnya melalui kaedah translateY.

.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

Dalam kesan khas ini, jQuery digunakan untuk menukar kelas yang sepadan dan membuka butang 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));