javascript - 使用 bigSlide jquery 插件定位菜单-6ren

javascript - 使用 bigSlide jquery 插件定位菜单

转载作者：行者123 更新时间：2023-11-28 07:57:04

我在使用 Adam Scott 创建的 bigSlide jquery 插件定位菜单时遇到问题。可点击链接(包装类)确实响应 css，但是菜单(面板类)却没有。因此，可点击的链接是距页面底部指定的 100 像素，但是菜单(滑动确定)仍然位于页面顶部。我觉得有一个直接的解决方案，但目前我没有想到。

代码是:

<!DOCTYPE HTML>
<html>
<head>
    <title>Big Slide Menu</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.big-slide.js"></script>
    <script>    
        $(document).ready(function() {
            $('.menu-link').bigSlide({});
        });
    </script>
    <style>
        .panel {
            position:   absolute;
            bottom:     180px;
            left:       -15.625em; 
            width:      15.625em;   
        }
        .wrap {
            position:   absolute;
            bottom:     100px;
        }
    </style>
</head>
<body>
    <nav id="menu" class="panel" role="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">The Ballad of El Goodo</a></li>
            <li><a href="#">Thirteen</a></li>
            <li><a href="#">September Gurls</a></li>
            <li><a href="#">What's Going Ahn</a></li>
        </ul>
    </nav>
    <div class="wrap">
        <a href="#menu" class="menu-link">&#9776;</a>
    </div>  
</body>
</html>

最佳答案

从外观上看，bigSlide.js将默认内联样式添加到您的 nav.panel ，它会覆盖您的样式。

/* Added by bigSlide.js */
element.style {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    /* etc... */
}

他们似乎不提供options来处理你想要的，你肯定不想通过使用 !important 强制样式来覆盖元素上的默认库 JS 或 CSS .

如果我们从逻辑上考虑，他们添加的样式其实是有道理的，我们希望面板从上到下固定不变，不管它包含什么HTML。

因此，在您的情况下，我建议您将自定义样式添加到 <ul>元素。

.panel ul {
    position: absolute;
    bottom: 150px; /* Or whatever you want */
    left:0;
}

如果这没有意义，请告诉我。

/*! bigSlide - v0.8.0 - 2015-04-28
* http://ascott1.github.io/bigSlide.js/
* Copyright (c) 2015 Adam D. Scott; Licensed MIT */
!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";a.fn.bigSlide=function(b){var c=this,d=a.extend({menu:"#menu",push:".push",side:"left",menuWidth:"15.625em",speed:"300",state:"closed",activeBtn:"active",easyClose:!1,beforeOpen:function(){},afterOpen:function(){},beforeClose:function(){},afterClose:function(){}},b),e={state:d.state},f={init:function(){g.init()},changeState:function(){"closed"===e.state?e.state="open":e.state="closed"},getState:function(){return e.state}},g={init:function(){this.$menu=a(d.menu),this.$push=a(d.push),this.width=d.menuWidth;var b={position:"fixed",top:"0",bottom:"0",height:"100%"};b[d.side]="-"+d.menuWidth,b.width=d.menuWidth,"closed"===d.state&&(this.$menu.css(b),this.$push.css(d.side,"0"));var e={"-webkit-transition":d.side+" "+d.speed+"ms ease","-moz-transition":d.side+" "+d.speed+"ms ease","-ms-transition":d.side+" "+d.speed+"ms ease","-o-transition":d.side+" "+d.speed+"ms ease",transition:d.side+" "+d.speed+"ms ease"};this.$menu.css(e),this.$push.css(e),c.on("click.bigSlide touchstart.bigSlide",function(a){a.preventDefault(),"open"===f.getState()?g.toggleClose():g.toggleOpen()}),d.easyClose&&a("body").on("click.bigSlide",function(b){a(b.target).parents().andSelf().is(c)||"open"!==f.getState()||g.toggleClose()})},toggleOpen:function(){d.beforeOpen(),f.changeState(),this.$menu.css(d.side,"0"),this.$push.css(d.side,this.width),c.addClass(d.activeBtn),d.afterOpen()},toggleClose:function(){d.beforeClose(),f.changeState(),this.$menu.css(d.side,"-"+this.width),this.$push.css(d.side,"0"),c.removeClass(d.activeBtn),d.afterClose()}};f.init()}});

$(document).ready(function() {
  $('.menu-link').bigSlide();
});

.panel {
  position: absolute;
  /*bottom: 180px;*/ /*not going to make a difference because it's overwritten */
  left: -15.625em;
  width: 15.625em;
}
.panel ul {
  position: absolute;
  bottom: 150px;
  left: 0;
}
.wrap {
  position: absolute;
  left: 0;
  bottom: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav id="menu" class="panel" role="navigation">
  <ul>
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">The Ballad of El Goodo</a>
    </li>
    <li><a href="#">Thirteen</a>
    </li>
    <li><a href="#">September Gurls</a>
    </li>
    <li><a href="#">What's Going Ahn</a>
    </li>
  </ul>
</nav>
<div class="wrap">
  <a href="#menu" class="menu-link">&#9776;</a>
</div>