0

我想马上接受，那里有很多图书馆，并且有很多关于 SO 的类似问题。但没有人能解决我手头的问题。

我创建了一个受 mmenujs 启发的类似 OffCanvas Mobile 的滑动菜单。

为了实现这一点，我采用了制作<div>具有不同值的窗格z-index然后翻译它们的锚点单击的方法。

on.("click",function(){});有没有一种方法可以在单击适当的链接时使用 jQuery自动创建以打开相应的窗格。

到目前为止，这是我的代码：

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

如果有更好的方法来处理这种菜单，请指导...

4

1 回答 1

-1

你可以尝试实现这样的东西......把它放在一个单独的文件中并在页面上调用它。

 /* 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);
于 2019-10-25T05:15:40.863 回答