Question

我无法使用Adam Scott创建的bigSlide jquery插件定位菜单。可点击链接（换行类）确实响应了css，但是菜单（面板类）没有。因此，可点击链接是从页面底部指定的100 px，但是菜单（滑动OK）仍然位于页面顶部。我觉得有一个直接的解决方案，但它目前逃脱了我。

代码是：

<!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>

Answer 1

从外观上看，bigSlide.js会为您的nav.panel添加默认的内嵌样式，这会覆盖您的样式。

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

他们似乎没有提供options来处理你想要的东西，你肯定不想通过强制样式{来覆盖元素上的默认库JS或CSS。 {1}}。

如果我们从逻辑上考虑它们，它们添加的样式实际上是有意义的，我们希望面板从上到下固定，无论它包含什么HTML。

因此，在您的情况下，我建议您为!important元素添加自定义样式。

<ul>

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

＆＃13;

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

＆＃13;

/*! 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();
});

＆＃13;

.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;
}

＆＃13;

使用bigSlide jquery插件定位菜单

1 个答案: