9个你会喜欢的 JavaScript 菜单实现方案

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

当你设计网站时，网站导航是一个非常重要的考虑因素。它是你网站中的主要元素，可能也是用户交互最多的元素。

尽管我们可以通过 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. 移动端常用菜单

如果你正在寻找仅专注于移动设计的菜单，那么这个菜单适合。

单击汉堡菜单会显示动画移动菜单。菜单占据了整个屏幕并且可以轻松跳转到其他页面。

公众号回复【菜单源码】获取全部菜单项目的源码

Node 社群

我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

“分享、点赞、在看” 支持一下