9 個你會喜歡的 JavaScript 菜單實現方案

當你設計網站時，網站導航是一個非常重要的考慮因素。它是你網站中的主要元素，可能也是用戶交互最多的元素。

儘管我們可以通過 HTML 和 CSS 創建一個簡單菜單，但結合JavaScript 可以幫助提高創造力並改善整體用戶體驗。

JavaScript 菜單是讓導航菜單脫穎而出的絕妙方式，添加的功能讓一切都變得更加有趣。

什麼是 JavaScript 菜單？

JavaScript 菜單被稱爲側邊欄、標題導航或移動菜單。JavaScript 用於添加漂亮的動畫或增強菜單的用戶體驗。

通過使用 JavaScript，可以使菜單更具交互性和創造性——能夠控制懸停和單擊事件，使用 CSS 只能在一定程度上完成。

JavaScript 還爲你提供了僅使用 HTML 和 CSS 無法獲得的附加功能。

9 個非常不錯的 JavaScript 菜單項目

可以在不使用 JavaScript 的情況下創建導航菜單，但通過使用 JavaScript，可以創建更有趣和更具交互性的東西，所有這些示例都使用 JavaScript 來增加用戶體驗。

1. 頁面傾斜 JavaScript 菜單

var paperMenu = {
  $window: $('#paper-window'),
  $paperFront: $('#paper-front'),
  $hamburger: $('.hamburger'),
  offset: 1800,
  pageHeight: $('#paper-front').outerHeight(),
  
  open: function() {
    this.$window.addClass('tilt');
    this.$hamburger.off('click');
    $('#container, .hamburger').on('click', this.close.bind(this));
    this.hamburgerFix(true);
    console.log('opening...');
  },
  close: function() {
    this.$window.removeClass('tilt'); 
    $('#container, .hamburger').off('click');
    this.$hamburger.on('click', this.open.bind(this));
    this.hamburgerFix(false);
    console.log('closing...');
  },
  updateTransformOrigin: function() {
    scrollTop = this.$window.scrollTop();
    equation = (scrollTop + this.offset) / this.pageHeight * 100;
    this.$paperFront.css('transform-origin', 'center ' + equation + '%');
  },
  //hamburger icon fix to keep its position
  hamburgerFix: function(opening) {
      if(opening) {
        $('.hamburger').css({
          position: 'absolute',
          top: this.$window.scrollTop() + 30 + 'px'
        });
      } else {
        setTimeout(function() {
          $('.hamburger').css({
            position: 'fixed',
            top: '30px'
          });
        }, 300);
      }
    },
  bindEvents: function() {
    this.$hamburger.on('click', this.open.bind(this));
    $('.close').on('click', this.close.bind(this));
    this.$window.on('scroll', this.updateTransformOrigin.bind(this));
  },
  init: function() {
    this.bindEvents();
    this.updateTransformOrigin();
  },
};

paperMenu.init();

獨特的頁面傾斜效果用於在左側顯示菜單，單擊漢堡圖標將激活菜單並將整個主體向右傾斜。

動畫流暢，外觀獨特，菜單有自己的關閉按鈕，漢堡包圖標可以方便地從屏幕上方滑出。

項目代碼比較多，避免篇幅太長，後面的就不一一放源碼了，回覆【菜單源碼】獲取全部項目的源碼。

2. 複雜下拉菜單

下拉. gif

大多數下拉菜單隻有一層，但這個 JavaScript 下拉菜單有多層。可以選擇一個子類別並顯示一個新菜單；然後你也可以單擊 “返回” 導航到所在的位置。

3. 角度動畫菜單

一個很酷且獨特的 JavaScript 菜單，可以集成到任何網站設計中，更改菜單顏色、字體樣式和背景顏色以適合你的項目。

demo 中CSS已經提供了簡單的變量，你可以直接修改。JavaScript 用在菜單設置動畫並在單擊事件時切換某些類。

3. 動畫導航菜單

導航動畫. gif

這個動畫導航菜單更偏向於應用在移動端，JS代碼非常的少 (詳細源碼單獨獲取):

$('.toggle').on('click', function() {
  $('.menu').toggleClass('expanded');  
  $('span').toggleClass('hidden');  
  $('.container , .toggle').toggleClass('close');  
});

5. 氣泡菜單

氣泡菜單. gif

一個富有創意的交互式 JavaScript 菜單，使用起來非常吸引人。單擊菜單圖標可平滑地將其滑入中心並顯示導航至其他頁面的菜單選項。

單擊菜單圖標可平滑過渡到新頁面，所有內容都像單頁應用程序一樣加載。菜單圖標保留在同一位置，便於在其他地方導航。

動畫非常流暢而且不會讓人不知所措，這個例子有一種增加用戶體驗的基調。

6. 全屏變形導航菜單

當菜單打開和關閉時，所有菜單鏈接都有微妙的動畫效果。

7. 滑出菜單

滑出. gif

一個漢堡包樣式的菜單，可以滑出展開，展示可以單擊的圖標。

這個效果在移動端和 WEB 上應用效果都非常不錯。

8. 圓形導航菜單

圓形. gif

帶有大量動畫和效果的圓形菜單。可以將鼠標懸停在不同的小圓圈上以查看它們，單擊它們將被視爲已選中。

9. 移動端常用菜單

如果你正在尋找僅專注於移動設計的菜單，那麼這個菜單適合。

單擊漢堡菜單會顯示動畫移動菜單。菜單佔據了整個屏幕並且可以輕鬆跳轉到其他頁面。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/VVbimobrEzZWrqC4BOAsHg

猜你喜歡