Question

我这里的另一个问题。我正在构建这个site。菜单和页脚已经完成（现在），我已经到了添加空间来放入我的内容的地步。我希望内容从菜单和页脚之间向右滑动（见下文）。防爆。如果我按下联系人，联系页面会从右侧滑入等等。

我不知道上传源文件的位置。但如果你需要它们，你也可以说我应该在哪里上传它们。我并不想上传到我的网站，因为你可能认为它是病毒或其他东西。

*********************************
*           menu                *
*********************************
*                           <---*
*      content sliding      <---*
*      in from right        <---*
*      when press link      <---*
*      on menu              <---*
*                           <---*
*                           <---*
*                           <---*
*********************************
*           footer              *
*********************************

非常感谢你的时间和帮助，我真的很感激。

马库斯

Answer 1

在您的代码中，添加以下内容：

<强> HTML

<!-- This is your sidebar -->
<aside id="cont_bar" class="hide"></aside>

<强> CSS

/*This styles the sidebar, and adds classes to control display*/
#cont_bar {
    width: 16.6%;
    background-color: #fff;
    opacity: .60;
    margin-top: 36px;
    float: right;
    position: relative;
    transition: right .8s;
    -moz-transition: right .8s;
    -webkit-transition: right .8s;
}

.hide {
    right: -100%;
}

.unhide {
    right: 0;
}

<强> JS

/*Need this for event handling, works with jquery 1.6.4(included in your files) */
window.onload = function() {

    var winHeight = $(window).height(); //window height
    var footHeight = $('#footerwrapper').height(); //footer height
    $('#cont_bar').css( 'height', winHeight - 3.5*(footHeight) ); //sets sidebar height

    var getit = $('#contact');
    $(getit).bind( "click", function() {

        $('#cont_bar').toggleClass( "hide unhide" );

    });

}

修改我忘了提一点..
首先，这需要javascript和jQuery 其次，我给你的联系人按钮（li）一个contact的身份证最后，这绝不是一个完美的解决方案，但它应该给你一些思考，并希望在正确的方向上轻推。

此处的代码创建了一个容器作为侧边栏<aside id="cont_bar">。

它创建了一些类来处理隐藏，取消隐藏和转换以创建滑动效果。

用于计算侧边栏的高度，添加和删除类以及设置事件处理程序（单击）在“联系人”按钮上（现在为id="contact"）。

从菜单和页脚之间右侧滑入的内容

1 个答案: