2014-03-13 22 views
0

我正在尝试构建一个非帆布页脚页脚。
这个想法是,当从页脚菜单中选择不同的选项时,页面的其余部分被推上来显示页脚内容
有一个滑动页脚菜单here的教程,但由于它滑动了[页脚]内容在页面顶部(如顶层),这不是我正在寻找的。

通过使用bootstrap“手风琴”我已经成功地将内容下拉到页面下方,但由于这不属于视野(浏览器窗口),所以恐怕有些访问者不会找到它。非帆布推脚页

这里是一个FIDDLE

<div class="pushDown">Please scroll down to bottom</div> 
<div class="panel-group" id="accordion"> 
<div class="panel panel-default"> 
<div class="panel-heading col-xs-6"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
     Collapsible Group Item #1 
    </a> 
</div> 
<div class="panel-heading col-xs-6"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
     Collapsible Group Item #2 
    </a> 
</div> 
</div> 
<div class="panel panel-default"> 
<div id="collapseOne" class="panel-collapse collapse"> 
    <div class="panel-body"> 
    CONTENT 1 
    </div> 
</div> 
<div id="collapseTwo" class="panel-collapse collapse"> 
    <div class="panel-body"> 
    CONTENT 2 
    </div> 
</div> 
</div> 
</div> 

反正是有具备面板推高内容的其余部分,而不是在下降吗?

选择2 - 在这里,我已经调整了Christopher Yee's plugin的行为,因为我需要,但我只能得到它的一个键

PushFooter

$(function() { 
var pushy = $('.pushy'), //menu css class 
    body = $('body'), 
    container = $('#container'), //container css class 
    push = $('.push'), //css class to add pushy capability 
    siteOverlay = $('.site-overlay'), //site overlay 
    pushyClass = "pushy-left pushy-open", //menu position & menu open class 
    pushyActiveClass = "pushy-active", //css class to toggle site overlay 
    containerClass = "container-push", //container open class 
    pushClass = "push-push", //css class to add pushy capability 
    menuBtn = $('.menu-btn, .pushy a'), //css classes to toggle the menu 
    menuSpeed = 300, //jQuery fallback menu speed 
    menuWidth = pushy.width() + "px"; //jQuery fallback menu width 

function togglePushy(){ 
    body.toggleClass(pushyActiveClass); //toggle site overlay 
    pushy.toggleClass(pushyClass); 
    container.toggleClass(containerClass); 
    push.toggleClass(pushClass); //css class to add pushy capability 
} 

我将如何,如果我可以编辑JS工作使用类名称.pushy-left2.menu-btn2.pushy2等。

回答

0

试着制作一个#id粘到脚注的内容区域,并在第触发手风琴。

当你点击链接,使其链接到内容区域“A HREF =‘mysite.com/home#article’”

所以它的中心页面上的资料片

+0

你的意思做一个锚链接? – no0ne

+0

是的,我认为那会工作 – jurjen

+0

我已经尝试过,但由于“href”已被用于“切换”功能,这将无法正常工作?你能用一个有效的例子更新我的'小提琴'吗? – no0ne