Javascript 使用bigSlide jquery插件定位菜单_Javascript_Jquery_Css

Javascript 使用bigSlide jquery插件定位菜单

javascript jquery css

Javascript 使用bigSlide jquery插件定位菜单,javascript,jquery,css,Javascript,Jquery,Css,我在使用Adam Scott创建的bigSlide jquery插件定位菜单时遇到问题。可点击链接（包装类）不响应css，但菜单（面板类）不响应。因此，可点击的链接是页面底部指定的100px，但菜单（滑动OK）仍然位于页面顶部。我觉得这有一个直截了当的解决办法，但我现在想不起来了代码是： <!DOCTYPE HTML> <html> <head> <title>Big Slide Menu</title> <sc

我在使用Adam Scott创建的bigSlide jquery插件定位菜单时遇到问题。可点击链接（包装类）不响应css，但菜单（面板类）不响应。因此，可点击的链接是页面底部指定的100px，但菜单（滑动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>


大幻灯片菜单
$（文档）.ready（函数（）{
$（'.menu-link'）.bigsiled（{}）；
});
.小组{
位置：绝对位置；
底部：180像素；
左：-15.625em；
宽度：15.625em；
}
.包裹{
位置：绝对位置；
底部：100px；
}

从外观上看，

bigsiled.js

将默认的内联样式添加到您的

nav.panel

，它覆盖了您的样式

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

它们似乎不能满足您的需要，而且您肯定不希望通过使用

强制样式来覆盖元素上的默认库JS或CSS！重要信息

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

因此，在您的情况下，我建议您向

元素添加自定义样式

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

如果这不合理，请告诉我

/*！大幻灯片-v0.8.0-2015-04-28
* http://ascott1.github.io/bigSlide.js/
*版权所有（c）2015 Adam D.Scott；麻省理工学院执照*/
!函数（a）{“使用严格”；“函数”==typeof define&&define.amd？define（[“jquery”]），a:“对象”==typeof exports？module.exports=a（要求（“jquery”）：a（jquery）}（函数（a）{“使用严格”；“a.fn.bigSlide=function（b）{var c=this，d=a.extend（{菜单：“#菜单”，推送：“.push”，侧：“左”，菜单宽度：“15.625em”，速度：“300”，状态：“关闭”，活动BTN:“活动”，easyClose:！1，beforeOpen:function（）{}，afterOpen:function（）{}，beforeClose: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.$a（d.menu），this=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，b.closed”==d.state&（this.$menu.css（b），this.$push.css（d.side，“0”）；var e={-webkit transition:“d.side+”+d.speed+“ms-moz transition”：d.side+“d.speed+”ms+“ms+”ms+“ms”，“-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 toucstart.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（）。和self（）。打开“！==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.removecetlass”，afterClose（）}；f.init（）}）；
$（文档）.ready（函数（）{
$（'.menu-link'）.bigSlide（）；
})；

.panel{
位置：绝对位置；
/*底部：180px；*//*不会有什么区别，因为它被覆盖了*/
左：-15.625em；
宽度：15.625em；
}
.专家组ul{
位置：绝对位置；
底部：150px；
左：0；
}
.包裹{
位置：绝对位置；
左：0；
底部：100px；
}

您的建议很好-设置

元素的样式很有效。看起来您很适合覆盖.panel样式。谢谢。我很高兴：）如果我的回答帮助您完全修复了解决方案，请将其标记为：）