jquery CSS3 を使用して、Windows 10 のスタート menu_jquery を模倣するドロップダウン ナビゲーション メニュー効果を実装します。

これは、Windows 10 のスタート メニューを模倣したドロップダウン ナビゲーション メニュー効果です。このドロップダウン メニューは jQuery と CSS3 を使用して、Windows 10 のスタート メニューに似たスタイル効果を実現します。コードは簡潔で、効果は非常にスタイリッシュです。

デモを見る ソース コードのダウンロード

このドロップダウン メニューの HTML 構造は非常に単純です。基本的な HTML 構造は次のとおりです。

<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 スタイル

CSS スタイルでは、トップ ナビゲーション バー .top-bar は 50 ピクセルの固定高さと相対位置に設定され、高い Z インデックス値が与えられます。

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

ドロップダウンの menu.navbox は最初は非表示になっており、絶対位置を使用し、translateY メソッドを通じてナビゲーション バーの 200 ピクセル上に移動します。

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

その後、ドロップダウン メニューがアクティブになると、その透明度が 1 に設定されて表示され、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

この特殊効果では、jQUEry を使用して、対応するクラスを切り替え、メニュー ボタンを開きます。

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