如何使用类似于 mmenu 的 jQuery 制作具有多级滑动窗格的 offCanvas 菜单？

Question

Off the bat I'd like to accept that there are a lot of libraries out there and there are a lot of similar questions on SO.我想马上接受，那里有很多图书馆，并且有很多关于 SO 的类似问题。 But none address the issue at my hand.但没有人能解决我手头的问题。

I have created a OffCanvas Mobile-like sliding Menu inspired from mmenujs .我创建了一个受 mmenujs 启发的类似OffCanvas Mobile 的滑动菜单。

For achieving this I took the approach of making <div> panes with different z-index values and then translating them anchor click.为了实现这一点，我采用了制作具有不同z-index值的<div>窗格，然后将它们转换为锚点单击的方法。

Is there a way to automatically create on.("click",function(){});有没有办法自动创建on.("click",function(){}); using jQuery to open the corresponding panes when clicked on the appropriate link.单击相应的链接时，使用 jQuery 打开相应的窗格。

Here's my code so far:到目前为止，这是我的代码：

 $(document).ready(function(){ $(".vjNav").prepend("<div class='vjNavHead' style='position:sticky;top:0;left:0;background:#222'><div style='flex-grow:1;height:50px;display:flex;align-items:center;justify-content:center'>HelloNav Heading</div><a id='closeNav' style='background:#111;height:50px;width:50px;display:flex;align-items:center;justify-content:center;padding:0'>x</a></div>"); addNavZindex(); $("#page").on("click",function(){ openNav(); });/* To make testing easier */ $("#overlay").on("click",function(){ closeNav(); }); $("#closeNav").on("click",function(){ closeNav(); }); function openNav(){ $("#navMain").toggleClass("TL"); $("#navbar").toggleClass("TR"); $("#page").toggleClass("TR"); $("html").toggleClass("noScroll"); $("#overlay").toggleClass("TL showOver"); }; function closeNav(){ $("html").toggleClass("noScroll"); $("#navMain").toggleClass("TL"); $("#overlay").toggleClass("TL showOver"); $("#navbar").toggleClass("TR"); $("#page").toggleClass("TR"); if($("#about").attr("class") == "vjNav"){ $("#about").toggleClass("TL"); }/* How can I escape coding closeNav for each and every pane manually? */ }; function addNavZindex(){ if( $("#navContainer").find("div").length ){ $(".vjNav").each(function(i){ $(this).attr('style', function(){ return "z-index: " + (20+i); }); }); } }; $("#aboutLink").on("click",function(){ $("#about").toggleClass("TL"); });/* How can I escape declaring onClick functions for each and every pane manually? */ });

 html, body{ margin:0;padding:0; overflow-x: hidden; } #page{ position: absolute; top:0;left:0; display: flex; flex-direction: column; width: 100vw;min-height:100vh;height: 300vh; padding: 0; margin:0; background: orange; transition: ease-in-out 500ms; z-index: 990; } #navbar{ position: fixed; bottom: 0; left: 0; width: 100vw; height: 5vh; min-height:40px; background: forestgreen; z-index: 991; transition: ease-in-out 500ms; } #navMain,.vjNav{ position: fixed; bottom:0;left:0; background: #222; display: flex;flex-direction: column; width: 80vw; height: 100vh; overflow-y: auto; z-index: 20; color: #ddd; transition: ease-in-out 500ms; }.vjNavHead{ display: flex;flex-direction: row; align-items: center; justify-content: space-between; width: 100%;color: aqua; font-size: 1.5rem; box-shadow: inset #ddd 0 -1px; }.vjNav a{ color:#ddd;box-shadow: inset #ddd 0 1px 0 0; text-decoration: none; font-size: 3vh;height: 6vh;line-height: 6vh;padding-left: 2vw; display: flex; flex-direction: row;align-items: center; justify-content: space-between; }.vjNav a:hover, .vjNav a:focus{background: #111;}.vjNav a#closeNav{box-shadow: inset #ddd 0 -1px, inset #ddd 0 0;} #overlay{ position: fixed; top:0;left:80vw; display: flex;flex-direction: column; background: rgba(0, 0, 0, 0.1); width: 100vw;height: 100vh; transition: all ease-in-out 500ms; }.showOver{ z-index: 999; background: rgba(0, 0, 0, 0.7);important. }:TL{ transform; translateX(-80vw). }:TC{ transform; translateX(0vw). }:TR{ transform; translateX(80vw). }:noScroll{ overflow; hidden; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div id="navbar"> Hello </div> <div id="page" class="TC"> Hello <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam exercitationem ipsam odit assumenda repellat. Sunt saepe nesciunt dolores culpa aspernatur, odit officia quis cumque iste reiciendis molestiae recusandae eum dolorum?</p> </div> <div id="overlay" class="TL"></div> <div id="navContainer"> <div id="navMain" class="TL vjNav"> <a id="aboutLink" href="#about">About Us</a> <a href="https://google.com/">Contact</a> <a href="https://google.com/">Hello</a> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam alias autem ab adipisci, beatae ex quas sapiente voluptas eaque eos, commodi maiores fuga voluptatem. Ut facere necessitatibus aut enim sint.</p> <br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Consequatur totam architecto distinctio cum nemo officia dolore voluptates enim quasi, neque dolorem culpa fuga corporis in. nesciunt nisi repudiandae officiis:</p> </div> <div id="about" class="TL vjNav"> <a href="https.//google:com/">About 01</a> <a href="#about2">About 02</a> <a href="https.//google:com/">About 03</a> <a href="https.//google:com/">About 04</a> <a href="https.//google:com/">About 05</a> </div> <div id="about2" class="TL vjNav"> <a href="https.//google:com/">About 02-01</a> <a href="https.//google:com/">About 02-02</a> <a href="https.//google:com/">About 02-03</a> <a href="https.//google:com/">About 02-04</a> <a href="https.//google:com/">About 02-05</a> </div> <div id="hello" class="TL vjNav"> <a href="https.//google:com/">hello 01</a> <a href="https.//google:com/">hello 02</a> <a href="https.//google:com/">hello 03</a> <a href="#hello4">hello 04</a> <a href="https.//google:com/">hello 05</a> <a href="https.//google:com/">hello 06</a> <a href="https.//google:com/">hello 07</a> </div> <div id="hello4" class="TL vjNav"> <a href="https.//google:com/">hello 01</a> <a href="https.//google:com/">hello 02</a> <a href="https.//google:com/">hello 03</a> <a href="https.//google:com/">hello 04</a> <a href="https.//google:com/">hello 05</a> <a href="https.//google:com/">hello 06</a> <a href="https.//google.com/">hello 07</a> </div> </div> </body>

If there is a better way to tackle this kind of menu please do guide...如果有更好的方法来处理这种菜单，请指导...

Answer 1

You could try implementing something like this... Put it in a separate file and call it on the page.你可以尝试实现这样的东西......把它放在一个单独的文件中并在页面上调用它。

 /* PushMenu()
 * ==========
 * Adds the push menu functionality to the sidebar.
 *
 * @usage: $('.btn').pushMenu(options)
 *          or add [data-toggle="push-menu"] to any button
 *          Pass any option as data-option="value"
 */
+function ($) {
 'use strict';

  var DataKey = 'lte.pushmenu';

  var Default = {
  collapseScreenSize   : 767,
  expandOnHover        : false,
  expandTransitionDelay: 200
  };

  var Selector = {
     collapsed     : '.sidebar-collapse',
     open          : '.sidebar-open',
     mainSidebar   : '.main-sidebar',
     contentWrapper: '.content-wrapper',
     searchInput   : '.sidebar-form .form-control',
     button        : '[data-toggle="push-menu"]',
     mini          : '.sidebar-mini',
     expanded      : '.sidebar-expanded-on-hover',
     layoutFixed   : '.fixed'
   };

   var ClassName = {
   collapsed    : 'sidebar-collapse',
   open         : 'sidebar-open',
   mini         : 'sidebar-mini',
   expanded     : 'sidebar-expanded-on-hover',
   expandFeature: 'sidebar-mini-expand-feature',
   layoutFixed  : 'fixed'
  };

  var Event = {
   expanded : 'expanded.pushMenu',
   collapsed: 'collapsed.pushMenu'
  };

// PushMenu Class Definition
// =========================
  var PushMenu = function (options) {
  this.options = options;
  this.init();
  };

  PushMenu.prototype.init = function () {
     if (this.options.expandOnHover
     || ($('body').is(Selector.mini + Selector.layoutFixed))) {
     this.expandOnHover();
     $('body').addClass(ClassName.expandFeature);
  }

    $(Selector.contentWrapper).click(function () {
    // Enable hide menu when clicking on the content-wrapper on small screens
    if ($(window).width() <= this.options.collapseScreenSize && 
    $('body').hasClass(ClassName.open)) {
    this.close();
    }
  }.bind(this));

  // __Fix for android devices
      $(Selector.searchInput).click(function (e) {
      e.stopPropagation();
    });
  };

  PushMenu.prototype.toggle = function () {
    var windowWidth = $(window).width();
    var isOpen      = !$('body').hasClass(ClassName.collapsed);

  if (windowWidth <= this.options.collapseScreenSize) {
     isOpen = $('body').hasClass(ClassName.open);
   }

  if (!isOpen) {
  this.open();
  } else {
  this.close();
  }
};

PushMenu.prototype.open = function () {
var windowWidth = $(window).width();

if (windowWidth > this.options.collapseScreenSize) {
  $('body').removeClass(ClassName.collapsed)
    .trigger($.Event(Event.expanded));
}
 else {
  $('body').addClass(ClassName.open)
    .trigger($.Event(Event.expanded));
  }
};

PushMenu.prototype.close = function () {
var windowWidth = $(window).width();
if (windowWidth > this.options.collapseScreenSize) {
  $('body').addClass(ClassName.collapsed)
    .trigger($.Event(Event.collapsed));
} else {
  $('body').removeClass(ClassName.open + ' ' + ClassName.collapsed)
    .trigger($.Event(Event.collapsed));
  }
};

PushMenu.prototype.expandOnHover = function () {
$(Selector.mainSidebar).hover(function () {
  if ($('body').is(Selector.mini + Selector.collapsed)
    && $(window).width() > this.options.collapseScreenSize) {
    this.expand();
  }
}.bind(this), function () {
   if ($('body').is(Selector.expanded)) {
    this.collapse();
   }
 }.bind(this));
};

PushMenu.prototype.expand = function () {
setTimeout(function () {
  $('body').removeClass(ClassName.collapsed)
    .addClass(ClassName.expanded);
 }, this.options.expandTransitionDelay);
};

PushMenu.prototype.collapse = function () {
setTimeout(function () {
  $('body').removeClass(ClassName.expanded)
    .addClass(ClassName.collapsed);
  }, this.options.expandTransitionDelay);
};

// PushMenu Plugin Definition
// ==========================
function Plugin(option) {
return this.each(function () {
  var $this = $(this);
  var data  = $this.data(DataKey);

  if (!data) {
    var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option);
    $this.data(DataKey, (data = new PushMenu(options)));
  }

  if (option === 'toggle') data.toggle();
  });
}

var old = $.fn.pushMenu;

$.fn.pushMenu             = Plugin;
$.fn.pushMenu.Constructor = PushMenu;

// No Conflict Mode
// ================
$.fn.pushMenu.noConflict = function () {
$.fn.pushMenu = old;
return this;
};

// Data API
// ========
 $(document).on('click', Selector.button, function (e) {
 e.preventDefault();
 Plugin.call($(this), 'toggle');
});
 $(window).on('load', function () {
 Plugin.call($(Selector.button));
 });
}(jQuery);

如何使用类似于 mmenu 的 jQuery 制作具有多级滑动窗格的 offCanvas 菜单？

问题描述

1 个解决方案

解决方案1
-1 2019-10-25 05:15:40

如何使用类似于 mmenu 的 jQuery 制作具有多级滑动窗格的 offCanvas 菜单？

问题描述

1 个解决方案

解决方案1 -1 2019-10-25 05:15:40

解决方案1
-1 2019-10-25 05:15:40